Merge pull request #9 from bonartm/8_math_katex

solves #8: math rendering and syntax highlighting implemented in separate extensions
bonartm · Jul 1, 2021 · 61a6166 · 61a6166
2 parents d05200d + 32cf005
commit 61a6166
Show file tree

Hide file tree

Showing 18 changed files with 348 additions and 110 deletions.
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -32,8 +32,8 @@ jobs:
             - run: npm run validate
             - run: npm run build
 
-            - name: Deploy on push
-              if: ${{ github.event_name == 'push' }}
+            - name: Deploy on push to main branch
+              if: ${{ github.event_name == 'push' && github.ref == 'refs/heads/main' }}
               uses: peaceiris/actions-gh-pages@v3
               with:
                   github_token: ${{ secrets.GITHUB_TOKEN }}

diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,4 @@
+*.js.map
 /node_modules
 /test/js
 /test/browsertest/js

diff --git a/README.md b/README.md
@@ -4,7 +4,7 @@
 
 ### 🚀 Try the [quizdown live editor](https://bonartm.github.io/quizdown-live-editor/)
 
-- supports markdown text formatting, images and syntax highlighting.
+- supports markdown text formatting, images, syntax highlighting and math rendering.
 - different [quiz-types](./docs/syntax.md): single-choice, multiple-choice, sequence.
 - support for [hints and explanations](./docs/syntax.md#hints-and-comments).
 - [options](./docs/options.md) for color theme, question shuffling, localization.
@@ -35,6 +35,21 @@ Add the library to your website and initialize with default options:
 </head>
 ```
 
+To keep the bundle size low, syntax highlighting and math rendering are implemented in separate extensions that can be loaded and registered manually if needed: 
+
+```html
+<head>
+	...
+    <script src="./build/quizdown.js"></script>
+	<script src="./build/extensions/quizdownKatex.js"></script>
+	<script src="./build/extensions/quizdownHighlight.js"></script>
+	<script>
+		quizdown.register(quizdownKatex).register(quizdownHighlight).init();
+	</script>
+	...
+</head>
+```
+
 Write questions within a `quizdown` class (edit in the [🚀quizdown editor](https://bonartm.github.io/quizdown-live-editor/?code=---%0Aprimary_color%3A%20steelblue%0Ashuffle_questions%3A%20false%0Ashuffle_answers%3A%20true%0A---%0A%0A%23%23%23%20Select%20your%20superpowers!%0A%0A-%20%5B%20%5D%20Enhanced%20Strength%0A-%20%5B%20%5D%20Levitation%0A-%20%5Bx%5D%20Shapeshifting%0A%0A%23%23%23%20What%27s%20the%20capital%20of%20Germany%3F%0A%0A%3E%20Hint%3A%20The%20_largest_%20city%20in%20Germany...%0A%0A1.%20%5Bx%5D%20Berlin%0A1.%20%5B%20%5D%20Frankfurt%0A1.%20%5B%20%5D%20Paris%0A1.%20%5B%20%5D%20Cologne)):
 
 ```html

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -31,11 +31,12 @@
     "author": "Malte Bonart",
     "license": "MIT",
     "devDependencies": {
-        "@rollup/plugin-commonjs": "^17.0.0",
+        "@rollup/plugin-commonjs": "^19.0.0",
         "@rollup/plugin-json": "^4.1.0",
         "@rollup/plugin-node-resolve": "^11.0.0",
         "@rollup/plugin-typescript": "^6.0.0",
         "@tsconfig/svelte": "^1.0.10",
+        "@types/marked": "^2.0.3",
         "acorn": "^8.2.4",
         "css-tree": "^1.1.3",
         "dotenv-cli": "^4.0.0",
@@ -60,7 +61,8 @@
         "auto-bind": "^4.0.0",
         "dompurify": "^2.2.6",
         "highlight.js": "^10.7.0",
-        "marked": "^2.0.0",
+        "katex": "^0.13.11",
+        "marked": "^2.1.3",
         "strip-indent": "^3.0.0",
         "svelte-i18n": "^3.3.9",
         "yaml": "2.0.0-5"

diff --git a/public/build/extensions/quizdownHighlight.js b/public/build/extensions/quizdownHighlight.js
diff --git a/public/build/extensions/quizdownKatex.js b/public/build/extensions/quizdownKatex.js
diff --git a/public/build/quizdown.js b/public/build/quizdown.js
diff --git a/public/build/quizdown.js.map b/public/build/quizdown.js.map
diff --git a/public/index.html b/public/index.html
@@ -6,8 +6,12 @@
 
 	<title>Quizdown Demo Page</title>
 
-	<script src='build/quizdown.js'></script>
-	<script>quizdown.init();</script>
+	<script src="./build/quizdown.js"></script>
+	<script src="./build/extensions/quizdownKatex.js"></script>
+	<script src="./build/extensions/quizdownHighlight.js"></script>
+	<script>
+		quizdown.register(quizdownKatex).register(quizdownHighlight).init();
+	</script>
 </head>
 
 <style>
@@ -30,9 +34,35 @@ <h1>Quizdown Demo Page</h1>
 
 				---
 				shuffle_answers: true
-				shuffle_questions: true
+				shuffle_questions: false
 				---
 
+				#### What's the value of $x$?
+
+				This is what i mean:	
+				$$
+				x=\sqrt{\frac{9}{16}}
+				$$
+
+				> Also check out $\sqrt{x+2}$!
+
+				1. [x] Try out: $x=0.75$
+				1. [ ] $x=0.5$ could also *be correct*!
+				1. [ ] perhaps $x=1$?
+				1. [ ] $x=1.5$
+
+				#### What's the value of `x[3]`?
+
+				```python
+				# a python list
+				x = [1, 2, 3, 4]
+				```
+
+				1. [ ] 1
+				1. [ ] 2
+				1. [ ] 3
+				1. [x] 4
+
 				#### Who is the person in the picture?
 
 				![](https://upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Sir_Tim_Berners-Lee.jpg/330px-Sir_Tim_Berners-Lee.jpg)