Add support for code blocks and inline highlights

ECN · Dec 23, 2020 · 71e53f7 · 71e53f7
1 parent 640bc32
commit 71e53f7
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 4 deletions.
diff --git a/api/documentation/docs/Material for mkdocs Formatting.md b/api/documentation/docs/Material for mkdocs Formatting.md
@@ -1,7 +1,6 @@
 # Material for mkdocs Formatting
 
 ## Admonitions
-
 See: [Material for mkdocs: Admonitions](https://squidfunk.github.io/mkdocs-material/reference/admonitions/#admonitions)
 
 !!! note
@@ -22,4 +21,24 @@ See: [Material for mkdocs: Admonitions](https://squidfunk.github.io/mkdocs-mater
 !!! success "Custom Title"
 	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
 	nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
-	massa, nec semper lorem quam in massa.
+	massa, nec semper lorem quam in massa.
+
+
+## Code Blocks
+See: [Material for mkdocs: Code Blocks](https://squidfunk.github.io/mkdocs-material/reference/code-blocks/#highlight)
+
+``` python
+# This is a Python code block.
+print("Hello world!") if __name__ == "__main__"
+```
+``` js linenums="1"
+# This is a JavaScript code block with line numbers.
+( _ => console.log("Hello world!"))();
+```
+``` md hl_lines="3"
+# This is a Markdown code block with line highlights and nested code block.
+	``` js
+	( _ => console.log("Hello world!"))();
+	```
+```
+This is an inline Java highlight `#!java system.out.println("Hello world!")`
diff --git a/api/documentation/docs/javascript/config.js b/api/documentation/docs/javascript/config.js
@@ -0,0 +1,6 @@
+/*
+ * Configure Highlight.js for code highlighting
+ * See: https://squidfunk.github.io/mkdocs-material/reference/code-blocks/#highlight
+ */
+
+hljs.initHighlighting()
diff --git a/api/documentation/mkdocs.yml b/api/documentation/mkdocs.yml
@@ -13,7 +13,8 @@ markdown_extensions:
   - admonition
   - pymdownx.details
   - pymdownx.superfences
-  - codehilite
+  - pymdownx.highlight
+  - pymdownx.inlinehilite
   - mkautodoc
 
 
@@ -47,4 +48,10 @@ extra:
       name: webqueue2 on Slack
     - icon: fontawesome/brands/github
       link: https://github.itap.purdue.edu/ECN/webqueue2
-      name: webqueue2 on GitHub
+      name: webqueue2 on GitHub
+
+extra_javascript:
+  - https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.1/highlight.min.js
+  - javascript/config.js
+extra_css:
+  - https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.1/styles/default.min.css