update documentation

bonartm · Jun 28, 2021 · 31b0af8 · 31b0af8
1 parent debc673
commit 31b0af8
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 18 deletions.
diff --git a/README.md b/README.md
@@ -4,7 +4,8 @@
 
 ### 🚀 Try the [quizdown live editor](https://bonartm.github.io/quizdown-live-editor/)
 
-- supports markdown text formatting, images and syntax highlighting.
+- supports markdown text formatting and images
+- optional extensions for syntax highlighting and math formula 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.
@@ -27,10 +28,12 @@ Add the library to your website and initialize with default options:
 ```html
 <head>
 	...
-    <script 
-	src="https://cdn.jsdelivr.net/gh/bonartm/quizdown-js@latest/public/build/quizdown.js">
+	<script type="module">
+		import quizdown from './build/quizdown.js'
+		import quizdownKatex from './build/extensions/quizdownKatex.js'
+		import quizdownHighlight from './build/extensions/quizdownHighlight.js'
+		quizdown.register(quizdownKatex).register(quizdownHighlight).init();
 	</script>
-	<script>quizdown.init();</script>
 	...
 </head>
 ```

diff --git a/docs/README.md b/docs/README.md
@@ -1,26 +1,30 @@
 # Getting Started
 
-1. Include the `quizdown.js` library in your page:
+1. Import `quizdown.js` modules (+optional extensions) in your page:
 
 ```html
 <head>
-    <script src="quizdown.js"></script>
+    <script type="module">
+		import quizdown from './build/quizdown.js'
+		import quizdownKatex from './build/extensions/quizdownKatex.js'
+		import quizdownHighlight from './build/extensions/quizdownHighlight.js'
+		
+	</script>
 </head>
 ```
+Or use a CDN `https://cdn.jsdelivr.net/gh/bonartm/quizdown-js@latest/public/build/quizdown.js`
 
-Or using a CDN:
 
-```html
-<head>
-    <script src="https://cdn.jsdelivr.net/gh/bonartm/quizdown-js@latest/public/build/quizdown.js"></script>
-</head>
-```
-
-2. Initialize the quizdown library:
+2. Initialize the quizdown library and possibly register the extensions:
 
 ```html
-<script>
-    quizdown.init();
+<script type="module">
+    import quizdown from './build/quizdown.js'
+    import quizdownKatex from './build/extensions/quizdownKatex.js'
+    import quizdownHighlight from './build/extensions/quizdownHighlight.js'
+
+    quizdown.register(quizdownKatex).register(quizdownHighlight).init();
+	
 </script>
 ```
 

diff --git a/docs/module_import.md b/docs/module_import.md
@@ -10,7 +10,7 @@ And use it in your code to create a quiz app:
 
 
 ```typescript
-import { create_app } from 'quizdown'
+import quizdown from 'quizdown'
 
 
 let node = document.querySelector('.quizdown');
@@ -28,6 +28,6 @@ let raw_quizdown = `
 - [ ] False
 `
 
-create_app(raw_quizdown, node, config)
+quizdown.create_app(raw_quizdown, node, config)
 ```