Verwandte Lernempfehlungen: Tutorial zur Entwicklung eines ?ffentlichen WeChat-Kontos

Im Jahr 2019 n. Chr. wurden die schwachen Satzfunktionen des ?ffentlichen WeChat-Kontos von den Betreibern immer kritisiert, und Tools wie Xiumi und 135 Editor wurden in eine Partei aufgeteilt .

Aber unabh?ngig davon, ob es sich um die nativen Tools von WeChat oder andere Editoren handelt, müssen Entwickler ihre begrenzte kreative Erfahrung in die Layoutgestaltung einbringen.

Markdown Das Allheilmittel für den Schriftsatz ist entstanden.

1. Einführung

1.1 Was ist Markdown?

Markdown ist eine Satzsyntax mit einer minimalistischen Eingabemethode und extrem niedrigen Lernkosten.

Es ist reich an Titeln, Zitaten, Fettdruck, Links, Bildern, Codeausschnitten, Formeln und anderen Formaten, die bei der Texterstellung ben?tigt werden.

Damit k?nnen sich Menschen auf den Inhalt selbst konzentrieren, ohne vom Format gest?rt zu werden.

1.2 Wie integriere ich mich in das offizielle WeChat-Konto?

Eine solch hervorragende Formatierungssyntax wird vom offiziellen WeChat-Konto nicht unterstützt.

Mach dir keine Sorgen! Markdown Nice ist hier, um Ihnen bei der L?sung Ihres Problems zu helfen!

1.3 Was ist Markdown Nice?

Als Open-Source-Markdown-Editor ist der Schriftsatz nach dem Schreiben erfolgreich und Sie k?nnen ihn kopieren und in das offizielle WeChat-Konto einfügen.

Na und? Ist das alles?

Natürlich nicht! Nettes Baby, welche anderen Eigenschaften hast du?

• Unterstützt Diagramme, Fu?noten, Codes, Formeln
• Unterstützt 8 Arten von Layoutthemen und 7 Arten von Codethemen
• Unterstützt benutzerdefinierte Stile und kann Themen zum Bewundern einreichen
• Zus?tzlich zu offiziellen Konten, Unterstützt Plattformen wie Zhihu, Nuggets, Blog Park und CSDN
• Ich sehe gut aus

So viele hervorragende Funktionen liegen vor Ihnen, worauf warten Sie noch?

Adresse: https://mdnice.comhttps://mdnice.com

快讓你的微信排版 Nice 起來(lái)！

二、正文

沒(méi)想到你還在看

咳咳、、、

不要小看Nice寶寶我，為了能夠使用 Markdown 進(jìn)行公眾號(hào)排版，我可是和微信公眾號(hào)編輯器做了半年的斗爭(zhēng)，才贏得了現(xiàn)在的戰(zhàn)果！

想聽(tīng)聽(tīng)我是如何戰(zhàn)斗的？下面且聽(tīng)我娓娓道來(lái)！

2.1 戰(zhàn)斗序章

微信公眾號(hào)編輯器源于百度 FEX 前端團(tuán)隊(duì)的開(kāi)源的 ueditor 項(xiàng)目，這可是寶寶我扒取了網(wǎng)頁(yè)代碼發(fā)現(xiàn)的，如圖所示：

因?yàn)?ueditor 是富文本編輯器，所以我即將面臨的是 markdown->富文本

Beeilen Sie sich und gestalten Sie Ihr WeChat-Layout sch?n!

• 2. Text

• Ich h?tte nicht erwartet, dass du noch liest span>

?hm,,,Untersch?tze mich nicht, nettes Baby. Um Markdown für den Schriftsatz für ?ffentliche Konten verwenden zu k?nnen, habe ich ein halbes Jahr lang mit dem WeChat-Editor für ?ffentliche Konten gek?mpft, bevor ich die aktuellen Ergebnisse erzielt habe !

