Syntax Highlighting

Um Code in einer WordPress-Publikation durch farbliche Hervorhebung der Codeelemente zu formatieren, kann man ein Plugin bemühen, etwa

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 &lt; 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-xxxx eingefügt werden, wobei xxxx ein 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
prism-coy.css
prism-dark.css
prism-funky.css
prism-okaidia.css
prism-solarizedlight.css
prism-tomorrow.css
prism-twilight.css

Verfügbare Sprachen

LanguageKeyClass
ABAPabaplanguage-abap
ActionScriptactionscriptlanguage-actionscript
Adaadalanguage-ada
Apache Configurationapacheconflanguage-apacheconf
APLapllanguage-apl
AppleScriptapplescriptlanguage-applescript
Arduinoarduinolanguage-arduino
ARFFarfflanguage-arff
AsciiDocasciidoclanguage-asciidoc
6502 Assemblyasm6502language-asm6502
ASP.NET (C#)aspnetlanguage-aspnet
AutoHotkeyautohotkeylanguage-autohotkey
AutoItautoitlanguage-autoit
Bashbashlanguage-bash
BASICbasiclanguage-basic
Batchbatchlanguage-batch
Bisonbisonlanguage-bison
Brainfuckbrainfucklanguage-brainfuck
Brobrolanguage-bro
Cclanguage-c
C-likeclikelanguage-clike
C#csharplanguage-csharp
C++cpplanguage-cpp
CoffeeScriptcoffeescriptlanguage-coffeescript
Clojureclojurelanguage-clojure
Crystalcrystallanguage-crystal
Content-Security-Policycsplanguage-csp
CSScsslanguage-css
CSS Extrascss-extraslanguage-css-extras
Ddlanguage-d
Dartdartlanguage-dart
Diffdifflanguage-diff
Django/Jinja2djangolanguage-django
Dockerdockerlanguage-docker
Eiffeleiffellanguage-eiffel
Elixirelixirlanguage-elixir
Elmelmlanguage-elm
ERBerblanguage-erb
Erlangerlanglanguage-erlang
F#fsharplanguage-fsharp
Flowflowlanguage-flow
Fortranfortranlanguage-fortran
GEDCOMgedcomlanguage-gedcom
Gherkingherkinlanguage-gherkin
Gitgitlanguage-git
GLSLglsllanguage-glsl
GameMaker Languagegmllanguage-gml
Gogolanguage-go
GraphQLgraphqllanguage-graphql
Groovygroovylanguage-groovy
Hamlhamllanguage-haml
Handlebarshandlebarslanguage-handlebars
Haskellhaskelllanguage-haskell
Haxehaxelanguage-haxe
HTMLhtmllanguage-html
HTTPhttplanguage-http
HTTP Public-Key-Pinshpkplanguage-hpkp
HTTP Strict-Transport-Securityhstslanguage-hsts
IchigoJamichigojamlanguage-ichigojam
Iconiconlanguage-icon
Inform 7inform7language-inform7
Iniinilanguage-ini
Ioiolanguage-io
Jjlanguage-j
Javajavalanguage-java
JavaScriptjavascriptlanguage-javascript
Joliejolielanguage-jolie
JSONjsonlanguage-json
Juliajulialanguage-julia
Keymankeymanlanguage-keyman
Kotlinkotlinlanguage-kotlin
LaTeXlatexlanguage-latex
Lesslesslanguage-less
Liquidliquidlanguage-liquid
Lisplisplanguage-lisp
LiveScriptlivescriptlanguage-livescript
LOLCODElolcodelanguage-lolcode
Lualualanguage-lua
Makefilemakefilelanguage-makefile
Markdownmarkdownlanguage-markdown
Markupmarkuplangilanguage-markup
Markup templatingmarkup-templatinglanguage-markup-templating
MathMLmathmllanguage-mathml
MATLABmatlablanguage-matlab
MELmellanguage-mel
Mizarmizarlanguage-mizar
Monkeymonkeylanguage-monkey
N4JSn4jslanguage-n4js
NASMnasmlanguage-nasm
nginxnginxlanguage-nginx
Nimnimlanguage-nim
Nixnixlanguage-nix
NSISnsislanguage-nsis
Objective-Cobjectiveclanguage-objectivec
OCamlocamllanguage-ocaml
OpenCLopencllanguage-opencl
Ozozlanguage-oz
PARI/GPparigplanguage-parigp
Parserparserlanguage-parser
Pascalpascallanguage-pascal
Perlperllanguage-perl
PHPphplanguage-php
PHP Extrasphp-extraslanguage-php-extras
PL/SQLplsqllanguage-plsql
PowerShellpowershelllanguage-powershell
Processingprocessinglanguage-processing
Prologprologlanguage-prolog
.propertiespropertieslanguage-properties
Protocol Buffersprotobuflanguage-protobuf
Pugpuglanguage-pug
Puppetpuppetlanguage-puppet
Purepurelanguage-pure
Pythonpythonlanguage-python
Q (kdb+ database)qlanguage-q
Qoreqorelanguage-qore
Rrlanguage-r
React JSXjsxlanguage-jsx
React TSXtsxlanguage-tsx
Ren’pyrenpylanguage-renpy
Reasonreasonlanguage-reason
reST (reStructuredText)restlanguage-rest
Ripriplanguage-rip
Roboconfroboconflanguage-roboconf
RSSrsslanguage-rss
Rubyrubylanguage-ruby
Rustrustlanguage-rust
SASsaslanguage-sas
Sass (Sass)sasslanguage-sass
Sass (Scss)scsslanguage-scss
Scalascalalanguage-scala
Schemeschemelanguage-scheme
Smalltalksmalltalklanguage-smalltalk
Smartysmartylanguage-smarty
SQLsqllanguage-sql
Soy (Closure Template)soylanguage-soy
SSMLssmllanguage-ssml
Stylusstyluslanguage-stylus
SVGsvglanguage-svg
Swiftswiftlanguage-swift
TAPtaplanguage-tap
Tcltcllanguage-tcl
Textiletextilelanguage-textile
Template Toolkit 2tt2language-tt2
Twigtwiglanguage-twig
TypeScripttypescriptlanguage-typescript
VB.Netvbnetlanguage-vbnet
Velocityvelocitylanguage-velocity
Verilogveriloglanguage-verilog
VHDLvhdllanguage-vhdl
vimvimlanguage-vim
Visual Basicvisual-basiclanguage-visual-basic
WebAssemblywasmlanguage-wasm
Wiki markupwikilanguage-wiki
Xeoraxeoralanguage-xeora
XMLxmllanguage-xml
Xojo (REALbasic)xojolanguage-xojo
XQueryxquerylanguage-xquery
YAMLyamllanguage-yaml

Franz Fiala

Ehemaliger Präsident Clubcomputer / Herausgeber PCNEWS bei ClubComputer.at
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.

Letzte Artikel von Franz Fiala (Alle anzeigen)

Zur Werkzeugleiste springen