Textmarker-Liste zum Einfügen / Anzeigen von Quellcode in WordPress

2018/11/24

Wenn ich einen Programmierartikel schreibe und den Quellcode einführe, möchte ich Highlighter, eine Funktion, mit der der Code leicht lesbar angezeigt werden kann.Tatsächlich wurde es so weit entwickelt, dass es schwer zu entscheiden ist, welches verwendet werden soll.In diesem Artikel werden die Tools zum Hervorheben des Quellcodes in WordPress und ihre Funktionen getrennt nach Bibliothekstyp, Plugin-Typ und Webdienst vorgestellt.

Bibliothekstyp

Textmarker des Typs, mit dem die erworbene Bibliotheksdatei in den untergeordneten Themenordner hochgeladen und verwendet wird.Es ist leichter als ein Plugin, aber die Installation dauert etwas.

Highlight.js

Eine JavaScript-Bibliothek namens Highlight.js. Es unterstützt 189 Programmiersprachen und verfügt über 89 Anzeigestile (Stand November 2018).Die Funktion ist so einfach wie das Hervorheben des Codes.Sehr leicht.Beliebt.

https://highlightjs.org/

Prism.js

Dies ist auch eine leichte JavaScript-Bibliothek.Es unterstützt 153 Sprachen und 8 Anzeigestile (Stand November 2018).Als Erweiterung können Sie problemlos Zeilennummern hinzufügen, bestimmte Zeilen hervorheben, die Sprache anzeigen, die Installation der Kopiertasten usw.Dies ist auch beliebt.

https://prismjs.com/

Google Code-verschönern

Wie der Name schon sagt, eine von Google entwickelte JavaScript-Bibliothek. Es unterstützt wichtige Programmiersprachen wie C, Python, HTML, CSS, JavaScript und Makefile. Nebensprachen müssen jedoch durch Erweiterungen unterstützt werden.Es gibt 5 Anzeigestile (Stand November 2018).Zusätzlich zu der Methode zum Hochladen in einen WordPress-Ordner wie den beiden oben genannten Typen und seiner Verwendung gibt es eine Methode zum einfachen Installieren mit einem Autoloader.Es gibt nur wenige japanische Informationen, da es nicht viele Benutzer gibt.

https://github.com/google/code-prettify

Plug-In-Typ

Ein Typ, der als kostenloses WordPress-Plugin vertrieben wird.Es ist sehr einfach bereitzustellen und zu verwalten, aber es kann Ihre Site etwas schwerer machen als andere Typen.Im Bibliothekstyp können Sie auswählen, dass nur die erforderliche Sprache unterstützt wird. In der Plug-In-Version handelt es sich jedoch um ein Bild mit allen Sprachen und allen Funktionen.

WP-Code Highlight.js

Es ist eine Plug-In-Version von Highlight.js, die im Bibliothekstyp eingeführt wurde. Kompatibel mit SyntaxHighlighter, Prettify und CrayonSyntaxHighlighter, sodass Sie auch von anderen Textmarkern migrieren können.

https://ja.wordpress.org/plugins/wp-code-highlightjs/

Prisma-Syntax-Textmarker

Eine Plugin-Version von Prism.js.

https://ja.wordpress.org/plugins/ank-prism-for-wp/

Code verschönern

Gleich.

https://ja.wordpress.org/plugins/code-prettify/

Crayon Syntax Textmarker

Eindruck, dass es viele Benutzer und reichlich Informationen zum Öffnen auf Japanisch gibt.Selbst Anfänger können die Schriftgröße und das Design leicht ändern, Zeilennummern hinzufügen, hervorheben usw. und es ist sehr anpassbar.Es gibt viele Bewertungen, dass es schwer ist, und es ist besorgniserregend, dass das letzte Update seit 2015 eingestellt wurde.

https://ja.wordpress.org/plugins/crayon-syntax-highlighter/

Mivhak Syntax Textmarker

Es unterstützt mehr als 130 Programmiersprachen und hat 36 Themen.Es scheint, dass Sprachskripte und -themen bei Bedarf aus dem leichtgewichtigen CSS und JS geladen werden, aber es scheint so schwer zu sein wie Crayon Syntax Highlighter.Sie können die Schriftgröße nur für den Codeteil angeben.

https://ja.wordpress.org/plugins/mivhak/

 

Ich habe die Auswirkungen der einzelnen Plugins auf die Anzeigegeschwindigkeit der Website verglichen. Beachten Sie daher auch dies.

Vergleich der Geschwindigkeit der Site-Anzeige von Syntax Highlighter-Plugins

 

 

Webdiensttyp

Es handelt sich um eine Art Textmarker, der hervorgehoben werden kann, indem der Quellcode in ein Einbettungs-Tag im Web konvertiert und das Tag in einen Wordpress-Texteditor eingefügt wird.

Kern (GitHub-Service)

Gist ist ein Code-Sharing-Dienst auf GitHub. Wenn Sie den Code in Gist hochladen, wird das Tag für die Anzeige ausgegeben. Es ist notwendig, sich bei GitHub zu registrieren, im Gegenteil, der Vorteil ist, dass Sie den Code auf der GitHub-Seite bearbeiten und verwalten können (Bearbeiten mit einem Texteditor,OderEs ist kompliziert, mit Tags wie) herumzuspielen.

https://gist.github.com/discover

srctohtml

Sie können den Code zum Einbetten ohne Registrierung einfach in HTML-Tags konvertieren.Unterstützte Sprachen sind JavaScript, C ++, PHP und etwas weniger.

http://marginalsoft.com/tools/srctohtml/

Welches zu wählen

Es wird auch gesagt, dass das zu verwendende Tool davon abhängt, was Sie hervorheben möchten.Ich habe die Ausrichtungen der einzelnen kurz zusammengefasst. Bitte beziehen Sie sich auf sie.Es ist auch wichtig, ob Sie sich zum Zeitpunkt der Hervorhebung für das Design interessieren.

Bibliothekstyp Der Schwerpunkt liegt auf der Leichtigkeit der Bedienung und der Anzeigegeschwindigkeit
Plug-In-Typ Schwerpunkt auf einfache Einführung
(Einige Plugins werden nicht so schwer)
Webdiensttyp GitHub registriert (Gist), der von der Code-Management-Funktion fasziniert ist
Menschen, die nur wenige Möglichkeiten zum Einbetten haben (srctohtml)

Ich benutze übrigens das Mivhak Syntax Highlighter Plugin.Es ist gut, dass Sie die Schriftgröße nur für den Codeteil angeben und verschiedene Tasteneinstellungen auf einem einfachen Einstellungsbildschirm vornehmen können.Auf Mobilgeräten wird es langsamer, aber die Person, die auf den Code verweist, stammt wahrscheinlich vom PC, und ich denke, das ist das Problem.