Code Highlight C Code and new option customStyleSheet

README.md

@@ -20,8 +20,6 @@ quizdown is easy to setup and best used in combination with existing static site
 
 ### 📚 [Documentation](./docs/)
 
-
-
 ## Stand-alone Example
 
 Add the library to your website and initialize with default options:
@@ -81,7 +79,23 @@ Write questions within a `quizdown` class (edit in the [🚀quizdown editor](htt
 ...
 ```
 
-
+## Additional Options
+
+| Option | Type | Description | Default Value |
+| ------ | ---- | ----------- | --- |
+| startOnLoad | boolean | Parse the Quiz at loading | `True` | 
+| shuffleAnswers | boolean | Shuffle the answers | `True` |
+| shuffleQuestions | boolean | Shuffle the questions | `False` |
+| nQuestions | number | Number of questions | undefined |
+| primaryColor | string | Color of the progress bar | 'steelblue' |
+| secondaryColor | string | Background color of the selections  | '#f2f2f2' |
+| textColor | string | Color of the text | 'black' |
+| passingGrade | number | Number of points to success. | undefined |
+| customPassMsg | string | Success message. Only displayed if passingGrade is set and reached | 'You have passed' |
+| customFailMsg | string | Failure message. Only displayed if passingGrade is set and not passed | 'You have not passed' |
+| locale | string | Used language. Possible are 'de', 'en', 'es', 'fr' | null |
+| enableRetry | boolean | Enable Retry button | `True` | 
+| customStyleSheet | string | Add an own css file for style updating | 'customQuizdown.css' |
 
 ## Contributing
 

src/App.svelte

@@ -42,21 +42,23 @@
     let node: HTMLElement;
     let minHeight = 150;
     let reloaded = false;
+    let customCssFile = ""
     // let showModal = false;
 
     // set global options
     onMount(async () => {
         let primaryColor: string = quiz.config.primaryColor;
         let secondaryColor: string = quiz.config.secondaryColor;
         let textColor: string = quiz.config.textColor;
+        customCssFile = quiz.config.customStyleSheet;
 
         node.style.setProperty('--quizdown-color-primary', primaryColor);
         node.style.setProperty('--quizdown-color-secondary', secondaryColor);
         node.style.setProperty('--quizdown-color-text', textColor);
         node.style.minHeight = `${minHeight}px`;
     });
 </script>
-
+<link rel="stylesheet" href={customCssFile}>
 <div class="quizdown-content" bind:this="{node}">
     <Card>
         <ProgressBar value="{$index}" max="{quiz.questions.length - 1}" />

src/config.ts

@@ -31,6 +31,7 @@ export class Config {
     customFailMsg: string;
     locale: 'de' | 'en' | 'es' | 'fr' | null;
     enableRetry: boolean;
+    customStyleSheet: string;
 
     constructor(options: Config | object) {
         // handle <=v0.3.0 snake_case options for backwards compatibility
@@ -49,6 +50,7 @@ export class Config {
         this.customFailMsg = get(options['customFailMsg'], 'You have not passed');
         this.locale = get(options['locale'], null);
         this.enableRetry = get(options['enableRetry'],true);
+        this.customStyleSheet = get(options['customStyleSheet'], 'customQuizdown.css');
     }
 }
 

src/extensions/quizdownHighlight.ts

@@ -7,6 +7,7 @@ import plaintext from 'highlight.js/lib/languages/plaintext';
 import python from 'highlight.js/lib/languages/python';
 import typescript from 'highlight.js/lib/languages/typescript';
 import xml from 'highlight.js/lib/languages/xml';
+import c from 'highlight.js/lib/languages/c';
 import type { QuizdownExtension } from '../quizdown.js';
 
 // this does not work....
@@ -23,6 +24,7 @@ hljs.registerLanguage('plaintext', plaintext);
 hljs.registerLanguage('python', python);
 hljs.registerLanguage('typescript', typescript);
 hljs.registerLanguage('html', xml);
+hljs.registerLanguage('c', c);
 
 function highlighter(code, language) {
     const validLanguage = hljs.getLanguage(language) ? language : 'plaintext';