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?
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: 🎜
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代码高亮神器，帮助解决代码主题单一的问题。
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}复制代码
Nach dem Login kopieren
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.MS
kostenlos
langfristig
hoch
Alibaba Cloud
Referenz
Angepasst
Niedrig
Qiniu Cloud
10G kostenlos
Angepasst
Niedrig
这场图床的战役中，最大的难度在于需要阅读阿里云 OSS 和七牛云 KODO 的文档，并且使用其开源出来的工具包 ali-oss 和 qiniu-js 。
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!
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