• M?chten Sie h?ren, wie ich k?mpfe? Jetzt h?r mir zu!

• 2.1 Battle Prologue

Der ?ffentliche WeChat-Kontoeditor stammt aus dem Open-Source-ueditor-Projekt des Baidu FEX-Frontend-Teams durch Diebstahl des Webseitencodes, wie im Bild gezeigt:

Da ueditor ein Rich-Text-Editor ist, werde ich mit markdown konfrontiert. >Rich Text Es gibt eine ganze Reihe hervorragender Implementierungen dieser Art von Konvertierungskampf in der Open-Source- oder Softwarewelt. Zum Beispiel: ??????Webseite: editor.md, mavonEditor????PC-Seite: typora, MWeb??????Aber es gibt ein Problem mit den oben genannten Tools. Sie integrieren den ??CSS-Stil?? nicht gut in Rich Text Anpassung an den WeChat-Editor und sogar an die Rich-Text-Editoren anderer gro?er inl?ndischer Plattformen. ????Gibt es also irgendwelche Tools, die versuchen, dieses Problem zu beheben? Tats?chlich gibt es: ??????Webseite: md2all, wechat-format????Browser-Plugin: markdown-here????????Aber die oben genannten Tools haben auch ihre eigenen Unvollkommenheiten, daher habe ich diese M?glichkeit mit Nice Baby gefunden. Ich habe es selbst hergestellt und alle M?ngel behoben! ??????Markdown Nice ist ein Open-Source-Projekt, das aus vielen Open-Source-Technologien besteht, darunter: ??

• React: Facebooks Open-Source-JS-View-Layer-Framework
• Markdown-IT: Markdown-Konvertierungs-Rich-Text-Parser
• Juice: ein Tool zum Konvertieren von CSS-Klassenselektoren in Inline-Stile
• Codemirror: Webcode-Editor
• Ant-Design: React UI-Komponentenbibliothek
• mobx: Zustandsverwaltungsbibliothek
• highlight.js: Code-Hervorhebungsbibliothek
• MathJax-node: Formel-zu-Bild-Bibliothek
• axios, ali-oss, qiniu-js usw.

Hinweis: Einige davon Die oben genannten Open-Source-Bibliotheken werden im Folgenden aufgeführt. Informationen zu den spezifischen Funktionen der Open-Source-Bibliotheken finden Sie hier.

Nachdem ich über die oben genannten Technologien verfügte, erkl?rte ich dem WeChat-Editor den Krieg und feuerte den ersten Schuss der Schlacht ab!

2.2 Der erste Schuss im Kampf: Code-Theme

Vor 2018 unterstützte das ?ffentliche WeChat-Konto überhaupt keine Codebl?cke, und es gibt das Problem von gro?em Code Schriftarten.

Es ist sehr ?rgerlich zu sagen, dass die Entwickler des WeChat-Editors für ?ffentliche Konten nie darüber nachgedacht haben, wie wichtig Codebl?cke für die Programmierer-Community sind? ?

Zu diesem Zweck habe ich das Code-Hervorhebungsartefakt highlight.js gefunden, das dabei hilft, das Problem eines einzelnen Codethemas zu l?sen. highlight.js代碼高亮神器，幫助解決代碼主題單一的問(wèn)題。

經(jīng)過(guò)一定的篩選后，最終選定了 atom-one-dark、atom-one-light、monikai、GitHub、vs2015、xcode 和微信代碼主題共 7 個(gè)代碼樣式供大家選擇。

其中微信代碼主題由于其不屬于highlight.js的歸屬范疇，故而其結(jié)構(gòu)需要從微信公眾號(hào)編輯器源碼中獲取，下面兩張圖展示了如何獲?。?/p>

而 highlight.js 與 markdown-it

Nach einigem Screening haben wir schlie?lich insgesamt 7 Codestile ausgew?hlt, aus denen jeder w?hlen kann, darunter Atom-one-dark, Atom-one-light, monikai, GitHub, vs2015, xcode und WeChat-Codethemen.

