added syntax highlighting back

DDP-Projekt · Dec 5, 2023 · d33f41a · d33f41a
1 parent b4bfadc
commit d33f41a
Show file tree

Hide file tree

Showing 6 changed files with 148 additions and 88 deletions.
diff --git a/assets/css/md-style.css b/assets/css/md-style.css
@@ -85,55 +85,61 @@
 }
 
 /* DDP */
-#artikel .language-ddp span.token.control-statement {
+#artikel .language-ddp {
+	color: #88d7f6;
+}
+#artikel .language-ddp>span.comment {
+	color: #5b8449;
+}
+#artikel .language-ddp>span.control-statement {
 	color: #d38ecd;
 }
-#artikel .language-ddp span.token.number {
+#artikel .language-ddp>span.number {
 	color: #B5CEA8;
 }
-#artikel .language-ddp span.token.comment {
-	color: #5b8449;
+#artikel .language-ddp>span.operator {
+	color: #72bbf3;
 }
-#artikel .language-ddp span.token.operator {
-	color: #cdd8ff;
-}
-#artikel .language-ddp span.token.placeholder {
+#artikel .language-ddp>span.placeholder {
 	color: #d7a09d;
 }
-#artikel .language-ddp span.token.boolean-literal {
+#artikel .language-ddp>span.boolean-literal {
 	color: #569CD6;
 }
-#artikel .language-ddp span.token.string-literal {
-	color: #ecb878;
-}
-#artikel .language-ddp span.token.char-literal {
+#artikel .language-ddp>span.char-literal {
 	color: #f7a94b;
 }
-#artikel .language-ddp span.token.type {
+#artikel .language-ddp>span.type {
 	color: #80bc80;
 }
-#artikel .language-ddp span.token.builtins {
+#artikel .language-ddp>span.builtins {
 	color:#f7f774;
 }
+#artikel .language-ddp>span.string-literal {
+	color: #ecb878;
+}
+#artikel .language-ddp>span.punctuation {
+	color: var(--text-color);
+}
 
 /* terminal */
-#artikel .language-terminal span.token.command {
+#artikel .language-terminal>span.command {
 	color: #d38ecd;
 }
 
-#artikel .language-terminal span.token.option {
+#artikel .language-terminal>span.option {
 	color: #569CD6;
 }
 
-#artikel .language-terminal span.token.file {
+#artikel .language-terminal span.file {
 	color: #80bc80;
 }
 
-#artikel .language-terminal span.token.placeholder {
+#artikel .language-terminal span.placeholder {
 	color: #d7a09d;
 }
 
-#artikel .language-terminal span.token.string-literal {
+#artikel .language-terminal span.string-literal {
 	color: #ecb878;
 }
 
@@ -171,4 +177,16 @@
 
 details summary {
 	cursor: pointer;
+}
+
+to-do {
+	display: flex;
+	padding: 5px;
+	margin: 5px;
+	border: 5px solid #df5e5e;
+	background-color: var(--md-code-bg-color);
+	justify-content: center;
+	align-content: center;
+	text-align: center;
+	border-radius: 15px;
 }
diff --git a/assets/js/script.js b/assets/js/script.js
@@ -1,43 +1,10 @@
 'use strict'
 
-const searchParams = new URLSearchParams(window.location.search);
-
 customElements.define('to-do', TODOElement);
 document.addEventListener("DOMContentLoaded", () => {
 	closeNav(); // automatically close nav
-
-	//const md = document.getElementById("md"); // zero-md element
-	// apply syntax highlighting once zero-md and Prism.js are loaded
-	/*md.addEventListener('zero-md-ready', () => {
-		applySyntaxHighlighting();
-	});*/
 });
 
