Markeerstiftlijst om de broncode in WordPress te plakken / weergeven

2018 年 11 月 24 日

Bij het schrijven van een programmeerartikel en het introduceren van de broncode, wil ik Highlighter, een functie die de code op een gemakkelijk leesbare manier kan weergeven.In feite is het zo ver ontwikkeld dat het moeilijk is om te beslissen welke je wilt gebruiken.In dit artikel introduceren we de tools voor het markeren van de broncode in WordPress en hun functies afzonderlijk voor bibliotheektype, plug-in-type en webservice.

Bibliotheek type

Markeerstift van het type om het verkregen bibliotheekbestand te uploaden naar de onderliggende themamap en het te gebruiken.Het is lichter dan een plug-in, maar het kost wat tijd om te installeren.

Highlight.js

Een JavaScript-bibliotheek met de naam Highlight.js. Het ondersteunt 189 programmeertalen en heeft 89 weergavestijlen (vanaf november 2018).De functie is zo simpel als het markeren van de code.Heel licht.Populair.

https://highlightjs.org/

Prism.js

Dit is ook een lichtgewicht JavaScript-bibliotheek.Het ondersteunt 153 talen en 8 weergavestijlen (vanaf november 2018).Als extensie kunt u eenvoudig regelnummers toevoegen, gespecificeerde regels markeren, taalweergave, installatie van kopieerknoppen, enz.Dit is ook populair.

https://prismjs.com/

Google code-mooier

Zoals de naam al aangeeft, een JavaScript-bibliotheek ontwikkeld door Google. Het ondersteunt belangrijke programmeertalen zoals C, Python, HTML, CSS, JavaScript, Makefile, maar kleinere talen moeten worden ondersteund door extensies.Er zijn 5 weergavestijlen (vanaf november 2018).Naast de methode om te uploaden naar een WordPress-map zoals de bovenstaande twee typen en deze te gebruiken, is er een methode om deze eenvoudig te installeren met behulp van een autoloader.Er is weinig Japanse informatie omdat er niet veel gebruikers zijn.

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

Insteek type

Een type dat wordt gedistribueerd als een gratis WordPress-plug-in.Het is heel gemakkelijk te implementeren en te beheren, maar het kan uw site een beetje zwaarder maken dan andere typen.In het bibliotheektype kunt u ervoor kiezen om alleen de vereiste taal te ondersteunen, maar in de plug-inversie is het een afbeelding met alle talen en alle functies.

WP Code Highlight.js

Het is een plug-inversie van Highlight.js die is geïntroduceerd in het bibliotheektype. Compatibel met SyntaxHighlighter, Prettify en CrayonSyntaxHighlighter, zodat u ook van andere markeerstiften kunt migreren.

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

Prism Syntax Markeerstift

Een plugin-versie van Prism.js.

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

Code Prettify

Dezelfde.

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

Crayon Syntax Markeerstift

De indruk dat er veel gebruikers zijn en dat er veel informatie is over het openen in het Japans.Zelfs beginners kunnen gemakkelijk de lettergrootte en het ontwerp wijzigen, regelnummers toevoegen, markeringen enz., En het is zeer aanpasbaar.Er zijn veel beoordelingen dat het zwaar is, en het is zorgwekkend dat de laatste update sinds 2015 is gestopt.

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

Mivhak Syntax Markeerstift

Het ondersteunt meer dan 130 programmeertalen en heeft 36 thema's.Het lijkt erop dat taalscripts en thema's op aanvraag worden geladen vanuit de lichtgewicht CSS en JS, maar het lijkt net zo zwaar als Crayon Syntax Highlighter.U kunt de lettergrootte alleen voor het codegedeelte specificeren.

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

 

Ik heb de effecten van elke plug-in op de weergavesnelheid van de site vergeleken, dus raadpleeg dit ook.

Vergelijking van de weergavesnelheid van de site van Syntax Highlighter-plug-ins

 

 

Type webservice

Het is een type markeerstift dat kan worden gemarkeerd door de broncode om te zetten in een tag voor insluiting op het web en de tag in een Wordpress-teksteditor te plakken.

Gist (GitHub-service)

Gist is een dienst voor het delen van codes op GitHub. Wanneer u de code uploadt naar Gist, wordt de tag voor weergave uitgevoerd. Het is noodzakelijk om je te registreren bij GitHub, maar het voordeel is daarentegen dat je de code aan de GitHub-kant kunt bewerken en beheren (bewerken met een teksteditor,OfHet is ingewikkeld om te knoeien met tags zoals).

https://gist.github.com/discover

srctohtml

U kunt de code eenvoudig naar HTML-tags converteren om ze zonder registratie in te sluiten.Ondersteunde talen zijn JavaScript, C ++, PHP en iets minder.

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

Welke te kiezen

Er wordt ook gezegd dat welke tool je moet gebruiken, afhangt van wat je wilt benadrukken.Ik heb de oriëntaties van elk kort samengevat, dus verwijs ernaar.Het is ook belangrijk of u op het moment van markeren om het ontwerp geeft.

Bibliotheek type De nadruk wordt gelegd op de lichtheid van de bediening en de weergavesnelheid
Insteek type Nadruk op gemakkelijke introductie
(Sommige plug-ins worden niet zo zwaar)
Type webservice GitHub geregistreerd (Gist), die gefascineerd is door de codebeheerfunctie
Mensen die weinig mogelijkheden hebben om in te sluiten (srctohtml)

Ik gebruik trouwens de plug-in Mivhak Syntax Highlighter.Het is goed dat u de lettergrootte alleen voor het codegedeelte kunt specificeren en dat u verschillende knopinstellingen kunt bedienen op een eenvoudig instellingenscherm.Het vertraagt ​​op mobiele apparaten, maar de persoon die naar de code verwijst, komt waarschijnlijk van de pc, en ik denk dat dat het probleem is.