Share
Syntaxisaccentuering is vrij standaard geworden op de meeste zelfstudiesites (zoals u hieronder kunt zien) en er zijn veel opties beschikbaar, allemaal afhankelijk van welke talen u gebruikt en hoe u wilt dat uw codefragmenten worden weergegeven.
Voor de langste tijd heb ik Google's Prettify gebruikt omdat het eenvoudig was in te stellen. Het enige echte probleem dat ik had was dat het niet alle relevante elementen in mijn code vastlegde en ze dienovereenkomstig markeerde. Ik probeerde het opnieuw te bewerken, maar het was niet de gemakkelijkste code om te navigeren.
Gelukkig kwam ik onlangs een nieuwe lichtgewicht syntax-markeerstift van Lea Verou tegen, genaamd Prism.js, die de mogelijkheid biedt om de basismarkering voor HTML en CSS-markeringen uit te breiden met enkele eenvoudige plug-in hooks.
Ik nam haar JavaScript-kerncode en voegde de optie toe om regelnummering en PHP-markering toe te voegen. Ik heb ook een paar van haar basisregex-patronen aangepast om ervoor te zorgen dat haar originele highlight-code nog een paar elementen voor elke taal vastlegde.
Het enige wat we moeten doen is een shortcode-functie toevoegen in WordPress, zodat we gemakkelijk syntax-highlighting aan onze codefragmenten kunnen toevoegen met behulp van mijn gemodificeerde Prism.js-script. De gemakkelijkste manier om alles op te nemen, is alles in een plug-in te veranderen. Onze voltooide plugin-map ziet er als volgt uit:
Laten we onze plug-in met de vereiste velden beginnen:
/ * Plugin Name: Syntax Highlighter plug-in URI: http://wp.tutsplus.com/tutorials/plugins/adding-a-syntax-highlighter-shortcode-using-prisms-js Beschrijving: Markeer uw codefragmenten met een eenvoudig te gebruiken shortcode op basis van Lea Verou's Prism.js. Versie: 1.0.0 Auteur: c.bavota Auteur URI: http://bavotasan.com * /
Het volgende dat we willen toevoegen, is onze daadwerkelijke shortcodehaak en een pre-procesfix om ervoor te zorgen dat deze op het juiste moment wordt geactiveerd:
Accentsconagua
add_filter ('the_content', 'sh_pre_process_shortcode', 7); / ** * Functionaliteit om de shortcode van de markeerstift correct in te stellen. * * Deze functie is gekoppeld aan de filterhaak 'the_content'. * * @since 1.0.0 * / function sh_pre_process_shortcode ($ content) global $ shortcode_tags; $ orig_shortcode_tags = $ shortcode_tags; $ shortcode_tags = array (); // Nieuwe shortcodes add_shortcode ('code', 'sh_syntax_highlighter'); $ content = do_shortcode ($ content); $ shortcode_tags = $ orig_shortcode_tags; return $ inhoud; / ** * Code shortcode-functie * * Deze functie is gekoppeld aan de shortcode-haak 'code'. * * @since 1.0.0 * / function sh_syntax_highlighter ($ atts, $ content = null) extract (shortcode_atts (array ('type' => 'markup', 'title' => ", 'linenums' =>", ), $ atts)); $ title = ($ title)? 'rel = "'. $ title. '"': "; $ linenums = ($ linenums)? data-linenums =" '. $ linnengoed. '"':"; $ find_array = array ('[', ']'); $ replace_array = array ('[', ']'); terug ' '. preg_replace_callback ('| (. *) | isU', 'sh_pre_entities', trim (str_replace ($ find_array, $ replace_array, $ content))). ''; / ** * Helper-functie voor 'sh_syntax_highlighter' * * @since 1.0.0 * / function sh_pre_entities ($ matches) return str_replace ($ matches [1], htmlentities ($ matches [1]), $ matches [0] );
De sh_pre_process_shortcode () functie is vereist, zodat onze shortcode-syntaxis wordt verwerkt voordat alle inhoudfilters standaard beginnen met het opruimen van de tekst in WordPress. De helperfunctie filtert onze code en vervangt HTML-entiteiten door hun bijbehorende entiteitswaarde.
Om ervoor te zorgen dat onze plug-in correct werkt, moeten we echter nog een paar extra functies toevoegen om de CSS- en JS-bestanden te laden.
add_action ('wp_enqueue_scripts', 'sh_add_js'); / ** * Alle JavaScript-koptekst laden * * Deze functie is gekoppeld aan de actiehaak 'wp_enqueue_scripts'. * * @uses is_admin () * @uses is_singular () * @uses wp_enqueue_script () * @uses plugins_url () * * @since 1.0.0 * / function sh_add_js () if (sh_has_shortcode ('code')) wp_enqueue_script ('sh_js', plugins_url ('js / sh.js', __FILE__), ",", true); wp_enqueue_style ('sh_css', plugins_url ('css / sh.css', __FILE__)); / ** * Berichten controleren om te zien of shortcode is gebruikt * * @since 1.0.0 * / function sh_has_shortcode ($ shortcode = ") global $ wp_query; foreach ($ wp_query-> berichten als $ bericht) if (! empty ($ shortcode) && stripos ($ post-> post_content, '['. $ shortcode)! == false) return true; return false; We moeten ons script en onze stijlen in wachtrij plaatsen, maar alleen als de shortcode is gebruikt in onze berichtinhoud. Daarom hebben we die kleine voorwaardelijke functie nodig om te controleren of de shortcode aanwezig is.
Het toevoegen van een quicktag voor onze shortcode is niet erg moeilijk, dus we kunnen het net zo goed doen:
add_action ('admin_enqueue_scripts', 'sh_add_quicktags'); / ** * Voegt een syntaxis-markeerstift-sneltag toe aan de berichteditor * * Deze functie is gekoppeld aan de actiehaak 'admin_print_footer_scripts'. * * @since 1.0.0 * / function sh_add_quicktags ($ hook) if ('post.php' == $ hook || 'post-new.php' == $ hook) wp_enqueue_script ('sh_quicktag_js', plugins_url (' js / quicktag.js ', __FILE__), array (' quicktags '), ", true); Dit is alles wat we nodig hebben in onze quicktag.js het dossier:
QTags.SyntaxButton = function () QTags.TagButton.call (this, 'syntax_highlighter', 'syntax highlighter', ", '[/ code]');; QTags.SyntaxButton.prototype = new QTags.TagButton (); QTags.SyntaxButton.prototype.callback = functie (e, c, ed) var type, linenums, title, t = this; if (t.isOpen (ed) === false) type = prompt ('Type (markup , php, css, javascript) ',' markup '), title = prompt (' Titel (optioneel) '), linenums = prompt (' Regelnummer (optioneel) '); type = (type)?' type = "' + type + '"':"; title = (titel)? 'title = "' + title + '"': "; linenums = (linenums)? 'linenums ="' + linenums + '"':"; if (type) t.tagStart = '[code' + type + titel + linnengoed + ']'; QTags.TagButton.prototype.callback.call (t, e, c, ed); else QTags.TagButton.prototype.callback.call (t, e, c, ed); ; edToetsen [150] = nieuwe QTags.SyntaxButton (); Voor mijn syntaxisaccentuering, geef ik de voorkeur aan een donker thema, dus ik heb mijn hoogtepunten gemaakt met behulp van de volgende CSS:
code [class * = "taal-"], pre [class * = "taal-"] color: #fff; tekstschaduw: 0 1px 1px # 000; font-family: Menlo, Monaco, "Courier New", monospace; richting: ltr; text-align: left; woordspatiëring: normaal; white-space: pre; word-wrap: normaal; regelhoogte: 1,4; achtergrond: geen; rand: 0; -moz-tab-size: 4; -o-tab-formaat: 4; tab-formaat: 4; -webkit-koppeltekens: geen; -moz-koppeltekens: geen; -ms-koppeltekens: geen; koppeltekens: geen; pre [class * = "language-"] code float: left; opvulling: 0 15px 0 0; pre [class * = "language-"],: not (pre)> code [class * = "taal-"] background: # 222; .syntax-highlighter [rel] position: relative; .syntax-highlighter [rel] pre [class * = "language-"] padding-top: 44px; .syntax-highlighter [rel]: vóór content: attr (rel); text-align: center; text-shadow: 1px 1px 2px rgba (0,0,0,0.6); positie: absoluut; top: -1px; achtergrond: # 3A87AD; opvulling: 5px 10px; links: 0; rechts: 0; lettertype: vet 16px / 20px "myriad-pro-1", "myriad-pro-2", "Lucida Grande", Sans-Serif; kleur: #fff; -moz-border-radius: 7px 7px 0 0; -webkit-border-radius: 7px 7px 0 0; grensradius: 7px 7px 0 0; / * Codeblokken * / pre [class * = "language-"] padding: 15px; marge: 1em 0; overloop: automatisch; -moz-border-radius: 8px; -webkit-border-radius: 8px; grensradius: 8px; / * Inline-code * /: not (pre)> code [class * = "language-"] opvulling: 5px 10px; regelhoogte: 1; -moz-border-radius: 3px; -webkit-border-radius: 3px; grensradius: 3px; .token.comment, .token.line-comment, .token.prolog, .token.doctype, .token.cdata color: # 797979; .token.selector, .token.operator, .token.punctuation color: #fff; .namespace opacity: .7; .token.tag, .token.boolean color: # ffd893; .token.atrule, .token.attr-value, .token.hex, .token.string color: # B0C975; .token.property, .token.entity, .token.url, .token.attr-name, .token.keyword color: # c27628; .token.regex color: # 9B71C6; .token.entity cursor: help; .token.function, .token.constant color: # e5a638; .token.variable color: # fdfba8; .token.number color: # 8799B0; .token.important, .token.deliminator color: # E45734; pre [datalijn] positie: relatief; opvulling: 1em 0 1em 3em; .line-highlight positie: absoluut; links: 0; rechts: 0; opvulling: erven 0; margin-top: 1em; / * Hetzelfde als .prism's padding-top * / background: rgba (255,255,255, .2); pointer-events: geen; regelhoogte: overnemen; white-space: pre; .line-highlight: before, .line-highlight [data-end]: after content: attr (data-start); positie: absoluut; top: .3em; links: .6em; min-breedte: 1em; opvulling: 0 .5em; achtergrondkleur: rgba (255,255,255, .3); kleur: #fff; lettertype: vet 65% / 1.5 schreefloos; text-align: center; -moz-border-radius: 8px; -webkit-border-radius: 8px; grensradius: 8px; text-shadow: none; .line-highlight [data-end]: na content: attr (data-end); top: auto; onderaan: .4em; / * voor regelnummers * / ol.linenums margin: 0; opvulling: 0 0 0 35px; .linenums li padding-left: 10px; border-left: 3px # d9d336 solid;
De code shortcode voor onze syntaxis-markeerstift heeft drie kenmerken: type, titel en linnengoed.
type: er zijn vier taaltypen die werken met onze markeerstift: markup, css, php en javascript
titel: u kunt een titel opnemen die boven de syntaxismarkeerstiftdoos verschijnt (optioneel)
linenums: voeg regelnummers toe aan uw code, beginnend bij welk nummer u ook instelt (optioneel)
Het enige vereiste kenmerk is "type", hoewel het standaard wordt ingesteld op "markup".
Een plug-in samenstellen om je de mogelijkheid te geven om een syntax highlighter shortcode te gebruiken, heeft een paar stappen, maar gelukkig kun je de plug-in gewoon downloaden en installeren zonder echt te weten hoe deze is samengesteld. Hoewel het leuk is om WordPress te gebruiken, is het begrijpen hoe alles werkt, zodat je dingen kunt aanpassen om het echt voor je te laten werken. Op die manier, als je geen fan bent van mijn donkere thema, kun je eenvoudig met de CSS spelen om de stijlen van je syntax-markeerstift te wijzigen zodat deze overeenkomt met je ontwerp.
.