Da das WeChat-Codethema nicht zur Kategorie highlight.js geh?rt, muss seine Struktur aus dem Quellcode des WeChat-Editors für ?ffentliche Konten abgerufen werden. Die folgenden zwei Bilder zeigen, wie man es erh?lt:

Und highlight.js und markdown-it Code> werden geparst Die Parser werden zusammen verwendet, daher gibt es im Tool zwei Markdown-Parser, die zum Parsen von WeChat-Codethemen bzw. anderen Codethemen-Referenzen verwendet werden.

Zus?tzlich zu den oben genannten Problemen treten bei vielen technischen Codes ?ffentlicher Konten folgende Probleme auf:

Probleme bei der Anzeige mehrerer Zeilen, die durch eine zu lange Codezeile verursacht werden

.

Dieses Problem kann mit dem folgenden CSS-Code gel?st werden:

pre?code?{display:?-webkit-box?!important}復(fù)制代碼

Der Vergleichseffekt ist wie im Bild gezeigt:

Genossen, die Markdown verwenden. Sch?n, von nun an wird der Code sch?ner!

2.3 Die zweite Einstellung des Battles: Bild-Upload

Wie kann ein guter Artikel ohne Bilder sein?

(Einige technische Mitarbeiter sagten: Meiner hat es nicht)

Bildverwaltung ist ein Problem, mit dem jeder erfahrene Redakteur konfrontiert wird.

Nice Baby hat zum ersten Mal das SM.MS-Bildbett benutzt, das von einem gro?en Chef betrieben und gewartet wird, vielen Dank!

Obwohl Sie mit dieser Bildplattform Bilder hochladen k?nnen, ist die Fehlerquote beim Einfügen in den WeChat-Editor extrem hoch (Ich m?chte den WeChat-Editor zu Tode trampeln), wie im Bild gezeigt:

