Merge pull request #36 from openzim/jl/feat/syntax-highlight

Added syntax highlighting
openzim · Nov 4, 2024 · 9604fb8 · 9604fb8
2 parents 1fc6fc7 + aeea417
commit 9604fb8
Show file tree

Hide file tree

Showing 6 changed files with 121 additions and 0 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Added
+
+- Syntax highlighting matching DevDocs. (#30)
+
 ### Changed
 
 - Page navigation is now dynamically rendered reducing file sizes. (#24, #31)

diff --git a/zimui/index.html b/zimui/index.html
@@ -8,6 +8,42 @@
     <title>Devdocs Navbar Example</title>
   </head>
   <body id="body">
+      <div class="_container">
+          <main class="_content">
+
+              <div class="_page">
+                <h2>Syntax Highlighting Tests</h2>
+                <p>
+                  <pre data-language="lua">
+                    -- Hello world in Lua
+                    print("Hello World")
+                  </pre>
+                  <pre data-language="python">
+                    # Hello world in Python
+                    print("Hello World")
+                  </pre>
+                  <pre data-language="java">
+                    // Hello world in Java
+                    System.out.println("Hello World");
+                  </pre>
+                  <pre data-language="go">
+                    // Hello world in Go
+                    fmt.Fprintln(os.stdout, "Hello World")
+                  </pre>
+                  <pre data-language="ruby">
+                    # Hello world in Ruby
+                    puts "Hello World"
+                  </pre>
+                  <pre data-language="cpp">
+                    /* Hello world in C++ */
+                    std::cout &lt;&lt; "Hello World!";
+                  </pre>
+                </p>
+              </div>
+          </main>
+      </div>
+
+
 
     <script type="module" src="/src/main.ts"></script>
 

diff --git a/zimui/package.json b/zimui/package.json
@@ -15,13 +15,15 @@
   },
   "dependencies": {
     "axios": "^1.7.7",
+    "prismjs": "^1.29.0",
     "vue": "^3.4.29"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.8.0",
     "@tsconfig/node20": "^20.1.4",
     "@types/jsdom": "^21.1.7",
     "@types/node": "^20.14.5",
+    "@types/prismjs": "^1.26.5",
     "@vitejs/plugin-vue": "^5.0.5",
     "@vue/eslint-config-prettier": "^9.0.0",
     "@vue/eslint-config-typescript": "^13.0.0",

diff --git a/zimui/src/highlighter.ts b/zimui/src/highlighter.ts
@@ -0,0 +1,68 @@
+import Prism from 'prismjs'
+
+// Devdocs vendors all their Prism dependencies.
+// The list of supported languages is in:
+// https://github.com/freeCodeCamp/devdocs/blob/main/assets/javascripts/vendor/prism.js
+// The list below is sorted in the same order as the URL with exceptions noted.
+import 'prismjs/components/prism-markup'
+import 'prismjs/components/prism-css'
+import 'prismjs/components/prism-clike'
+import 'prismjs/components/prism-javascript'
+import 'prismjs/components/prism-bash'
+import 'prismjs/components/prism-c'
+import 'prismjs/components/prism-cpp'
+import 'prismjs/components/prism-cmake'
+import 'prismjs/components/prism-coffeescript'
+import 'prismjs/components/prism-d'
+import 'prismjs/components/prism-dart'
+import 'prismjs/components/prism-diff'
+import 'prismjs/components/prism-elixir'
+import 'prismjs/components/prism-erlang'
+import 'prismjs/components/prism-go'
+import 'prismjs/components/prism-groovy'
+import 'prismjs/components/prism-java'
+import 'prismjs/components/prism-json'
+import 'prismjs/components/prism-julia'
+import 'prismjs/components/prism-kotlin'
+import 'prismjs/components/prism-latex'
+import 'prismjs/components/prism-lua'
+import 'prismjs/components/prism-markdown'
+import 'prismjs/components/prism-markup-templating'
+import 'prismjs/components/prism-django'  // Must come after markup-templating
+import 'prismjs/components/prism-matlab'
+import 'prismjs/components/prism-nginx'
+import 'prismjs/components/prism-nim'
+import 'prismjs/components/prism-nix'
+import 'prismjs/components/prism-ocaml'
+import 'prismjs/components/prism-perl'
+import 'prismjs/components/prism-php'
+import 'prismjs/components/prism-python'
+import 'prismjs/components/prism-qml'
+import 'prismjs/components/prism-r'
+import 'prismjs/components/prism-jsx'
+import 'prismjs/components/prism-ruby'
+import 'prismjs/components/prism-crystal' // Must come after ruby
+import 'prismjs/components/prism-rust'
+import 'prismjs/components/prism-scss'
+import 'prismjs/components/prism-scala'
+import 'prismjs/components/prism-shell-session'
+import 'prismjs/components/prism-sql'
+import 'prismjs/components/prism-typescript'
+import 'prismjs/components/prism-yaml'
+import 'prismjs/components/prism-zig'
+
+function highlightSyntax() {
+    for (const element of document.querySelectorAll("pre[data-language]")) {
+
+        // Devdocs adds the attribute data-language, but Prism uses classes
+        // to decide what to highlight.
+        const language = element.getAttribute("data-language")
+        element.classList.add(`language-${language}`)
+
+        // Highlight the element.
+        Prism.highlightElement(element)
+    }
+}
+
+// Do syntax highlighting on page load.
+document.addEventListener("DOMContentLoaded", highlightSyntax)
diff --git a/zimui/src/main.ts b/zimui/src/main.ts
@@ -1,5 +1,6 @@
 import { defineCustomElement } from 'vue'
 import Navbar from './components/DevdocsNavbar.vue'
+import './highlighter'
 
 // Convert the navbar into a custom element. We're using this rather than
 // the shorthand .ce.vue naming because we need to disable shadowRoot

diff --git a/zimui/yarn.lock b/zimui/yarn.lock
@@ -377,6 +377,11 @@
   dependencies:
     undici-types "~6.19.2"
 
+"@types/prismjs@^1.26.5":
+  version "1.26.5"
+  resolved "https://registry.yarnpkg.com/@types/prismjs/-/prismjs-1.26.5.tgz#72499abbb4c4ec9982446509d2f14fb8483869d6"
+  integrity sha512-AUZTa7hQ2KY5L7AmtSiqxlhWxb4ina0yd8hNbl4TWuqnv/pFP0nDMb3YrfSBf4hJVGLh2YEIBfKaBW/9UEl6IQ==
+
 "@types/tough-cookie@*":
   version "4.0.5"
   resolved "https://registry.yarnpkg.com/@types/tough-cookie/-/tough-cookie-4.0.5.tgz#cb6e2a691b70cb177c6e3ae9c1d2e8b2ea8cd304"
@@ -1942,6 +1947,11 @@ pretty-format@^29.7.0:
     ansi-styles "^5.0.0"
     react-is "^18.0.0"
 
+prismjs@^1.29.0:
+  version "1.29.0"
+  resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.29.0.tgz#f113555a8fa9b57c35e637bba27509dcf802dd12"
+  integrity sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==
+
 proto-list@~1.2.1:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/proto-list/-/proto-list-1.2.4.tgz#212d5bfe1318306a420f6402b8e26ff39647a849"