Syntax Highlighting
Um Code in einer WordPress-Publikation durch farbliche Hervorhebung der Codeelemente zu formatieren, kann man ein Plugin bemühen, etwa
- Code Syntax Block von Marcus Kzmierczak
https://wordpress.org/plugins/code-syntax-block/ - Hier findet man noch viele weitere solcher PlugIns: https://wordpress.org/plugins/tags/syntax-highlighting/
Aber genaugenommen braucht man das gar nicht. Die Einfügung eines dreizeiligen HTML-Blocks auf einer Seite – egal, ob HTML oder WordPress – genügt, um auf der Seite Code formatieren zu können. Diese Einfügung auf der Seite hat den Vorteil, dass alle anderen Seiten, die kein solches Highlighting benötigen, auch nicht belastet werden.
Highlighting mit PrismJs https://prismjs.com/
Der folgende HTML-Code ist formatiert darzustellen:
<!DOCTYPE html>
<html>
<body>
<p>Hello World</p>
</body>
</html>Das Syntax-Highlighting benötigt eine JavaScript- und eine CSS-Datei. Die benötigte .js- und .css-Datei kann sowohl von einem externen Server geladen, aber auch lokal gespeichert werden. Auf der vorliegenden Seite wird ein externer Server genutzt.
Man fügt am Beginn der Seite einen HTML-Block mit folgenden Zeilen ein:
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/prism.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>Die dritte Einfügung „autoloader“ wird benötigt, um seltenere Sprachen wie zum Beispiel PowerShell automatisch nachzuladen (siehe Beispiel „PowerShell“ weiter hinten). Ohne diese Zeile werden nur die Klassiker, HTML, XML, JavaScript und Markup unterstützt.
Achtung: Am Web clubcomputer.at sind diese Einfügungen bereits durch ein das Plugin „CodeSnippets“ eingefügt worden und stehen damit auf jeder Seite automatisch zur Verfügung.
Voraussetzungen
- Im zu formatierenden Code muss das Zeichen
<durch<und das Zeichen&durch$amp;ersetzt werden. - Der so modifiziert Code muss in einen Block
<pre><code>...</code></pre>eingefügt werden. - Im Code-Tag muss die Klasse
language-xxxxeingefügt werden, wobeixxxxein Kürzel für die verwendete Sprache ist
<pre><code class="language-html">Hier steht der Code</code></pre>Beispiel HTML-Seite
Damit die obige HTML-Seite richtig dargestellt wird, werden die erforderlichen Substiutionen ausgeführt und die Klasse language-html in das code-Tag eingefügt:
Das ergibt:
<!DOCTYPE html>
<html>
<body>
<p>Hello World</p>
</body>
</html>Beispiel PowerShell
Diese Formatierung erfordert das Einbinden des autoloaders.
# Bilder mit Wasserzeichen
##########################
Clear-Host
$Path = "S:\Documents\@NoOneDrive\kdf\bilder"
$Images = Get-ChildItem $Path -Attributes Archive -Recurse
$Imagetypes = ".jpg",".jpeg",".png",".bmp",".tif",".tiff"
$i = 0
foreach ($Image in $Images) {
$ImagePath = "'" + $Image.FullName + "'"
$Image_Exension = $Image.Extension
if ($Image_Exension -in $ImageTypes) {
$Expression = "composite -watermark 15% -gravity center fiala_cc.png $ImagePath $ImagePath"
Invoke-Expression $Expression
$i++
}
Write-Host $i
}Stil
Der Name der Stil-Datei definiert das Aussehen. Es stehen neben der Default-Variante (prism.css) die Stile coy, dark, funky, okaidia, solarizedlight, tomorrow und twilight zur Verfügung. Aur dieser Seite wurde die Stildatei prism-tomorrow.min.css (statt prism.min.css) eingebunden.
prism.css
Verfügbare Sprachen
| Language | Key | Class |
|---|---|---|
| ABAP | abap | language-abap |
| ActionScript | actionscript | language-actionscript |
| Ada | ada | language-ada |
| Apache Configuration | apacheconf | language-apacheconf |
| APL | apl | language-apl |
| AppleScript | applescript | language-applescript |
| Arduino | arduino | language-arduino |
| ARFF | arff | language-arff |
| AsciiDoc | asciidoc | language-asciidoc |
| 6502 Assembly | asm6502 | language-asm6502 |
| ASP.NET (C#) | aspnet | language-aspnet |
| AutoHotkey | autohotkey | language-autohotkey |
| AutoIt | autoit | language-autoit |
| Bash | bash | language-bash |
| BASIC | basic | language-basic |
| Batch | batch | language-batch |
| Bison | bison | language-bison |
| Brainfuck | brainfuck | language-brainfuck |
| Bro | bro | language-bro |
| C | c | language-c |
| C-like | clike | language-clike |
| C# | csharp | language-csharp |
| C++ | cpp | language-cpp |
| CoffeeScript | coffeescript | language-coffeescript |
| Clojure | clojure | language-clojure |
| Crystal | crystal | language-crystal |
| Content-Security-Policy | csp | language-csp |
| CSS | css | language-css |
| CSS Extras | css-extras | language-css-extras |
| D | d | language-d |
| Dart | dart | language-dart |
| Diff | diff | language-diff |
| Django/Jinja2 | django | language-django |
| Docker | docker | language-docker |
| Eiffel | eiffel | language-eiffel |
| Elixir | elixir | language-elixir |
| Elm | elm | language-elm |
| ERB | erb | language-erb |
| Erlang | erlang | language-erlang |
| F# | fsharp | language-fsharp |
| Flow | flow | language-flow |
| Fortran | fortran | language-fortran |
| GEDCOM | gedcom | language-gedcom |
| Gherkin | gherkin | language-gherkin |
| Git | git | language-git |
| GLSL | glsl | language-glsl |
| GameMaker Language | gml | language-gml |
| Go | go | language-go |
| GraphQL | graphql | language-graphql |
| Groovy | groovy | language-groovy |
| Haml | haml | language-haml |
| Handlebars | handlebars | language-handlebars |
| Haskell | haskell | language-haskell |
| Haxe | haxe | language-haxe |
| HTML | html | language-html |
| HTTP | http | language-http |
| HTTP Public-Key-Pins | hpkp | language-hpkp |
| HTTP Strict-Transport-Security | hsts | language-hsts |
| IchigoJam | ichigojam | language-ichigojam |
| Icon | icon | language-icon |
| Inform 7 | inform7 | language-inform7 |
| Ini | ini | language-ini |
| Io | io | language-io |
| J | j | language-j |
| Java | java | language-java |
| JavaScript | javascript | language-javascript |
| Jolie | jolie | language-jolie |
| JSON | json | language-json |
| Julia | julia | language-julia |
| Keyman | keyman | language-keyman |
| Kotlin | kotlin | language-kotlin |
| LaTeX | latex | language-latex |
| Less | less | language-less |
| Liquid | liquid | language-liquid |
| Lisp | lisp | language-lisp |
| LiveScript | livescript | language-livescript |
| LOLCODE | lolcode | language-lolcode |
| Lua | lua | language-lua |
| Makefile | makefile | language-makefile |
| Markdown | markdown | language-markdown |
| Markup | markup | langilanguage-markup |
| Markup templating | markup-templating | language-markup-templating |
| MathML | mathml | language-mathml |
| MATLAB | matlab | language-matlab |
| MEL | mel | language-mel |
| Mizar | mizar | language-mizar |
| Monkey | monkey | language-monkey |
| N4JS | n4js | language-n4js |
| NASM | nasm | language-nasm |
| nginx | nginx | language-nginx |
| Nim | nim | language-nim |
| Nix | nix | language-nix |
| NSIS | nsis | language-nsis |
| Objective-C | objectivec | language-objectivec |
| OCaml | ocaml | language-ocaml |
| OpenCL | opencl | language-opencl |
| Oz | oz | language-oz |
| PARI/GP | parigp | language-parigp |
| Parser | parser | language-parser |
| Pascal | pascal | language-pascal |
| Perl | perl | language-perl |
| PHP | php | language-php |
| PHP Extras | php-extras | language-php-extras |
| PL/SQL | plsql | language-plsql |
| PowerShell | powershell | language-powershell |
| Processing | processing | language-processing |
| Prolog | prolog | language-prolog |
| .properties | properties | language-properties |
| Protocol Buffers | protobuf | language-protobuf |
| Pug | pug | language-pug |
| Puppet | puppet | language-puppet |
| Pure | pure | language-pure |
| Python | python | language-python |
| Q (kdb+ database) | q | language-q |
| Qore | qore | language-qore |
| R | r | language-r |
| React JSX | jsx | language-jsx |
| React TSX | tsx | language-tsx |
| Ren’py | renpy | language-renpy |
| Reason | reason | language-reason |
| reST (reStructuredText) | rest | language-rest |
| Rip | rip | language-rip |
| Roboconf | roboconf | language-roboconf |
| RSS | rss | language-rss |
| Ruby | ruby | language-ruby |
| Rust | rust | language-rust |
| SAS | sas | language-sas |
| Sass (Sass) | sass | language-sass |
| Sass (Scss) | scss | language-scss |
| Scala | scala | language-scala |
| Scheme | scheme | language-scheme |
| Smalltalk | smalltalk | language-smalltalk |
| Smarty | smarty | language-smarty |
| SQL | sql | language-sql |
| Soy (Closure Template) | soy | language-soy |
| SSML | ssml | language-ssml |
| Stylus | stylus | language-stylus |
| SVG | svg | language-svg |
| Swift | swift | language-swift |
| TAP | tap | language-tap |
| Tcl | tcl | language-tcl |
| Textile | textile | language-textile |
| Template Toolkit 2 | tt2 | language-tt2 |
| Twig | twig | language-twig |
| TypeScript | typescript | language-typescript |
| VB.Net | vbnet | language-vbnet |
| Velocity | velocity | language-velocity |
| Verilog | verilog | language-verilog |
| VHDL | vhdl | language-vhdl |
| vim | vim | language-vim |
| Visual Basic | visual-basic | language-visual-basic |
| WebAssembly | wasm | language-wasm |
| Wiki markup | wiki | language-wiki |
| Xeora | xeora | language-xeora |
| XML | xml | language-xml |
| Xojo (REALbasic) | xojo | language-xojo |
| XQuery | xquery | language-xquery |
| YAML | yaml | language-yaml |
Franz war pensionierter HTL Lehrer (TGM), Präsident von ClubComputer, Herausgeber der Clubzeitung PCNEWS und betreute unser Clubtelefon und Internet Support. Er war leidenschaftlicher Rapid Wien Fan. Er ist leider Anfang Jänner 2024 nach langer schwerer Krankheit verstorben.
Neueste Kommentare