Simple syntax highlighting in the markdown #14 using Prismjs

diku-dk · May 30, 2023 · ec58274 · ec58274
1 parent a29d0c1
commit ec58274
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 2 deletions.
diff --git a/web-server/static/prism/futhark.js b/web-server/static/prism/futhark.js
@@ -0,0 +1,24 @@
+Prism.languages.futhark = {
+	'function': /(?<=\bdef\s+)\w+/,
+	'builtin': /\b(?:map|map1|map2|map3|map4|map5|stream_map|stream_map_per|reduce|reduce_comm|scan|filter|partition|stream_red|stream_red_per|stream_seq|iota|replicate|scatter|drop|rotate|split|flatten|unflatten|curry|uncurry|id|const)\b/,
+	'comment': /--*/,
+	'boolean': /\b(?:false|true)\b/,
+	'keyword': /\b(?:if|then|else|let|loop|in|with|type|val|entry|for|while|do|case|match|include|import|module|open|local|assert|def|\.\.|\||:|=|\\|"|->|<-|\u2192|i8|i16|i32|i64|u8|u16|u32|u64|int|real|bool|char|f16|f32|f64)\b/,
+	'operator': /[-!#$%&*+.\/<=>?@\\^|~:\u03BB\u2192]+/,
+	'string': {
+		pattern: /(?:"""[\s\S]*?"""|@"(?:""|[^"])*"|"(?:\\[\s\S]|[^\\"])*"|'''[\s\S]*?'''|@'(?:''|[^'])*'|'(?:\\[\s\S]|[^\\'])*')B?/,
+		greedy: true
+	},
+	'char': {
+		pattern: /'(?:[^\\']|\\(?:.|\d{3}|x[a-fA-F\d]{2}|u[a-fA-F\d]{4}|U[a-fA-F\d]{8}))'B?/,
+		greedy: true
+	},
+	'punctuation': /[,;`]/,
+	'number': [
+		/0[bB][01][01_]*(i8|i16|i32|i64|u8|u16|u32|u64|f16|f32|f64)?/,
+		/(?<![^\W_0-9])[0-9][0-9_]*(\\.[0-9]+)?(i8|i16|i32|i64|u8|u16|u32|u64|f16|f32|f64)?(?![^\W_0-9])/,
+		/0[xX][0-9a-fA-F][0-9a-fA-F_]*(\\.[0-9a-fA-F]+)?(i8|i16|i32|i64|u8|u16|u32|u64|f16|f32|f64)?/,
+		/0[xX][0-9a-fA-F][0-9a-fA-F_]*\\.[0-9a-fA-F][0-9a-fA-F_]*([pP][\\+\\-]?[0-9_]+)?(i8|i16|i32|i64|u8|u16|u32|u64|f16|f32|f64)?/,
+	]	
+
+};
diff --git a/web-server/templates/index/index.html b/web-server/templates/index/index.html
@@ -7,7 +7,7 @@
     <title>Futhark Playground</title>
     <link rel="stylesheet" href="{{ url_for('static', filename='index/index.css') }}">
     <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.png') }}">
-    <script type="module" src="https://md-block.verou.me/md-block.js"></script>
+    <link href="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism-tomorrow.min.css" rel="stylesheet">
 </head>
 
 <body>
@@ -51,9 +51,13 @@
             </div>
         </div>
     </div>
+    <script src=" https://cdn.jsdelivr.net/npm/prismjs@1.29.0/prism.min.js "></script>
+    <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>
+    <script type="module" src="https://md-block.verou.me/md-block.js"></script>
     <script src="{{ url_for('static', filename='ace-builds-1.5.0/src/ace.js') }}" type="text/javascript"
         charset="utf-8"></script>
     <script src="{{ url_for('static', filename='index/index.js') }}"></script>
+    <script src="{{ url_for('static', filename='prism/futhark.js') }}"></script>
 
 </body>
 

diff --git a/web-server/templates/view/view.html b/web-server/templates/view/view.html
@@ -7,13 +7,18 @@
     <title>View Futhark Playground Output</title>
     <link rel="stylesheet" href="{{ url_for('static', filename='view/view.css') }}">
     <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.png') }}">
-    <script type="module" src="https://md-block.verou.me/md-block.js"></script>
+    <link href="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism-tomorrow.min.css" rel="stylesheet">
 </head>
 
 <body>
     <div id="literate">
         <md-block> {{ literate_content }}</md-block>
     </div>
+
+    <script src=" https://cdn.jsdelivr.net/npm/prismjs@1.29.0/prism.min.js "></script>
+    <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>
+    <script type="module" src="https://md-block.verou.me/md-block.js"></script>
+    <script src="{{ url_for('static', filename='prism/futhark.js') }}"></script>
 </body>
 
 </html>