-function applySyntaxHighlighting() {
-	// regex rules for syntax highlighting
-	Prism.languages['ddp'] = {
-		'placeholder': /<[^<>]+>/,
-		'comment': /\[[\s\S]*?]/,
-		'builtins': /Schreibe\s*(den|die)?\s*(Zahl(en)?|Kommazahl(en)?|Buchstaben?|Texte?)?|auf eine Zeile/,
-		'string-literal': /".*"/,
-		'char-literal': /'.*'/,
-		'boolean-literal': /wahr|falsch/,
-		'number': /-?\d+(,\d)?/,
-		'control-statement': /[Ww]enn|aber|dann|Sonst|[Ss]olange|[Mm]ache|[Ww]iederhole|Für|jede|mit Schrittgröße|[Gg]ibt?|zurück|macht|einen?|mit den Parametern|vom|[Uu]nd kann so benutzt werden|Binde|ein/,
-		'punctuation': /[.:]/,
-		'operator': /\b(ist|sind|oder|und|nicht|plus|minus|mal|durch|modulo|hoch|. wurzel von|logisch|kontra|gleich|ungleich|kleiner als|größer als|kleiner als, oder|größer als, oder|natürlicher Logarithmus von|Betrag|Stück|von|bis|als|an der Stelle)\b/,
-		'type': /nichts|Typ|Funktion|Zahl(en)?|Kommazahl(en)?|Wahrheitswert|Texte?|Buchstaben?|[Dd]er|[Dd]ie|[Dd]as/,
-	};
-
-	Prism.languages['terminal'] = {
-		'placeholder': /<[^<>]+>/,
-		'file': /(\w+)\.(\w+)/,
-		'command': /(?<=\$\s+)(\w+)|\.\/(\w+)/,
-		'option': /(\w+)/,
-		'string-literal': /".*"/,
-	};
-}
-
 let sidebarHidden = false;
 
 function openNav() {

diff --git a/content/DE/Programmierung/Variablen.md b/content/DE/Programmierung/Variablen.md
@@ -25,7 +25,7 @@ Eine Liste von allen Datentypen findest du im Artikel [Datentypen](/Bedienungsan
 
 ## Beispiele:
 
-```dpp
+```ddp
 Die Zahl a ist 10.
 Die Kommazahl b ist 4,32.
 Der Text c ist "Hallo!".
@@ -56,39 +56,69 @@ Diese Operatoren können verwendet werden um Code lesbarer zu gestalten.
 
 ## Addition
 
-`Erhöhe <variable> um <a>`  
+```ddp
+Erhöhe <variable> um <a>
+```  
 equivalent zu  
-`Speichere <variable> plus <a> in <variable>`
+```ddp
+Speichere <variable> plus <a> in <variable>
+```
 
 ## Subtraktion
 
-`Verringere <variable> um <a>`  
+```ddp
+Verringere <variable> um <a>
+```  
 equivalent zu  
-`Speichere <variable> minus <a> in <variable>`
+```ddp
+Speichere <variable> minus <a> in <variable>
+```
 
 ## Multiplikation
 
-`Vervielfache <variable> um <a>.`  
+```ddp
+Vervielfache <variable> um <a>.
+```
 equivalent zu  
-`Speichere <variable> mal <a> in <variable>`
+```ddp
+Speichere <variable> mal <a> in <variable>
+```
 
 ## Division
 
-`Teile <variable> durch <a>.`  
+```ddp
+Teile <variable> durch <a>.
+```
 equivalent zu  
-`Speichere <variable> durch <a> in <variable>`
+```ddp
+Speichere <variable> durch <a> in <variable>
+```
 
 ## Negation
 
-`Negiere <variable>.`  
+```ddp
+Negiere <variable>.
+```
 equivalent zu  
-`Speichere -<variable> in <variable>` bzw.  
-`Speichere nicht <variable> in <variable>`
+```ddp
+Speichere -<variable> in <variable>
+```
+bzw.  
+```ddp
+Speichere nicht <variable> in <variable>
+```
 
 ## Bitshift
-
-`Verschiebe <variable> um <a> Bit nach Links`  
-`Verschiebe <variable> um <a> Bit nach Rechts`  
+```ddp
+Verschiebe <variable> um <a> Bit nach Links
+```
+```ddp
+Verschiebe <variable> um <a> Bit nach Rechts
+```
 equivalent zu  
-`Speichere <variable> um <a> Bit nach Links verschoben in <variable>`  
-`Speichere <variable> um <a> Bit nach Rechts verschoben in <variable>`
+```ddp
+Speichere <variable> um <a> Bit nach Links verschoben in <variable>
+```
+```ddp
+Speichere <variable> um <a> Bit nach Rechts verschoben in <variable>
+```
diff --git a/content/EN/Programmierung/Variablen.md b/content/EN/Programmierung/Variablen.md
@@ -25,7 +25,7 @@ You can find a list of all data types in the article [data types](/Bedienungsanl
 
 ## Examples:
 
-```dpp
+```ddp
 Die Zahl a ist 10.
 Die Kommazahl b ist 4,32.
 Der Text c ist "Hallo!".
@@ -56,39 +56,69 @@ These operators can be used to make code more readable.
 
 ## Addition
 
-`Erhöhe <variable> um <a>`  
+```ddp
+Erhöhe <variable> um <a>
+```  
 equivalent to  
-`Speichere <variable> plus <a> in <variable>`
+```ddp
+Speichere <variable> plus <a> in <variable>
+```
 
 ## Subtraction
 
-`Verringere <variable> um <a>`  
+```ddp
+Verringere <variable> um <a>
+```  
 equivalent to  
-`Speichere <variable> minus <a> in <variable>`
+```ddp
+Speichere <variable> minus <a> in <variable>
+```
 
 ## Multiplication
 
-`Vervielfache <variable> um <a>.`  
+```ddp
+Vervielfache <variable> um <a>.
+```
 equivalent to  
-`Speichere <variable> mal <a> in <variable>`
+```ddp
+Speichere <variable> mal <a> in <variable>
+```
 
 ## Division
 
-`Teile <variable> durch <a>.`  
+```ddp
+Teile <variable> durch <a>.
+```
 equivalent to  
-`Speichere <variable> durch <a> in <variable>`
+```ddp
+Speichere <variable> durch <a> in <variable>
+```
 
 ## Negation
 
-`Negiere <variable>.`  
+```ddp
+Negiere <variable>.
+```
 equivalent to  
-`Speichere -<variable> in <variable>` resp.  
-`Speichere nicht <variable> in <variable>`
+```ddp
+Speichere -<variable> in <variable>
+```
+or
+```ddp
+Speichere nicht <variable> in <variable>
+```
 
 ## Bitshift
-
-`Verschiebe <variable> um <a> Bit nach Links`  
-`Verschiebe <variable> um <a> Bit nach Rechts`  
+```ddp
+Verschiebe <variable> um <a> Bit nach Links
+```
+```ddp
+Verschiebe <variable> um <a> Bit nach Rechts
+```
 equivalent to  
-`Speichere <variable> um <a> Bit nach Links verschoben in <variable>`  
-`Speichere <variable> um <a> Bit nach Rechts verschoben in <variable>`
+```ddp
+Speichere <variable> um <a> Bit nach Links verschoben in <variable>
+```
+```ddp
+Speichere <variable> um <a> Bit nach Rechts verschoben in <variable>
+```
diff --git a/layouts/_default/_markup/render-codeblock-ddp.html b/layouts/_default/_markup/render-codeblock-ddp.html
@@ -0,0 +1,15 @@
+<pre class="language-ddp">
+	{{- .Inner 
+		| replaceRE `<([^<>]+)>` "<span class='placeholder'>&lt;$1&gt;</span>" | safeHTML
+		| replaceRE `\[[\s\S]*?]` "<span class='comment'>$0</span>" | safeHTML
+		| replaceRE `'.'` "<span class='char-literal'>$0</span>" | safeHTML
+		| replaceRE `\b(wahr|falsch)\b` "<span class='boolean-literal'>$1</span>" | safeHTML 
+		| replaceRE `Schreibe\s*(den|die)?\s*(Zahl(en)?|Kommazahl(en)?|Buchstaben?|Texte?)?|auf eine Zeile` "<span class='builtins'>$0</span>" | safeHTML
+		| replaceRE `-?\d+(,\d)?` "<span class='number'>$0</span>" | safeHTML 
+		| replaceRE `\b([Ww]enn|aber|dann|Sonst|[Ss]olange|[Mm]ache|[Ww]iederhole|Für jeden?|mit Schrittgröße|[Gg]ibt?|zurück|macht|einen?|mit den Parametern|mit dem Parameter|vom Typ|[Uu]nd kann so benutzt werden|Binde|ein|in|definiert|Der Alias|steht für die Funktion|Wir\s+nennen\s+die(\s+öffentliche)?\s+Kombination\s+aus|und\s+erstellen\s+sie\s+so|aus)\b` "<span class='control-statement'>$1</span>" | safeHTML
+		| replaceRE `[.:(),]` "<span class='punctuation'>$0</span>" | safeHTML 
+		| replaceRE `\b(ist|sind|oder|und|nicht|plus|minus|mal|durch|modulo|hoch|. wurzel von|logisch|kontra|gleich|ungleich|kleiner als|größer als|kleiner als, oder|größer als, oder|natürlicher Logarithmus von|Betrag|Stück|von|bis|als|an der Stelle|[Ss]peichere|verkettet mit|Erhöhe|Vervielfache|Teile|Negiere|Verschiebe|ab dem|bis zum|um|Bit nach (Links|Rechts)|verschoben)\b` "<span class='operator'>$1</span>" | safeHTML 
+		| replaceRE `\b(nichts|Die Funktion|Zahl(en)?|Kommazahl(en)?|Wahrheitswert|Texte?|Buchstaben?|[Dd]er\s+(Buchstabe|Text|Wahrheitswert)|[Dd]ie\s+(Zahl(en)?|Kommazahl(en)?|Text|Buchstaben|Wahrheitswert)|[Dd]as|Referenz|Liste)\b` "<span class='type'>$1</span>" | safeHTML 
+		| replaceRE `".*?"` "<span class='string-literal'>$0</span>" | safeHTML
+	-}}
+</pre>
diff --git a/layouts/shortcodes/duden-function.html b/layouts/shortcodes/duden-function.html
@@ -33,7 +33,7 @@ <h3>{{ i18n "aliases" }}</h3>
 
 	<h3>{{ i18n "impl" }}</h3>
 	{{ if eq (.Get "extern") "false" }}
-		<pre class="language-ddp" tabindex="0"><code class="language-ddp">{{ replace (.Get "impl" | plainify) "&emsp;" "    " }}</code></pre>
+		{{ replace (.Get "impl" | plainify) "&emsp;" "    " }}
 	{{ else }}
 		<p>{{ i18n "externImpl" }} <code>{{ .Get "impl" }}</code></p>
 	{{ end }}