Es ist wirklich {lieb zu sehen|.

??Um die oben genannten Probleme zu l?sen, hat Markdown Nice nacheinander angepasste Alibaba Cloud- und Qiniu Cloud-Image-Betten unterstützt. Sie k?nnen selbst erstellte Image-Betten verwenden, indem Sie die Dienste von Alibaba Cloud und Qiniu Cloud erwerben. ??????Aber! Lassen Sie den Benutzer es selbst konfigurieren. Obwohl es Konfigurationsdokumente gibt, ist der gesamte Konfigurationsprozess ?u?erst kompliziert und miserabel! ????????????????Nice Baby nutzte also seinen eigenen Account, um sein eigenes Bilderbett zu bauen, legte die Lagerzeit auf einen Tag fest und stellte das mdnice-Bilderbett für den tempor?ren Schriftsatz zur Verfügung. Zu diesem Zeitpunkt ist die Bild-Upload-Unterstützung im Tool wie folgt: ???Bilderbett“ SM.MSAlibaba CloudReferenz10G kostenlos

kostenlos	langfristig	hoch
Angepasst	Niedrig		Qiniu Cloud
Angepasst	Niedrig		這場(chǎng)圖床的戰(zhàn)役中，最大的難度在于需要閱讀阿里云 OSS 和七牛云 KODO 的文檔，并且使用其開(kāi)源出來(lái)的工具包 ali-oss 和 qiniu-js 。 這其中又涉及到了 FormData、file對(duì)象、base64 和 blob 之間的神奇轉(zhuǎn)換，源碼參考。 總之，這場(chǎng)戰(zhàn)斗打的不亦樂(lè)乎。 2.4 戰(zhàn)斗第三槍?zhuān)簲?shù)學(xué)公式 微信公眾號(hào)排版中，數(shù)學(xué)公式是一個(gè)噩夢(mèng)！ 因?yàn)槲⑿啪庉嬈髯隽艘韵氯虑椋?/p> 不支持公式編輯 不支持 html 和 css 生成的公式，因?yàn)樽煮w無(wú)法導(dǎo)入 不支持 svg，放入后提示失敗 這三件事情簡(jiǎn)直像魔鬼的步伐，把公式需求者放在光滑的地板上摩擦、摩擦.... 目前唯一可行的方案就是將公式轉(zhuǎn)換成圖片，再將圖片直接貼到公眾號(hào)里，Nice寶寶覺(jué)得自己這個(gè)想法簡(jiǎn)直是完美！ 但是，怎么做呢...... 忽然靈機(jī)一動(dòng)，想到了朋友曾經(jīng)推薦的一個(gè)轉(zhuǎn)換公式網(wǎng)站 Kniffliger Editor für ?ffentliche WeChat-Konten，這個(gè)網(wǎng)站能夠做到將任意公式轉(zhuǎn)換成png圖片并給出可訪問(wèn)鏈接。 但是由于圖片穩(wěn)定性，無(wú)法直接使用該鏈接，會(huì)存在和第二場(chǎng)戰(zhàn)役一樣，圖片粘貼失敗的情況，讓人苦不堪言。 這個(gè)問(wèn)題該怎么解決呢？如果能夠自建公式轉(zhuǎn)png圖片服務(wù)就好了。 有沒(méi)有這樣的開(kāi)源庫(kù)？有！MathJax-node 就可以！ 于是Nice寶寶自建后臺(tái)服務(wù)，封裝 RESTful 接口供前端調(diào)用，實(shí)現(xiàn)了公式轉(zhuǎn)圖片的功能！經(jīng)過(guò)測(cè)試，完全可以使用，粘貼后再根據(jù)排版情況調(diào)整圖片大小即可。 其中對(duì)于大量公式的轉(zhuǎn)換，前端合理使用了異步請(qǐng)求，并非一個(gè)個(gè)轉(zhuǎn)換而是并行執(zhí)行，性能上達(dá)到了10個(gè)公式也能2秒轉(zhuǎn)換完畢的效果，完全可用于公式排版。 2.5 戰(zhàn)斗第四槍?zhuān)何⑿磐怄溵D(zhuǎn)腳注 眾所周知（不知道也得知道），微信不支持外鏈，除了域名為https://mp.weixin.qq.com/的合法鏈接外，其他的鏈接出現(xiàn)后都會(huì)被自動(dòng)刪除。 而添加外鏈的唯一官方方式就是在閱讀全文處，當(dāng)然，直接將鏈接本身放到文中或者制作二維碼圖片也是可以的選擇。 而 Nice 寶寶則提供了將微信外鏈轉(zhuǎn)為腳注的方式解決該問(wèn)題，是不是很優(yōu)雅呢？ 其中鏈接和腳注的使用區(qū)別如下： 鏈接：[文字](鏈接?"文字") 腳注：[文字](腳注解釋?"腳注名字")復(fù)制代碼 這里又涉及到了一個(gè)常見(jiàn)的問(wèn)題，就是很多公眾號(hào)作者的文章中，原來(lái)在其他平臺(tái)發(fā)布時(shí)都是鏈接，而到這里排版時(shí)需要進(jìn)行挨個(gè)修改，實(shí)在是讓人頭大。 于是Nice寶寶我又做了一個(gè)小改進(jìn)，就是在粘貼文章的時(shí)候會(huì)自動(dòng)監(jiān)測(cè)是否存在外鏈，并提示作者是否一鍵轉(zhuǎn)成腳注，這樣就不必手工修改了，贊不贊！ 2.6 戰(zhàn)役總結(jié) 和微信公眾號(hào)編輯器對(duì)抗，是個(gè)極其有意思的過(guò)程。除了上述提到的問(wèn)題之外，還有很多的細(xì)節(jié)點(diǎn)需要注意，在此就不一一討論了，感興趣歡迎閱讀源碼。 Die Kampfreise von Markdown Nice ist noch lange nicht zu Ende und Funktionen wie die Produktion offizieller Websites, Browser-Plug-Ins, lokale Tools und Satzkorrektur sind einsatzbereit. 3. Reden wir über etwas, das nichts mit Kampf zu tun hat 3.1 Designkonzept Für die meisten Menschen ist der Inhalt wichtiger als das Layout, und das Layout ist wichtiger als das Design. Inhalte sind der Kern der Lesergewinnung und daher das Wichtigste. Was den Vergleich zwischen Schriftsatz und Design betrifft, so habe ich als ehemaliger WeChat-Kunstredakteur mit zunehmender Erfahrung im Schriftsatz festgestellt, dass die Wirkung des Artikels nicht in der zus?tzlichen Spitze und Verzierung liegt. 3.2 Inhalt, Layout und Design zu teuer hoch. Also: Die meisten Leute machen kein Design und Rich-Text-Design ist nicht für einfache Content-Editoren geeignet. Allerdings: Die meisten Leute wissen nicht, wie man setzt, oder denken, dass die Kosten für den Schriftsatz zu hoch sind. Aber: Markdown Nice befreit Benutzer vom Layout und konzentriert sich nur auf den Inhalt selbst. 3.3 über Open Source Open Source ist ein Prozess, der sowohl einfach als auch schwierig ist: Einfach, weil : Notizen, Buchlisten, Tools, Plattformen, alle wertvollen Dinge k?nnen in GitHub ausgegeben werden, das ist sehr einfach zu machen. Einfach Es ist schwierig, weil : Versuchen Sie, für andere wertvoll zu sein und bestehen Sie immer auf Output. Es ist sehr schwierig zu machen. Wie oben beschrieben, bedeutet Open Source tats?chlich, ein Produkt zu erstellen Technisches Produkt (z. B. Redis, Ant Design) oder es kann ein Gesch?ftsprodukt sein (z. B. Markdown Nice). Nur wenn es gut gemacht ist, kann es einen Wert für andere schaffen. Der Prozess der Herstellung eines Produkts ist mühsam und langwierig. Beim Vergleich des Markdown Nice-Entwicklungsprozesses k?nnen Sie die folgenden Schritte erkennen: Sie müssen eine Idee haben, deren Machbarkeit und Notwendigkeit überprüfen, sie mit ?hnlichen Produkten vergleichen und fertig sein sich dessen bewusst sein. Erfassen Sie die Schwachstellen, erfassen Sie die Grundwerte, denken Sie aus der Perspektive des Benutzers und h?ren Sie auf Feedback. Spirale nach oben, iterieren Sie weiter und produzieren Sie qualitativ hochwertige Produkte Um ein Produkt herzustellen, müssen Sie nicht nur Code schreiben, sondern ihn auch bewerben! ! Auch der Duft von Wein hat Angst vor der tiefen Gasse! ! Die Teilnahme an Open Source ist nicht einfach. Ich hoffe, Sie sch?tzen es. Abschlie?end vielen Dank an alle Open-Source-Teilnehmer. Es gibt noch viel Code, der darauf wartet, dass jemand schreibt. 『Erkl?rung der Open-Source-Projektreihe』 ——Lassen Sie Menschen, die sich für Open-Source-Projekte interessieren, keine Angst mehr haben und lassen Sie die Initiatoren von Open-Source-Projekten nicht l?nger allein sein. Folgen Sie unseren Artikeln und entdecken Sie die Freude am Programmieren, an der Nutzung und entdecken Sie, wie einfach es ist, an Open-Source-Projekten teilzunehmen. Hinterlassen Sie gerne eine Nachricht, kontaktieren Sie uns und schlie?en Sie sich uns an, damit sich mehr Menschen in Open Source verlieben und dazu beitragen k?nnen

Das obige ist der detaillierte Inhalt vonKniffliger Editor für ?ffentliche WeChat-Konten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!