Share
Syntaxutheving er blitt ganske vanlig på de fleste opplæringssider (som du kan se nedenfor), og det er mange alternativer tilgjengelig, alt avhengig av hvilke språk du bruker og hvordan du vil at kodestykket skal vises.
I lengst tid har jeg brukt Googles Prettify siden det var lett å sette opp. Det eneste virkelige problemet jeg hadde var at det ikke fanger alle de aktuelle elementene i koden min og fremhever dem tilsvarende. Jeg prøvde å jobbe med det, men det var ikke den enkleste koden å navigere.
Heldigvis snublet jeg nylig på en ny lett syntaxlampe av Lea Verou, kalt Prism.js, som gir muligheten til å utvide på grunnlaget HTML og CSS markup highlighting med noen enkle plugin kroker.
Jeg tok hennes kjerne-JavaScript-kode og la muligheten til å inkludere linje nummerering og PHP-utheving. Jeg endret også noen få av hennes base regex mønstre for å gjøre hennes opprinnelige høydepunktskode fange noen flere elementer for hvert språk.
Alt vi trenger å gjøre er å legge til en shortcode-funksjon i WordPress, slik at vi enkelt kan inkludere syntaksutheving til våre kodestykker ved hjelp av mitt modifiserte Prism.js-skript. Den enkleste måten å innlemme alt på er å gjøre alt til et plugin. Vår ferdige plugin-mappe vil se slik ut:
Så la oss starte pluginet med de nødvendige feltene:
/ * Plugin Name: Syntax Highlighter Plugin URI: http://wp.tutsplus.com/tutorials/plugins/adding-a-syntax-highlighter-shortcode-using-prism-js Beskrivelse: Fremhev kodene dine med en enkel å bruke shortcode basert på Lea Verous Prism.js. Versjon: 1.0.0 Forfatter: c.bavota Forfatter URI: http://bavotasan.com * /
Den neste tingen vi vil legge til er vår faktiske kortnummerkrok og en pre-prosessering for å sikre at den brenner til rett tid:
Accentsconagua
add_filter ('the_content', 'sh_pre_process_shortcode', 7); / ** * Funksjonalitet for å sette opp highlighter-kortkode korrekt. * * Denne funksjonen er festet til filterkroken 'the_content'. * * @since 1.0.0 * / funksjon sh_pre_process_shortcode ($ content) global $ shortcode_tags; $ orig_shortcode_tags = $ shortcode_tags; $ shortcode_tags = array (); // Nye kortkoder add_shortcode ('kode', 'sh_syntax_highlighter'); $ content = do_shortcode ($ content); $ shortcode_tags = $ orig_shortcode_tags; returnere $ content; / ** * Kode shortcode-funksjon * * Denne funksjonen er knyttet til koden "shortcode hook". * * @since 1.0.0 * / funksjon sh_syntax_highlighter ($ atts, $ content = null) ekstrakt (shortcode_atts (array ('type' => 'markup', 'title' => ", 'linums' =>" ), $ atts)); $ title = ($ title)? 'rel =' '. $ title.' "':"; $ linenums = ($ linenums)?' data-linjene = "'. $ linenums. '' ': "; $ find_array = array ('[', ']'); $ replace_array = array ('[', ']'); komme tilbake ' '. preg_replace_callback ('| (. *) | isU', 'sh_pre_entities', trim (str_replace ($ find_array, $ replace_array, $ innhold))). ''; / ** * Hjelperfunksjon for 'sh_syntax_highlighter' * * @since 1.0.0 * / funksjon sh_pre_entities ($ matches) retur str_replace ($ matcher [1], htmlentities ($ matches [1]), $ matches [0] );
De sh_pre_process_shortcode () funksjonen er nødvendig, slik at vår kortkode syntaks blir behandlet før alle innholdsfiltrene begynner å rydde opp teksten som standard i WordPress. Hjelperfunksjonen vil filtrere vår kode og erstatte HTML-enheter med deres passende entitetsverdi.
For at pluginet vårt skal fungere skikkelig, må vi også legge til noen få funksjoner for å laste opp CSS og JS-filene.
add_action ('wp_enqueue_scripts', 'sh_add_js'); / ** * Last all JavaScript til header * * Denne funksjonen er knyttet til handlings kroken 'wp_enqueue_scripts'. * * @uses is_admin () * @uses is_singular () * @uses wp_enqueue_script () * @uses plugins_url () * * @since 1.0.0 * / funksjon sh_add_js () hvis (sh_has_shortcode ('kode')) wp_enqueue_script ('sh_js', plugins_url ('js / sh.js', __FILE__), ',' true); wp_enqueue_style ('sh_css', plugins_url ('css / sh.css', __FILE__)); / ** * Kontroller innlegg for å se om kortnummer er brukt * * @since 1.0.0 * / funksjon sh_has_shortcode ($ shortcode = ") global $ wp_query; foreach ($ wp_query-> innlegg som $ post) if (! tom ($ shortcode) && stripos ($ post-> post_content, '['. $ shortcode)! == false) return true; return false; Vi må skape vårt skript og stiler, men bare hvis kortnummeret har blitt brukt i vårt innleggsinnhold. Derfor hvorfor vi trenger den lille betingede funksjonen for å sjekke at kortnummeret er til stede.
Å legge til en quicktag for vår kortkode er ikke veldig vanskelig, så vi kan like godt gjøre det:
add_action ('admin_enqueue_scripts', 'sh_add_quicktags'); / ** * Legger til en syntax høyttaler quicktag til innleggsreditoren * * Denne funksjonen er knyttet til handlingskroken 'admin_print_footer_scripts'. * * @since 1.0.0 * / funksjon sh_add_quicktags ($ hook) if ('post.php' == $ hook || 'post-new.php' == $ krok) wp_enqueue_script ('sh_quicktag_js', plugins_url (' js / quicktag.js ', __FILE__), array (' quicktags '),' true '; Dette er alt vi trenger i vår quicktag.js fil:
QTags.SyntaxButton = funksjon () QTags.TagButton.call (dette, 'syntax_highlighter', 'syntax høylighter', ',' [/ code] ';;; QTags.SyntaxButton.prototype = ny QTags.TagButton (); QTags.SyntaxButton.prototype.callback = funksjon (e, c, ed) var type, linjaler, tittel, t = dette; hvis (t.isOpen (ed) === falsk) type = prompt ('Type , php, css, javascript) ',' markup '), title = prompt (' Tittel (valgfritt) '), linjer = prompt (' Linjenummer (valgfritt) '); type = + type + '"':"; title = (title)? 'title =' '+ title +' "':"; linnen = (linne)?' linjer = '' + linjer + '"':"; hvis (type) t.tagStart = '[kode' + type + tittel + linums + ']'; QTags.TagButton.prototype.callback.call (t, e, c, ed); ellers QTags.TagButton.prototype.callback.call (t, e, c, ed); ; edButtons [150] = ny QTags.SyntaxButton (); For min syntaxutheving foretrekker jeg et mørkt tema, så jeg opprettet høydepunktene mine ved hjelp av følgende CSS:
kode [class * = "language-"], pre [class * = "language-"] color: #fff; tekstskygge: 0 1px 1px # 000; font-familie: Menlo, Monaco, "Courier New", monospace; retning: ltr; tekstjustering: venstre; ordavstand: normal; hvitrom: pre; ord-wrap: normal; linjehøyde: 1,4; bakgrunn: ingen; grense: 0; -moz-tab-størrelse: 4; -o-tab-størrelse: 4; tab-størrelse: 4; -webkit-bindestreker: ingen; -moz-bindestrek: ingen; -ms-bindestrek: ingen; bindestreker: ingen; pre [class * = "language-"] kode float: left; polstring: 0 15px 0 0; pre [class * = "language-"],: ikke (pre)> kode [klasse * = "språk-"] bakgrunn: # 222; .syntax-highlighter [rel] posisjon: relative; .syntax-highlighter [rel] pre [class * = "language-"] padding-top: 44px; .syntax-highlighter [rel]: før innhold: attr (rel); tekst-align: center; tekstskygge: 1px 1px 2px rgba (0,0,0,0,6); posisjon: absolutt; topp: -1px; bakgrunn: # 3A87AD; polstring: 5px 10px; venstre: 0; høyre: 0; skrifttype: fet 16px / 20px "myriad-pro-1", "myriad-pro-2", "Lucida Grande", Sans-Serif; farge: #fff; -moz-grense-radius: 7px 7px 0 0; -webkit-grense-radius: 7px 7px 0 0; border-radius: 7px 7px 0 0; / * Kodeblokker * / pre [class * = "language-"] polstring: 15px; margin: 1em 0; overløp: auto; -moz-grense-radius: 8px; -webkit-grense-radius: 8px; border-radius: 8px; / * Inline kode * /: ikke (pre)> kode [klasse * = "språk-"] polstring: 5px 10px; linjehøyde: 1; -moz-grense-radius: 3px; -webkit-grense-radius: 3px; border-radius: 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-verdi, .token.hex, .token.string color: # B0C975; .token.property, .token.entity, .token.url, .token.attr-navn, .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 [data-linje] posisjon: relativ; polstring: 1em 0 1em 3em; .line-highlight posisjon: absolutt; venstre: 0; høyre: 0; polstring: arve 0; margin-topp: 1em; / * Samme som. Prismen er polstringstopp * / bakgrunn: rgba (255,255,255, .2); peker-hendelser: ingen; linjehøyde: arv; hvitrom: pre; .line-highlight: før, .line-highlight [data-end]: etter innhold: attr (data-start); posisjon: absolutt; topp: .3em; igjen: .6em; min bredde: 1em; polstring: 0 .5em; bakgrunnsfarge: rgba (255,255,255, .3); farge: #fff; skrift: fet 65% / 1,5 sans-serif; tekst-align: center; -moz-grense-radius: 8px; -webkit-grense-radius: 8px; border-radius: 8px; tekstskygge: ingen; .line-highlight [data-end]: etter innhold: attr (data-end); topp: auto; bunn: .4em; / * for linjenumre * / ol.linenums margin: 0; polstring: 0 0 0 35px; .linenummer li polstring-venstre: 10px; border-left: 3px # d9d336 solid;
Kodekortkoden for vår syntaxlampe har tre attributter: type, tittel og lommebøker.
type: Det er fire språktyper som fungerer sammen med våre høyttaler: markup, css, php og javascript
tittel: Du kan inkludere en tittel som vil vises over syntaxboksen (valgfritt)
linenums: legg til linjenumre til koden din, starter med hvilket nummer du har valgt (valgfritt)
Den eneste nødvendige attributtet er "type", selv om det vil være standard til "markup".
Hvis du legger sammen et plugin for å gi deg muligheten til å bruke en synkroniseringslampe-kortkode, har du noen få skritt, men heldigvis kan du alltid laste ned pluginet og installere det uten å virkelig vite hvordan det ble satt sammen. Selv om noe av det morsomme ved å bruke WordPress, er det å forstå hvordan alt fungerer slik at du kan tilpasse ting for å virkelig få det til å fungere for deg. På den måten, hvis du ikke er en fan av mitt mørke tema, kan du enkelt leke med CSS for å endre stilene på syntaxen din slik at den passer til designen din.
.
