diff --git a/zimui/index.html b/zimui/index.html index ee47c67..8e8ad30 100644 --- a/zimui/index.html +++ b/zimui/index.html @@ -8,6 +8,42 @@ Devdocs Navbar Example +
+
+ +
+

Syntax Highlighting Tests

+

+ 

+                    -- Hello world in Lua
+                    print("Hello World")
+
+ 
+                    # Hello world in Python
+                    print("Hello World")
+
+ 
+                    // Hello world in Java
+                    System.out.println("Hello World");
+
+ 
+                    // Hello world in Go
+                    fmt.Fprintln(os.stdout, "Hello World")
+
+ 
+                    # Hello world in Ruby
+                    puts "Hello World"
+
+ 
+                    /* Hello world in C++ */
+                    std::cout << "Hello World!";
+
+

+
+
+
+ + diff --git a/zimui/package.json b/zimui/package.json index de8deee..f61a8bd 100644 --- a/zimui/package.json +++ b/zimui/package.json @@ -15,6 +15,7 @@ }, "dependencies": { "axios": "^1.7.7", + "prismjs": "^1.29.0", "vue": "^3.4.29" }, "devDependencies": { @@ -22,6 +23,7 @@ "@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 new file mode 100644 index 0000000..b12f18f --- /dev/null +++ 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 index 99d58ef..8019f5b 100644 --- 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 index 82cd0b6..079a57b 100644 --- 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"