{"id":29481484,"url":"https://github.com/LiaScript/docs","last_synced_at":"2025-07-15T00:04:35.243Z","repository":{"id":37811034,"uuid":"123891927","full_name":"LiaScript/docs","owner":"LiaScript","description":"LiaScript documentation course","archived":false,"fork":false,"pushed_at":"2025-03-24T14:27:49.000Z","size":27374,"stargazers_count":19,"open_issues_count":0,"forks_count":16,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-11T03:38:28.039Z","etag":null,"topics":["documentation","education","liascript","liascript-course","markdown","oer"],"latest_commit_sha":null,"homepage":"https://liascript.github.io/course/?https://raw.githubusercontent.com/liaScript/docs/master/README.md","language":"Java","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/LiaScript.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":"citation.md","codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2018-03-05T08:55:52.000Z","updated_at":"2025-03-24T14:27:52.000Z","dependencies_parsed_at":"2025-04-11T03:42:50.206Z","dependency_job_id":null,"html_url":"https://github.com/LiaScript/docs","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/LiaScript/docs","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LiaScript%2Fdocs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LiaScript%2Fdocs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LiaScript%2Fdocs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LiaScript%2Fdocs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/LiaScript","download_url":"https://codeload.github.com/LiaScript/docs/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LiaScript%2Fdocs/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265378135,"owners_count":23755711,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["documentation","education","liascript","liascript-course","markdown","oer"],"created_at":"2025-07-15T00:02:48.364Z","updated_at":"2025-07-15T00:04:35.211Z","avatar_url":"https://github.com/LiaScript.png","language":"Java","funding_links":[],"categories":["Java"],"sub_categories":[],"readme":"\u003c!--\n\nauthor:   André Dietrich\nemail:    LiaScript@web.de\ndate:     11/06/2025\nversion:  32.0.0\nlanguage: en\nnarrator: UK English Female\n\nedit:     true\n\nrepository: https://github.com/LiaScript/docs\n\nlogo:     img/logo.png\n\ncomment:  This document shall provide an entire compendium and course on the\n          development of Open-courSes with [LiaScript](https://LiaScript.github.io).\n          As the language and the systems grows, also this document will be updated.\n          Feel free to fork or copy it, translations are very welcome...\n\nscript:   https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.js\n          https://felixhao28.github.io/JSCPP/dist/JSCPP.es5.min.js\n\nlink:     https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.css\n\nlink:     https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css\n\nimport:   https://raw.githubusercontent.com/liaTemplates/ABCjs/main/README.md\n\nlink:     https://fonts.googleapis.com/css2?family=Noto+Sans+Egyptian+Hieroglyphs\n          https://fonts.googleapis.com/css2?family=Noto+Sans+Ogham\n\nfont:     Noto Sans Egyptian Hieroglyphs, Noto Sans Ogham\n--\u003e\n\nhttps://github.com/user-attachments/assets/7cab2d61-5858-4b62-87bf-0598e44af2e7\n\n# LiaScript\n\n\u003e To see this document as an interactive LiaScript rendered version, click on the\n\u003e following link/badge:\n\u003e\n\u003e [![LiaScript](https://raw.githubusercontent.com/LiaScript/LiaScript/master/badges/course.svg)](https://liascript.github.io/course/?https://raw.githubusercontent.com/liaScript/docs/master/README.md)\n\u003e\n\u003e If you need help, feel free to ask us any questions in the chat:\n\u003e\n\u003e [![Gitter](https://badges.gitter.im/LiaScript/community.svg)](https://gitter.im/LiaScript/community?utm_source=badge\u0026utm_medium=badge\u0026utm_campaign=pr-badge)\n\n\n                            --{{0}}--\nWith LiaScript, we tried to implement an extended\n[Markdown](https://en.wikipedia.org/wiki/Markdown) format that should enable\neveryone to create, share, adapt, translate or correct online courses without\nthe need of being a web-developer. We believe that a language-based approach,\ninstead of a tooling-centered one, provides more flexibility, freedom of\ncreativity, and sustainability. Therefore we tried to develop a simplistic syntax\nthat extends the static Markdown with quizzes, animations, spoken text,\nautomated visualization [ASCII-art](https://en.wikipedia.org/wiki/ASCII_art) and\nmuch more. Everything has been woven around Markdown, so that the content can\nstill be read and interpreted with any kind of editor or Markdown-interpreter.\n\n\n**What is LiaScript?**\n\n* a Markdown dialect for interactive courses and data-driven publishing,\n* everything is implemented in Elm/JavaScript and runs directly within the\n  browser (online),\n* the interpreter itself is also a reader, which allows for storing documents as\n  well as the progress,\n* courses can also be taken offline, since the interpreter is also a progressive\n  web app (PWA), that allows to store documents and progress directly within\n  the browser (locally),\n* everything is private, we do not store any data about the courses nor the\n  users and their progress\n\n\n                            --{{1}}--\nThere are a couple of problems that we currently see in the creation of\n[Open educational resources (OER)](https://en.wikipedia.org/wiki/Open_educational_resources).\nOne of them is isolation, that means people, who want to create content, are\nseldom connected via the applied technologies, instead, they are separated by\nplatforms, authoring tools and used core technologies (programming languages).\nFurthermore, it is not possible to simply grab an educational website/project\nand to adapt its content for another audience. Additionally, it seems to be\nnearly impossible for people without a technical background to simply set up a\nsmall course. Thus, they stuck with Word, PowerPoint, and PDF, since they\nprovide a simple continuation of the static formats people have used before the\ncomputer-era.\n\"_If I want to publish content for the computer, I want my audience to dive in, experiment, simulate, play with the content... but not only read._\"\n\n                              {{1}}\n********************************************************************************\n\n**Goals**\n\n* Simplicity: with a human-centered markup-language, anyone should be enabled to\n  create and modify content.\n* Interactive: the browser is the next operating systems and although content\n  with LiaScript is developed within a \"static\" markup-language it should not be\n  presented that way.\n* Extendability: everything that is not part of LiaScript shall be embeddable\n  and importable.\n* Durability: platforms go down, the development of proprietary software/formats\n  is discontinued, but LiaScript is not hosted on one platform (it can be\n  hosted everywhere) and even without the LiaScript interpreter the content is\n  still readable and interpretable with every editor; you could even print or\n  engrave it on stone or clay. Furthermore, if you use some kind of versioning\n  system (e.g. [git](https://en.wikipedia.org/wiki/Git)) you can refer to any\n  previous version of your course.\n\n********************************************************************************\n\n                           --{{2}}--\nImagine a world where everyone would have the same access to high quality\neducational content for free. Imagine all kind of schoolbooks, technical or\nscientific literature could become open-courSe projects and more interactive,\nwith collaborating teachers and students. Everything that is required is a\nsimple text-editor and a web-browser.\n\n                             {{2}}\n![OER logo](https://upload.wikimedia.org/wikipedia/commons/2/20/Global_Open_Educational_Resources_Logo.svg)\n\n\n## Tools\n\n                           --{{0}}--\nAs already mentioned all you need to work with LiaScript is an text-editor, but\nit can be useful to apply one of the following tools. At least we apply them to\nsee the result of a change within the course document immediately. You will see,\nthat the development of online-courses will speed up, especially if there is no\nneed for memorizing complex point and click sequences.\n\n\u003e \"_Let the editor be your canvas and the keyboard your brush._\"\n\n### Editing\n\n\n                           --{{0}}--\nThere are currently 2 plugins for the [Atom Editor](https://atom.io) and\n[Visual-Studio-Code](https://code.visualstudio.com/Download) available, which\nare intended to ease and simplify the development of online courses with\nLiaScript. Additionally you can use the LiveEditor, an entirely browser based application.\n\n![Atom with liascript-plugins](https://raw.githubusercontent.com/andre-dietrich/liascript-preview/master/preview.gif \"Screencast of the Atom-editor with the liascript-preview and liascript-snippets installed.\")\n\n0. [LiveEditor](https://liascript.github.io/LiveEditor): Fully functional online editor, that looks like CodiMD, but is entirely browser based. With support for uploading images and videos and collaborative editing.\n\n1. [Atom](https://atom.io): This is the free and open and official\n   [GitHub](https://github.com) editor, with lots of plugins for various use\n   cases.\n\n   1. [liascript-preview](https://github.com/andre-dietrich/liascript-preview):\n      Is a tiny previewer that, if it was toggled ( `Alt+L` ), updates the view\n      on your course each time you save your document.\n   2. [liascript-snippets](https://github.com/andre-dietrich/liascript-snippets):\n      If you start typing `lia` in your Markdown document you switch on a fuzzy\n      search, that contains a lot of LiaScript help, examples, and snippets.\n\n   Detailed installation instructions can be found [here](https://liascript.github.io/blog/install-atom-with-liascript/).\n\n2. [Visual-Studio-Code](https://code.visualstudio.com/Download): This is\n   Microsoft's free popular editor with various plugins and extensions.\n\n   1. [liascript-preview](https://marketplace.visualstudio.com/items?itemName=LiaScript.liascript-preview):\n      Is a tiny previewer that, if it was toggled ( `Alt+L` ), updates the view\n      on your course each time you save your document.\n   2. [liascript-snippets](https://marketplace.visualstudio.com/items?itemName=LiaScript.liascript-snippets):\n      If you start typing `lia` in your Markdown document you switch on a fuzzy\n      search, that contains a lot of LiaScript help, examples, and snippets.\n\n   Detailed installation instructions can be found [here](https://liascript.github.io/blog/install-visual-studio-code-with-liascript/).\n\n3. [Visual-Studio-Web](https://github.dev):\n\n   !?[GitHub web-based Editor](https://www.youtube.com/watch?v=-VBolTxLSeU)\n\n   Using the GitHub builtin Web editor, you can install the following extension to preview your course while editing:\n\n   [liascript-preview-web](https://marketplace.visualstudio.com/items?itemName=LiaScript.liascript-preview-web)\n\n\n                             {{1}}\n********************************************************************************\n\n**LiaScript-DevServer:**\n\n                           --{{1}}--\nIf you are used to another editor, you can also start a LiaScript development\nserver locally. It works like the plugin for Atom and updates your course within\nyour browser on every save, but this can also be used to monitor multiple\nprojects. And you can also use it for testing purposes, as if you would deploy\nyour projects.\n\n![liascript-development-server](https://raw.githubusercontent.com/liascript/liascript-devserver/main/pics/navigation.gif \"Screencast of the liascript-development-server while navigating through a folder-structure.\")\n\nGet the project from:\n\n* npmjs: https://www.npmjs.com/package/@liascript/devserver\n* GitHub: https://github.com/LiaScript/LiaScript-DevServer\n\n********************************************************************************\n\n\n                             {{2}}\n********************************************************************************\n\n**CodiLIA:**\n\n                           --{{2}}--\nIf you prefer to work with multiple authors simultaneously, then you should give\n[CodiLIA](https://github.com/liascript/codilia) a try. It is a fork of the\ncollaborative editor\n[CodiMD/HedgeDoc](https://github.com/hedgedoc/hedgedoc/tree/master), but instead\nof a Markdown preview, you will have a LiaScript preview, and you can\nimmediately publish your courses.\n\nProject: https://github.com/liascript/codilia\n\n!?[CodiLIA deploy to Heroku](https://www.youtube.com/watch?v=AERiykLvcoQ \"**Movie:** A HowTo deploy CodiLIA server to Heroku for free.\")\n\n********************************************************************************\n\n### Projects\n\n                           --{{0}}--\nThe easiest way of importing a LiaScript into another website or\n[Learning Management System (LMS)](https://en.wikipedia.org/wiki/Learning_management_system)\nsuch as\n[Moodle](https://en.wikipedia.org/wiki/Moodle),\n[ILIAS](https://en.wikipedia.org/wiki/ILIAS), or\n[OPAL](https://de.wikipedia.org/wiki/OPAL_%28Lernplattform%29), is via importing\nan external website or if possible via an\n[`iframe`](https://en.wikipedia.org/wiki/HTML_element#Frames).\n\n!?[LiaScript embed into OPAL](https://www.youtube.com/watch?v=c97m2guiAeA \"Movie: Screencast of a LiaScript course that is hosted via CodiLIA and imported as an external resource into OPAL.\")\n\n\n                             {{1}}\n********************************************************************************\n\n**LiaScript-Exporter:**\n\n                           --{{1}}--\nHowever, there might be cases where you want to store the progress within the\nLMS. We therefore have developed an experimental exporter, which allows to bundle\nyour entire project as an\n[SCORM](https://en.wikipedia.org/wiki/Sharable_Content_Object_Reference_Model)\ncompliant zip-file that can be imported into most common LMS. Other formats than\nSCORM can be added too, simply write us a mail or create an issue, if you\nrequire another one.\n\n* npmjs: https://www.npmjs.com/package/@liascript/exporter\n* GitHub: https://github.com/liascript/liascript-exporter\n\n********************************************************************************\n\n\n                             {{2}}\n********************************************************************************\n\n**Preview-Lia:**\n\n                           --{{2}}--\nIf you want to refer to your own courses or to foreign ones on your personal\nwebsite or blog, you can make use of our \"preview web component\". This creates\npreview cards, which are updated at client-side, so that there is no need to\nmanually update all information whenever there is a change in the course. Simply\nadd the `script` tag as depicted in the code-snippet and link to your courses\nvia the tag `preview-lia`.\n\n``` html\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003cscript type=\"text/javascript\" src=\"https://liascript.github.io/course/preview-lia.js\"\u003e\u003c/script\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    ...\n    \u003cpreview-lia src=\"https://raw.githubusercontent.com/liaScript/docs/master/README.md\"\u003e\n    \u003c/preview-lia\u003e\n\n    \u003cpreview-lia src=\"https://liascript.github.io/course/?https://raw.githubusercontent.com/liaScript/docs/master/README.md\"\u003e\n    \u003c/preview-lia\u003e\n\n    ...\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n\u003e For more information visit the blog entry:\n\u003e [Markdown just got a new preview tag](https://liascript.github.io/blog/markdown-just-got-a-new-preview-tag)\n\u003e\n\u003e _However, you can also use this to refer to your personal GitHub projects._\n\n********************************************************************************\n\n\n                           --{{3}}--\nLiaScript was originally developed for supporting programming courses for\nembedded systems. You can see an example of the previous eLab remote laboratory\ninstallation.\n\n                             {{3}}\n!?[eLab demonstrator](https://www.youtube.com/watch?v=bICfKRyKTwE \"**Movie:** A review on the historical eLab system, the predecessor to LiaScript.\")\n\n                           --{{4}}--\nNow it is the opposite, our main focus lays in the development of the Markup\nlanguage, but parts of the old systems can still be used. Especially if you want\nto teach programming in (_Java_, _C_, _C++_, _C#_, _Mono_, _Go_ and _Python_).\nThe CodeRunner is an open-source project that enables remote compiling and\nexecution of code. We apply it to teach procedural and object-oriented\nprogramming. You can either host your own server or use our free herokuapp:\n\n       {{4}}\n\u003e **CodeRunner:**\n\u003e\n\u003e * GitHub: https://github.com/liascript/CodeRunner\n\u003e\n\u003e * Try the interactive LiaScript version at:\n\u003e\n\u003e   https://liascript.github.io/course/?https://github.com/liascript/CodeRunner\n\u003e\n\u003e * Or if you want to import this functionality into your course, then add the\n\u003e   following statement into the main header of your LiaScript course:\n\u003e\n\u003e   `import: https://raw.githubusercontent.com/LiaScript/CodeRunner/master/README.md`\n\n\n### Publishing\n\n                           --{{0}}--\nBy now you should have a basic idea of what you can do with LiaScript, but\nprobably not how you can publish your courses. The best way is actually to use\n[GitHub](https://github.com), this way no prior versions of your course get\nlost, and you give others (you can even invite them) the opportunity to\ncontribute to your project.\n\n                           --{{1}}--\nNo further hosting is required, no further compilation step, the JavaScript\ninterpreter of LiaScript does everything else directly within the browser at\nclient-side.\n\n                           --{{2}}--\nAs you can see from the _example_, it is also possible to refer to a specific\nslide. You only have to add a `#` with the number of the slide, or you can add\nthe name of the specific slide as well.\n\n                           --{{3}}--\nYou can also add additional tags to your project to make it discoverable. We\ncurrently use three distinct categories: `liascript` to mark it to be related to\nthe projects, while the others `liascript-course` and `liascript-template` are\nused to distinguish the projects into courses or extension, which can be added\nto courses.\n\n                           --{{4}}--\nThe same way you can also refer to courses that you have put into your\n[DropBox](https://en.wikipedia.org/wiki/Dropbox_%28service%29),\n[ownCloud](https://en.wikipedia.org/wiki/OwnCloud),\n[NextCloud](https://en.wikipedia.org/wiki/Nextcloud), or if you have access to\nsome old-fashioned web-space then you can also store all of your files there. You\nonly have to make them publicly available and to refer to the raw or in other\nwords, the text document. All other sources are loaded relative to this URL.\n\n0. Create a free account at https://github.com\n1. Refer to your projects as via a URL parameter:\n\n   `https://LiaScript.github.io/course/?YOUR_RAW_COURSE_URL.md`\n\n2. Example with reference to a specific slide:\n\n   https://liascript.github.io/course/?https://raw.githubusercontent.com/liaScript/docs/master/README.md#5\n\n3. Make your document discoverable by adding the tags `liascript` and or\n   `liascript-course`, `liascript-template` to make it appear in one of the\n   following GitHub topics:\n\n   - general: https://github.com/topics/liascript\n   - free courses: https://github.com/topics/liascript-course\n   - extensions: https://github.com/topics/liascript-template\n\n   _More information on tagging projects can be found [here](https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/classifying-your-repository-with-topics)._\n\n4. Use other ways of hosting repositories as well (e.g.\n   [DropBox](https://en.wikipedia.org/wiki/Dropbox_%28service%29),\n   [ownCloud](https://en.wikipedia.org/wiki/OwnCloud),\n   [NextCloud](https://en.wikipedia.org/wiki/Nextcloud)).\n\n#### LiaBooks\n\n                           --{{0}}--\nHowever, we have no idea who is using LiaScript elsewhere, so it might be hard\nto find some resources online. From time to time we translate open-books into\nLiaScript and make them more interactive. You can see some of our the\nexperiments at the following URL and use them as a source of inspiration:\n\nhttps://github.com/LiaBooks\n\n![screenshot of the LiaBooks repository](img/screenshot_liabooks.png)\n\n\u003e __Full overview on courses via the topic `liascript-course`:__\n\u003e\n\u003e https://github.com/topics/liascript-course\n\n\n#### LiaTemplates\n\n                           --{{0}}--\nIf you tried out CodeRunner, you will have probably noticed that you can reuse\nfunctionality from different courses, simply by using the keyword `import:`\nwithin the main definition of your LiaScript document. Such a functionality is\ndefined with the help of macros. We will dive deeper into this feature at the\nend of this document, but if you are interested you can inspect some of our\ntemplates, which shall provide self-explaining courses of how to embed and use\nthe implemented macros.\n\nhttps://github.com/LiaTemplates\n\n![screenshot of the LiaTemplates repository](img/screenshot_liatemplates.png)\n\n\u003e __Full overview on extensions via the topic `liascript-template`:__\n\u003e\n\u003e https://github.com/topics/liascript-template\n\n## Markdown-Syntax\n\n                          --{{0}}--\nThis section is intended to give a brief overview on the basic Markdown syntax\nelements. The only difference to common Markdown at this point is, that you can\ndefine meta-information such as author, language, voice, etc. within a\nHTML-comment at the beginning of every document. We will describe all of these\nelements in more detail in [section: Macros](#macros). All of these `macros`\nstart with a single word, which is followed by a colon. If you require more\nspace, like for `comment:` or `link:` you can use multiple lines, but every\nfollowing line has to start with an indentation.\n\nInitial LIA-comment-tag for basic definitions:\n\n``` XML\n\u003c!--\n\nauthor:   Andre Dietrich\n\nemail:    LiaScript@web.de\n\nversion:  0.0.1\n\nlanguage: en\n\nnarrator: US English Female\n\ncomment:  Write a short abstract of your course, that\n          might contain multiple lines and sentences.\n\nscript:   https://javascript_resourse_url\n\nscript:   https://another_javascript_resourse_url\n\nlink:     https://some_css_stuff\n          https://and_some_more_css\n--\u003e\n```\n\n\n                          --{{1}}--\nThe meta-information from your document is later shown within the\ninformation-section as well as within the home-section.\n\n                            {{1}}\n![Screencast of meta-information usage](img/meta-information.gif)\n\n\n\n                          --{{2}}--\nIf you already know Markdown, then you can skip most of the content in this\nsection. However, there are some slight differences that will be marked with a\ntrailing star at the section title.\n\n            {{2}}\n\u003c!-- style=\"font-size: 2em\" --\u003e\n\u003e Something might be different 💫\n\n\n### Structuring\n\n                          --{{0}}--\nA course is structured as any other Markdown document with starting hash-tags,\nwhereby the number of hash-tags is used to define the hierarchy of your\ndocument.\n\n\u003c!-- class=\"translate\"--\u003e\n```markdown\n# Main Title\n\n ...\n\n## Section Title 1\n\n ...\n\n### Subsection Title\n\n ...\n## Section Title 2\n```\n\n                          --{{1}}--\nEvery section is presented separately. In contrast to most Markdown-parsers,\nLiaScript applies a two step-approach. Sections are parsed at first, which means\nthat the parsers searches for patterns as depicted below. Parsing the content of\na section is quite time-consuming, that is why the section-content gets only\nanalyzed, if this specific section should be displayed to the user. However,\nthis happens only at the first appearance, afterwards the resulting view is\nrestored from a local cache.\n\n                            {{1}}\n**Preprocessing pattern:** `## foo bar`\n\n#### Semantic Correct HTML\n\n                          --{{0}}--\nAs mentioned earlier, the preprocessor searches for patterns `## header` at the beginning of a line to identify sections.\nHowever, there might be cases where you want to have multiple different sections on one slide, with different headers.\n[Semantic HTML](https://en.wikipedia.org/wiki/Semantic_HTML) can help us to deal with this, especially the two [HTML5](https://en.wikipedia.org/wiki/HTML_5) tags [`section`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section) and [`article`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article).\n\n``` markdown\n# Slide-Title\n\n\u003csection\u003e\n## Section-Title\n\n...\n\u003c/section\u003e\n\n\u003carticle\u003e\n## Article-Title\n\n...\n\u003c/article\u003e\n```\n\n                          --{{1}}--\nLiaScript will identify these HTML-tags and the content, such that the content within cannot be used as a separator.\nIf you use these two semantic tags, your content is grouped in semantic correct way, which improves the readability if screen-readers are used or keyboard navigation is used.\n\n                          --{{2}}--\nWhen to use which tag might be philosophical question.\nWe can say, if you just want to structure your content with different sub-headers, then use `\u003csection\u003e`.\nIf your content represents a self-contained document, then use `\u003carticle\u003e`.\nHowever, the visually presented result will be the same, such that you could also\nuse a `\u003cdiv\u003e` to structure your content.\n\n\u003csection\u003e\n##### Section-Title\n\n\u003e The `\u003csection\u003e` HTML element represents a generic standalone section of a document, which doesn't have a more specific semantic element to represent it.\n\u003e Sections should always have a heading, with very few exceptions.\n\u003e\n\u003e Source: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section\n\n\u003c/section\u003e\n\n\n\u003carticle\u003e\n##### Article-Title\n\n\u003e The `\u003carticle\u003e` HTML element represents a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable (e.g., in syndication).\n\u003e Examples include: a forum post, a magazine or newspaper article, or a blog entry, a product card, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.\n\u003e\n\u003e Source: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article\n\n\u003c/article\u003e\n\n#### Sub-Titles 💫\n\n                          --{{0}}--\nThere might be some cases, where you want to add further headings quickly. We therefore\napply the following syntax with underlining \"equal signs\" or \"dashes\". In\ncommon Markdown, this alternative syntax is applied to define level-1 and\nlevel-2 headings. We use it to create headings that are one level `=` or two\nlevels `-` below the main heading. However, these subsections will not be part\nof the table of contents, and since their interpretation is slightly different\nto common Markdown, you should use the method presented in the previous section.\n\n\u003c!-- class=\"translate\"--\u003e\n```markdown\n...\n\n## Section Title\n\nLocal Subsection\n================\n\nLocal Sub-SubSection\n--------------------\n```\n\n### Content blocks\n\n                          --{{0}}--\nHow would you separate paragraphs or other content elements from each other, if\nyou only have a type-writer? The easiest way is a spatial separation, and in\nMarkdown this is done via an empty line. Thus, whenever you have blocks such as\nparagraphs, enumerations, or tables, it is common practice to separate them via\na newline. This makes it easier for you to edit and structure your course, and\nit prevents the interpreter from too much work.\n\n\u003c!-- class=\"translate\"--\u003e\n``` markdown\nThis is a paragraph that consist only of one line.\n\nHere comes another paragraph\nwith multiple lines.\nAnd multiple sentences.\n```\n\n### Text-Formatting 💫\n\n\n                            --{{0}}--\nHow does text-highlighting work in a text file and thus within a paragraph?\nWell, Markdown defines some basic characters that can be used to surround a word\nor a collection of words. We tried to use the GitHub flavored Markdown style for\nsimple formatting, thus simply use multiple asterisks or underscores to mark\ncertain parts of a text.\n\n* `*italic*` -\u003e *italic*\u003c!-- class=\"notranslate\"--\u003e\n* `**bold**` -\u003e **bold**\u003c!-- class=\"notranslate\"--\u003e\n* `***bold and italic ***` -\u003e ***bold and italic ***\u003c!-- class=\"notranslate\"--\u003e\n* `_also italic_` -\u003e _also italic_\u003c!-- class=\"notranslate\"--\u003e\n* `__also bold__` -\u003e __also bold__\u003c!-- class=\"notranslate\"--\u003e\n* `___also bold and italic___` -\u003e ___also bold and italic___\u003c!-- class=\"notranslate\"--\u003e\n* `~strike~` -\u003e ~strike~\u003c!-- class=\"notranslate\"--\u003e\n\n\n                          --{{1}}--\nWe define some additions to common Markdown, such as underline and superscript,\nwhich can be defined with the following syntax:\n\n                            {{1}}\n* `~~underline~~` -\u003e ~~underline~~\u003c!-- class=\"notranslate\"--\u003e\n* `~~~strike and underline~~~` -\u003e ~~~strike and underline~~~\u003c!-- class=\"notranslate\"--\u003e\n* `^superscript^` -\u003e ^superscript^\u003c!-- class=\"notranslate\"--\u003e\n\n\n#### Combinations\n\n                          --{{0}}--\nAs you can see from the examples, you can combine and nest all elements freely.\n\n\n* `**bold _bold italic_**` -\u003e **bold _bold italic_**\u003c!-- class=\"notranslate\"--\u003e\n* `**~bold strike~ ~~bold underline~~**` -\u003e **~bold strike~ ~~bold underline~~**\u003c!-- class=\"notranslate\"--\u003e\n* `*~italic strike~ ~~italic underline~~*` -\u003e *~italic strike~ ~~italic underline~~*\u003c!-- class=\"notranslate\"--\u003e\n\n#### Typography\n\n                          --{{0}}--\nIt is now possible within a LiaScript Markdown to apply sequences of dashes for typography. A sequence of dashes is now translated into:\n\n1. single dash `-` --\u003e Hyphen or minus sign -\n2. double dash `--` --\u003e En dash --\n3. triple dash `---` --\u003e Em dash ---\n\n                          --{{1}}--\nAn Ellipsis is indicated by a sequence of three dots:\n\n                            {{1}}\n`...` will be translated to the Unicode symbol ...\n\n##### Quotes\n\n                          --{{0}}--\nAdditionally single and double quotes are translated into their typographical counterparts, based on the defined [`language`](#language) in the header of the course.\nGerman, French, English or Welsh will be translated into different Unicode symbols.\n\n\u003c!-- style=\"font-size: 20px\" --\u003e\n`\"That's a 'magic' shoe.\"` --\u003e “That’s a ‘magic’ shoe.”\n\nApplied quote translation as defined here: https://en.wikipedia.org/wiki/Quotation_mark\n\n                          --{{1}}--\nIf you want o use the original characters, you will have to escape them, as shown also in the [next section](#escape-characters):\n\n      {{1}}\n`\\\"` --\u003e \\\"\\\n`\\'` --\u003e \\'\n\n                            {{2}}\n\u003csection\u003e\n\n                          --{{2}}--\nAs an alternative you can still use the quote tag `\u003cq\u003e` for double quotations.\nThis will still use the language definition for that document, but you can also overwrite this per markdown block or quote:\n\n``` markdown\n\u003cq\u003eThat's a 'magic' shoe.\u003c/q\u003e\\\n\u003cq lang=\"de\"\u003eDas ist ein magischer Schuh.\u003c/q\u003e\n\n---\n\n\u003c!-- lang=\"fr\" --\u003e\nEt voici un autre example: \u003cq\u003eC'est une chaussure magique.\u003c/q\u003e\n```\n\n\u003cq\u003eThat's a 'magic' shoe.\u003c/q\u003e\\\n\u003cq lang=\"de\"\u003eDas ist ein magischer Schuh.\u003c/q\u003e\n\n---\n\n\u003c!-- lang=\"fr\" --\u003e\nEt voici un autre example: \u003cq\u003eC'est une chaussure magique.\u003c/q\u003e\n\n\u003c/section\u003e\n\n#### Escape Characters\n\n                          --{{0}}--\nIf you want to use asterisks, hash-tags, or other syntax elements within your\ndocument without applying their functionality, then you can escape or in other\nwords indicate them with a starting backslash. If you want to escape a\nbackslash, you will have to write two subsequent backslashes. But you do not\nhave to use it, if there is only one asterisk within a line, this will be\ninterpreted as a single character. So you will have to apply this kind of\nescaping only to prevent misunderstandings between you and the interpreter.\n\n\n``` markdown\n\\*, \\~, \\_, \\#, \\{, \\}, \\[, \\], \\|, \\`, \\$, \\@, \\\\, \\\u003c, \\\u003e, \\\", \\'\n```\n\n**Result:** \\*, \\~, \\_, \\#, \\{, \\}, \\[, \\], \\|, \\`, \\$, \\@, \\\\, \\\u003c, \\\u003e, \\\", \\'\n\n### Symbols \u0026 Unicode 💫\n\n                          --{{0}}--\nOne thing that we missed in standard Markdown, was an implementation for arrows.\nThe verbatim text shows, how arrows are defined in our Markdown implementation with\ntheir result on the right.\n\n`-\u003e` -\u003e, `-\u003e\u003e` -\u003e\u003e, `\u003e-\u003e` \u003e-\u003e, `\u003c-` \u003c-, `\u003c-\u003c` \u003c-\u003c,\n`\u003c\u003c-` \u003c\u003c-, `\u003c-\u003e` \u003c-\u003e, `=\u003e` =\u003e, `\u003c=` \u003c=, `\u003c=\u003e` \u003c=\u003e\n\n`--\u003e` --\u003e, `\u003c--` \u003c--, `\u003c--\u003e` \u003c--\u003e, `==\u003e` ==\u003e, `\u003c==` \u003c==, `\u003c==\u003e` \u003c==\u003e\n\n`~\u003e` ~\u003e, `\u003c~` \u003c~\n\n                          --{{1}}--\nBut you can also use some basic smileys. We will try to extend this partial\nsupport in the future.\n\n                            {{1}}\n`:-)` :-), `;-)` ;-), `:-D` :-D, `:-O` :-O, `:-(` :-(, `:-|` :-|,\n`:-/` :-/, `:-P` :-P, `:-*` :-*, `:')` :'), `:'(` :'(\n\n                          --{{2}}--\nHowever, since LiaScript accepts\n[Unicode](https://en.wikipedia.org/wiki/Unicode), you can also copy and paste\nany kind of character including [emojis](https://emojipedia.org).\n\n\n### References\n\n\u003e The next section shows how external resources can be referenced and integrated.\n\n\n#### Simple Links\n\n                          --{{0}}--\nThere are two ways of adding links to a Markdown document, either by inlining\nthe URL directly or you can name it (as shown in listing 2), by applying the\ntypical brackets and parenthesis notation, the optional information is put in\ndouble quotes at the end of the URL. This optional information is used as a\ntitle attribute, and it is shown, when the user hovers the link with the mouse.\n\n\n1. Example of an URL-link -\u003e http://goo.gl/fGXNvu\n\n   text-formatting can be applied also `*** http://goo.gl/fGXNvu ***` -\u003e\n   *** http://goo.gl/fGXNvu ***\n\n2. Naming the link (`[title](http://goo.gl/fGXNvu \"optional info\")`) -\u003e\n   [title](http://goo.gl/fGXNvu \"optional info\")\n\n3. For internal navigation you can refer to the slide number or to title with\n   a starting `#`\n\n   * `[next slide](#18)` -\u003e [next slide](#18)\n   * `[next slide](#preview-lia-💫)` -\u003e [next slide](#preview-lia-💫)\n   * If your internal link includes parentheses or other characters, you can\n     also use percent-encoding. An opening parentheses would then be written as\n     `%28` and a closing one as `%29`.\n\n     For more information visit:\n     https://developer.mozilla.org/en-US/docs/Glossary/percent-encoding\n\n##### Preview-Lia 💫\n\n                          --{{0}}--\nLiaScript has an advanced preview link, that will load the remote course and\nparse the meta-information such as title, version, comment, logo, email, tags,\nform your main HTML-comment at the top of your document. To do this, you will\nhave to use `[preview-lia]` as the title of your link, which is followed by the\nraw URL of your course document.\n\n\n`[preview-lia](https://raw.githubusercontent.com/LiaScript/docs/master/README.md)`\n\n[preview-lia](https://raw.githubusercontent.com/LiaScript/docs/master/README.md)\n\n\n                          --{{1}}--\nYou can use this technique also to create previews for other courses on your\npersonal website or for other GitHub projects, as it was described in section\n[Projects](#projects). For more information follow the link:\n\n{{1}} https://liascript.github.io/blog/markdown-just-got-a-new-preview-tag/\n\n\n##### QR-Codes 💫\n\n                          --{{0}}--\nSometimes it might be required to have both, a link and a visual representation\nof it as an __QR-Codes__. Similar to previews, you simply name your link\n`qr-code`:\n\n\n* Syntax: `[qr-code](https://LiaScript.github.io)`\n* Example:\n\n  [qr-code](https://LiaScript.github.io)\n\n                          --{{1}}--\nYou can add further information to your link by adding a title. Markdown is also\nallowed within the link title. In case of an image or media link, the title will\nbe used as a subtitle and displayed accordingly.\n\n                            {{1}}\n* Syntax: `[qr-code](https://LiaScript.github.io \"Checkout the LiaScript website or the __[blog](https://liascript.github.io/blog/)__\")`\n* Example:\n\n  [qr-code](https://LiaScript.github.io \"Checkout the LiaScript website or the __[blog](https://liascript.github.io/blog/)__\")\n\n\n##### eMail \u0026 Telephone 💫\n\n      --{{0}}--\nThese are two additional link types that you can also use within the `\u003ca\u003e` tag, but LiaScript supports them natively.\n\n        {{1}}\n* __mailto:__\n\n  `[Write me a Mail](mailto:LiaScript@web.de)` --\u003e [Write me a Mail](mailto:LiaScript@web.de)\n\n  `[LiaScript\\@web.de](mailto:LiaScript@web.de)` --\u003e [LiaScript\\@web.de](mailto:LiaScript@web.de)\n\n      --{{1}}--\n  The `mailto` link type does not need to be explained.\n  On most modern systems, clicking on such a link will open your email client and insert the email address after the colon directly into the recipient address field.\n  Since the __\\@__ symbol is used for [macro](#macro) calls, this has to be escaped at the moment.\n\n        {{2}}\n* __tel:__\n\n  `[Call me](tel:+49-12345-67890)` --\u003e [Call me](tel:+49-12345-67890)\n\n  `[+49-12345-67890](tel:+49-12345-67890)` --\u003e [+49-12345-67890](tel:+49-12345-67890)\n\n      --{{2}}--\n  The `tel` link type is lesser known and has been introduced for mobile phones.\n  Clicking on such a link will trigger the dial dialog, allowing you to call the pre-set number without any need for copy and paste.\n\n\n#### Images 💫\n\n                          --{{0}}--\nImages are defined similar to links, but they are indicated with a starting\nexclamation mark.\n\n                          --{{1}}--\nThe name of the link or the alt-text is not wasted, since it is not displayed\nanymore. Instead, it is displayed, if the image cannot be loaded for some\nreasons, and it is used by screen readers to give visually impaired people a\nhint, of what will be visible on the image. So please, don't leave it empty.\n\n                          --{{2}}--\nThe URL can be either relative to your Markdown document or it can be absolute,\nwhich means it is pointing to an external resource.\n\n                          --{{3}}--\nThe optional title in LiaScript is not only used as a title attribute, instead\nit is used as a real sub-title for all media links.\n\n\u003c!-- style=\"font-size: 1.4em\" --\u003e\n**Image-notation: !\\[{1}{`alt-text`}\\]({2}{url} {3}{\"optional sub-title\"})**\n\n                            {{2}}\n* relative URL: `![Beautiful Lenna](img/lenna.jpg)`\n\n  ![Beautiful Lenna](img/lenna.jpg)\n\n* absolute URL: `![Annunciation of ...](https://upload.wiki...jpg)`\n\n  ![Annunciation of the birth of Christ](https://upload.wikimedia.org/wikipedia/commons/5/51/Leonardo_da_Vinci_Annunciation.jpg \"{3}{*Annunciation c. 1472–1476*: is thought to be Leonardo's earliest complete work}\")\n\n\n                          --{{4}}--\nNote, that LiaScript is smart enough to scale your images to the optimal size.\nIf your image is smaller than the current maximal applicable width, it is shown\nin full size. If it is larger, than it is scaled to fit in width and also in\nheight. You can further click on all images to open them as modal and if the\nimage is quite large, such as Leonardo's painting, then you can also zoom and\ninspect it, by hovering with the mouse or thumb.\n\n                         --{{5}}--\nAdditionally, if you start a paragraph with an image, LiaScript expects it to be\na floating object, which is depicted with a maximal size of 50% of your\nview-port, if it is not smaller than that.\n\n                           {{5}}\n********************************************************************************\n\n``` markdown\n![Beautiful Lenna](img/lenna.jpg \"subtitles are allowed too\")\nLorem ipsum dolor sit amet, consectetur adipisicing elit, ...\n\n```\n\n---\n\n![Beautiful Lenna](img/lenna.jpg \"subtitles are allowed too\") Lorem ipsum dolor\nsit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut\nlabore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud\nexercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute\nirure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat\nnulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa\nqui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet,\nconsectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et\ndolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco\nlaboris nisi ut aliquip ex ea commodo consequat.\n\n\n********************************************************************************\n\n##### Galleries 💫\n\n                          --{{0}}--\nHow would you interpret a paragraph full of images? We thought that the only\nreasonable depiction of this could be a gallery.\n\n``` markdown\n![img1](url) ![img2](url) ![img3](url)\n![img4](url)\n![img5](url)\n```\n\n                          --{{1}}--\nAnd we like this idea... You can click on every image and inspect it also with\nthe zooming feature.\n\n                            {{1}}\n![Portrait of a lady](https://upload.wikimedia.org/wikipedia/commons/thumb/c/c3/Leonardo_da_Vinci_%28attrib%29-_la_Belle_Ferroniere.jpg/723px-Leonardo_da_Vinci_%28attrib%29-_la_Belle_Ferroniere.jpg \"La Belle Ferronnière, c. 1490–1498\")\n![Lady with an Ermine](https://upload.wikimedia.org/wikipedia/commons/thumb/f/f9/Lady_with_an_Ermine_-_Leonardo_da_Vinci_-_Google_Art_Project.jpg/761px-Lady_with_an_Ermine_-_Leonardo_da_Vinci_-_Google_Art_Project.jpg \"Lady with an Ermine, c. 1489–1491, Czartoryski Museum, Kraków, Poland\")\n![Mona Lisa](https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/687px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg \"Mona Lisa or La Gioconda c. 1503–1516, Louvre, Paris\")\n![Virgin and Child ](https://upload.wikimedia.org/wikipedia/commons/thumb/4/44/Leonardo_da_Vinci_-_Virgin_and_Child_with_St_Anne_C2RMF_retouched.jpg/764px-Leonardo_da_Vinci_-_Virgin_and_Child_with_St_Anne_C2RMF_retouched.jpg \"The Virgin and Child with Saint Anne, c. 1501–1519, Louvre, Paris\")\n![The Death of Leonardo da Vinci](https://upload.wikimedia.org/wikipedia/commons/thumb/8/8a/Francois_Ier_Leonard_de_Vinci-Jean_Auguste_Dominique_Ingres.jpg/1276px-Francois_Ier_Leonard_de_Vinci-Jean_Auguste_Dominique_Ingres.jpg \"The Death of Leonardo da Vinci, by Ingres, 1818\")\n\n\n#### Audio 💫\n\n                          --{{0}}--\nIf an exclamation mark indicates visual content, why not using a question mark\nto indicate auditive content. (From our perspective it resembles an ear.)\nEverything is similar to images and the URLs can be either relative or absolute.\n\n* Syntax: `?[a horse](https://www.w3schools.com/html/horse.mp3 \"hear a horse\")`\n* Example:\n\n  ?[a horse](https://www.w3schools.com/html/horse.mp3 \"hear a horse\")\n\n\n                          --{{1}}--\nAdditionally, you can also directly reference music from the\n[SoundCloud](https://Soundcloud.com) website or from\n[Music.YouTube](https://music.youtube.com). The associated song will be\nautomatically embedded for you.\n\n                            {{1}}\n* Syntax: `?[soundcloud](https://soundcloud.com/glennmorrison/beethoven-moonlight-sonata)`\n* Example:\n\n  ?[soundcloud](https://soundcloud.com/glennmorrison/beethoven-moonlight-sonata)\n\n\n#### Movies 💫\n\n                          --{{0}}--\nImages are marked with a starting exclamation mark before the link, audio by a\nstarting question mark and movies are made of images and sound, that is why you\ncombine both marks `!?`. Defining resources this way shows at least the links\ncorrectly in other Markdown parsers or on GitHub. There is baked-in support for\n[YouTube](https://YouTube.com), [Vimeo](https://Vimeo.com),\n[PeerTube](https://peertube.tv), [DailyMotion](https://www.dailymotion.com) and\n[TeacherTube](https://TeacherTube.com), which means that you only have to\ninclude the link and the resource will be embedded appropriately.\n\n**Movie-notation: `!?[alt-text](movie-url)`**\n\n- YouTube: `!?[The Future of Programming](https://www.youtube.com/watch?v=8pTEmbeENF4)`\n\n  !?[The Future of Programming](https://www.youtube.com/watch?v=8pTEmbeENF4)\n\n- relative path: `!?[Something about math](vid/math.mp4)`\n\n  !?[Something about math](vid/math.mp4)\n\n- \u003e # List of supported Video Platforms\n  \u003e\n  \u003e * [DailyMotion](https://www.dailymotion.com)\n  \u003e * [PeerTube](https://peertube.tv)\n  \u003e * [TeacherTube](https://TeacherTube.com)\n  \u003e * [Video TU-Freiberg](https://video.tu-freiberg.de)\n  \u003e * [Vimeo](https://Vimeo.com)\n  \u003e * [YouTube](https://YouTube.com)\n\n\n                          --{{1}}--\nIf you required more control over your video, such as autoplay, muted,\nstart-time, and probably also size and colors, the you can also apply custom\nstyling rules, then you should take a look at the following section:\n\n                            {{1}}\n[Customizing-Multimedia](#Customizing-Multimedia)\n\n\n#### So what is left?? 💫\n\n                          --{{0}}--\nIf it is something else that you want to embed something else from another\nwebsite, then you should try out the link syntax with two starting question\nmarks. This means, LiaScript will try to use the [oEmbed](https://oembed.com)\nservice, which is offered by a couple of websites. If this succeeds, this will\nembed only a specific part. If it fails, then LiaScript will at least try to\nembed the website via an `iframe`.\n\nExamples:\n\n* [SketchFab](https://sketchfab.com): `??[ear model](https://sketchfab.com/3d-models/ear-anatomy-468e2039bde34a3fabb9e90bff9cd56b)`\n\n  ??[ear model](https://sketchfab.com/3d-models/ear-anatomy-468e2039bde34a3fabb9e90bff9cd56b)\n\n* [StoryMaps](https://storymaps.arcgis.com): `??[presentation](https://storymaps.arcgis.com/stories/583f8b48a857442cb8d27411c93a9664)`\n\n  ??[presentation](https://storymaps.arcgis.com/stories/583f8b48a857442cb8d27411c93a9664)\n\n* [CircuitJS](https://www.falstad.com/circuit): `  ??[Simulation: Non-inverting Amplifier](https://www.falstad.com/circuit/circuitjs.html?startCircuit=amp-noninvert.txt)`\n\n  ??[Simulation: Non-inverting Amplifier](https://www.falstad.com/circuit/circuitjs.html?startCircuit=amp-noninvert.txt)\n\n\n##### Galleries \\#2 💫\n\n                          --{{0}}--\nWhat you have seen previously with images is also possible with any kind of\nmultimedia link. Simply put everything into one paragraph and LiaScript will\nautomatically generate a gallery for you:\n\n``` markdown\n![img](url) ?[audio](url) !?[movie](url)\n??[something else](url)\n??[something else](url)\n```\n\n![Photo of Jupiter](https://upload.wikimedia.org/wikipedia/commons/thumb/3/3d/Latest_NASA_photo_of_Jupiter_taken_this_Sunday_by_the_Juno_probe.png/1280px-Latest_NASA_photo_of_Jupiter_taken_this_Sunday_by_the_Juno_probe.png)\n?[a horse](https://www.w3schools.com/html/horse.mp3 \"hear a horse\")\n!?[Fun with Tables](https://www.youtube.com/watch?v=Y_7q9T5jYHo)\n??[VTK VolumeContour](https://kitware.github.io/vtk-js/examples/VolumeContour/index.html)\n??[Circuit simulation](https://www.falstad.com/circuit/circuitjs.html?startCircuit=majority.txt)\n??[Bust of Nefertiti](https://sketchfab.com/3d-models/bust-of-nefertiti-foia-results-8c60faca6152405e9d35784efa8b9aa1)\n\n\n## Markdown-Blocks\n\n                          --{{0}}--\nSo far we had introduced Markdown only on a tiny level, which means, by now you\nshould know how to emphasize words and phrases within a paragraph, how to add\nimages and how you can use references to point to internal or external\nresources. But, all we did so far is to work with **paragraphs**. But as pointed\nout in the quote below, Markdown can do even more.\n\n\u003e ... Markdown’s syntax is comprised entirely of punctuation characters, which\n\u003e punctuation characters have been carefully chosen so as to look like what\n\u003e they mean. E.g., asterisks around a word actually look like \\*emphasis\\*.\n\u003e Markdown lists look like, well, lists. Even blockquotes look like quoted\n\u003e passages of text, assuming you’ve ever used email.\n\u003e\n\u003e -- Markdown philosophy by\n\u003e [John Gruber](https://daringfireball.net/projects/markdown/syntax#philosophy)\n\n                          --{{1}}--\nWithin the following part we will learn how to deal with Markdown blocks and\nhow to format your content to define the following elements:\n\n\u003c!-- --{{1}}--\nlist, blockquotes, tables, custom HTML, horizontal rules and dealing with\ncode-blocks.\n --\u003e\n\n       {{1}}\n1. Lists\n2. Blockquotes\n3. Tables\n4. HTML\n5. Code-Snippets\n6. Horizontal rules\n\n### Lists\n\n                          --{{0}}--\nThe GitHub-flavored Markdown supports two types of lists, ordered and unordered\nones, and so does LiaScript. If you every used a typewriter then the following\nsyntax for lists would look natural to you. The only thing that matters here is\nthe correct indentation.\n\n\u003e **Use spaces for correct indentation!** Tabs are allowed too, but might be\n\u003e confusing, since editors tend to use varying lengths from 2 to 4 spaces to\n\u003e display them...\n\n#### Unordered Lists\n\n                          --{{0}}--\nTo define an unordered list, starting asterisks `*`, pluses `+`, and dashes `-`\ncan be used and mixed. If one point has more than one line, you can also use\nmultiple lines to define paragraphs. All other Markdown elements, you will get\nto know, can be included in the same way.\n\n**Markdown-Syntax:**\n\n\u003c!-- class=\"translate\"--\u003e\n``` markdown\n* alpha\n+ **beta**\n- gamma\n  and delta\n\n  new Paragraph\n\n  - and another\n  - important list\n\n- epsilon\n```\n\n                          --{{1}}--\nAs you can see from the result, you can apply all Markdown styling elements\nfreely. The starting characters will be interpreted equally, thus it makes no\ndifference, if you use asterisks, pluses and dashes. To improve the readability\nof your document, we would recommend to stick with one format for every level.\nStarting with asterisks on the first level and dashes within the second level,\netc.\n\n                            {{1}}\n********************************************************************************\n\n**Result:**\n\n* alpha\n+ **beta**\n- gamma\n  and delta\n\n  new Paragraph\n\n  - and another\n  - important list\n\n- epsilon\n\n********************************************************************************\n\n                           {{2}}\n\u003e __Note:__\n\u003e At the moment it is required to separate blocks by at least one empty line.\n\u003e The following example will be interpreted as a single paragraph:\n\u003e\n\u003e ``` markdown\n\u003e * this is one single\n\u003e   - paragraph with a dash.\n\u003e ```\n\u003e\n\u003e Whereby the following will result in a bullet point with another one nested\n\u003e\n\u003e ``` markdown\n\u003e * separate paragraph\n\u003e\n\u003e   - and this is a separate sub listing\n\u003e ```\n\n\n#### Ordered Lists 💫\n\n                          --{{0}}--\n\nOrdered lists start with a number and a dot. As you can see from the example,\nthe numbering is important. In contrast to the GitHub flavored Markdown or the\noriginal Markdown, where the list below would result in **two** separate lists,\nand the numbering for every list would start at 1, ignoring your numbering\norder. With the LiaScript interpretation you can separate your lists, add more\nexplanations in between, or use animations to make certain parts appear or\ndisappear.\n\n\n**Markdown-Syntax:**\n\n\u003c!-- class=\"translate\"--\u003e\n``` markdown\n0. alpha\n1. **beta**\n\nSomething else ...\n\n3. * gamma\n   * delta\n   * and epsilon\n2. probably zeta\n```\n\n**Result:**\n\n0. alpha\n1. **beta**\n\nSomething else ...\n\n3. * gamma\n   * delta\n   * and epsilon\n2. probably zeta\n\n\n### Blockquotes\n\n                          --{{0}}--\nIf you, from time to time, reply to emails, than the following notation will\nlook quite familiar to you. To make use of quoted text, simply start a line with\na `\u003e` greater than character.\n\n**Markdown-Syntax:**\n\n\u003c!-- class=\"translate\"--\u003e\n``` md\n\u003e This was said some time ago ...\n\u003e\n\u003e\u003e This was said even longer ago,\n\u003e \u003e I guess ...\n\u003e\n\u003e * aleph\n\u003e * beth\n```\n\n                          --{{1}}--\nAs you can see from the example, all Markdown elements can be used within a\nblockquote and vice versa. Everything you have learned so far can be easily\ncombined, it could also be a gallery or an embedded object...\n\n\n                            {{1}}\n********************************************************************************\n\n**Result:**\n\n\u003e This was said some time ago ...\n\u003e\n\u003e\u003e This was said even longer ago,\n\u003e \u003e I guess ...\n\u003e\n\u003e * aleph\n\u003e * beth\n\n********************************************************************************\n\n#### Citations 💫\n\n                          --{{0}}--\nBlockquotes are often used for citations, and so do we. You can use the\nfollowing pattern to mark a blockquote as a citation. Simply use two paragraphs\nwithin a blockquote and start the second one with two dashes `--`.\n\n**LiaScript-Syntax:**\n\n\u003c!-- class=\"translate\"--\u003e\n```\n\u003e “Live as if you were to die tomorrow.\n\u003e Learn as if you were to live forever.”\n\u003e\n\u003e -- Mahatma Gandhi\n```\n\n                          --{{1}}--\nThe resulting blockquote looks slightly different. Furthermore, the paragraph\nfollowed by dashes is put into and HTML `cite`-tag.\n\n             {{1}}\n\u003e “Live as if you were to die tomorrow.\n\u003e Learn as if you were to live forever.”\n\u003e\n\u003e -- Mahatma Gandhi\n\n\n                          --{{2}}--\nYou can use this syntax, with starting dashes, everywhere within a LiaScript\ndocument and your corresponding paragraph it will be rendered within a\n`cite`-tag. But, at this time it will only affect the representation of\nblockquotes. We are not sure yet, how this can also be applied to images,\ntables, lists, etc.\n\n             {{2}}\n\u003c!-- class=\"translate\"--\u003e\n``` md\nlorem ipsum ....\n\n-- Some more citations\n```\n\n### Tables\n\n                          --{{0}}--\nTables, _as we hope_, are easy to interpret and to create. Simply use horizontal\nrules to separate cells. The header is always defined by the first line, while\nthe second line is used to separate the table header from the body visually and\nto define the column alignment.\n\n\n**Markdown-format:**\n\n\u003c!-- class=\"translate\"--\u003e\n``` markdown\n| Tables               |      Are      |  Cool |\n| -------------------- |:-------------:| -----:|\n| *** columns 3 is *** | right-aligned | $1600 |\n| ** column 2 is **    |   centered    |   $12 |\n| * zebra stripes *    |   are neat    |    $1 |\n```\n\n                          --{{1}}--\nAs you can see in the result, you can sort tables, by clicking onto the icon\nthat appears on the right of every header cell. A table will then be either\nsorted ascending, descending, or not sorted, which means your initial row order\nwill be restored.\n\n                            {{1}}\n********************************************************************************\n\n**Result:**\n\n| Tables               |      Are      |  Cool |\n| -------------------- |:-------------:| -----:|\n| *** columns 3 is *** | right-aligned | $1600 |\n| ** column 2 is **    |   centered    |   $12 |\n| * zebra stripes *    |   are neat    |    $1 |\n\n********************************************************************************\n\n                          --{{2}}--\nThe position of the colon defines whether a column should be centered, aligned\nto the left or to the right. By default, if you do not use colons, all columns\nare aligned to the left.\n\n\n          {{2}}\n* centered --\u003e `:---:`\n* right --\u003e `---:`\n* left --\u003e `:---` or `---` (default)\n\n\n#### Tables \u003c--\u003e Data (Demo) 💫\n\n                          --{{0}}--\nBut why stopping here? A table, in many cases, is just a representation of a\ndataset. If so, why not simply visualizing it accordingly and plot a graph,\ndisplay a chart or a map, or whatever fits the most for your data. At the moment\nwe apply simple rules to identify the nature of your dataset and thus choose a\nvisual representation.\n\n\u003e For more details have a look at section [Fun With Tables](#fun-with-tables),\n\u003e which provides and extensive overview onto all supported representation\n\u003e schemes.\n\n                          --{{1}}--\nThe easiest and probably most obvious representation of a simple plot, would be\nthe following. A header with some names and columns that contain numbers. The\nfirst column is interpreted as the main column and thus defines the \u003cvar\u003ex\u003c/var\u003e\nvalues, the rest is up to you. A cell is then only associated with a number, if\nthe first \"word\", _sequence of characters separated by a space_, can be parsed\nas a number. The `0km` within this example gets ignored. So if you want certain\nvalues to be ignored, simply attach something directly to the number, or add a\ncharacter in front of it.\n\n\n          {{1}}\n``` md\n| x's |  some y's  |                  dist |\n| --- |:----------:| ---------------------:|\n| 1   |    1 \\$    |                 16 km |\n| 2.2 |    2 \\$    |                 12 km |\n| 3.3 |    5 \\$    |                  1 km |\n| 4   | -12.333 \\$ | 0km _will be ignored_ |\n```\n\n                          --{{2}}--\nLiaScript identifies this pattern and automatically adds a button above the\ntable, which allows to switch between the table and the \"line chart\"\nrepresentation. You can modify the chart interactively and even download the\nresulting image.\n\n          {{2}}\n\u003c!-- class=\"notranslate\"--\u003e\n| x's |  some y's  |                  dist |\n| --- |:----------:| ---------------------:|\n| 1   |    1 \\$    |                 16 km |\n| 2.2 |    2 \\$    |                 12 km |\n| 3.3 |    5 \\$    |                  1 km |\n| 4   | -12.333 \\$ | 0km _will be ignored_ |\n\n\n                            --{{3}}--\nA function cannot possess different \u003cvar\u003ey\u003c/var\u003e-values for one\n\u003cvar\u003ex\u003c/var\u003e-value, thus, if you have two or more equal \u003cvar\u003ex\u003c/var\u003e-values, the\nresulting plot will be a scatter plot.\n\n           {{3}}\n``` markdown\n| x's |  some y's  |  dist |\n| --- |:----------:| -----:|\n| 1   |    1 \\$    | 16 km |\n| 2.2 |    2 \\$    | 12 km |\n| 3.3 |    5 \\$    |  1 km |\n| 4   | -12.333 \\$ | -5 km |\n| 4   |            |     1 |\n```\n\n           {{3}}\n\u003c!-- class=\"notranslate\"--\u003e\n| x's |  some y's  |  dist |\n| --- |:----------:| -----:|\n| 1   |    1 \\$    | 16 km |\n| 2.2 |    2 \\$    | 12 km |\n| 3.3 |    5 \\$    |  1 km |\n| 4   | -12.333 \\$ | -5 km |\n| 4   |            |     1 |\n\n\n                                   --{{4}}--\nLast but not least _bar-charts_. If the first column contains at least one cell,\nthat cannot be parsed as a number while the others do have, then this table gets\ninterpreted as a bar-chart. The first column thus defines your set of groups. It\nis now also possible to sort your table according to different columns, and to\nsee this ordering also within the bar-chart representation.\n\n\n                               {{4}}\n```markdown\n| Animal          | weight in kg | Lifespan years | Mitogen |\n| --------------- | ------------:| --------------:| -------:|\n| Mouse           |        0.028 |             02 |      95 |\n| Flying squirrel |        0.085 |             15 |      50 |\n| Brown bat       |        0.020 |             30 |      10 |\n| Sheep           |           90 |             12 |      95 |\n| Human           |           68 |             70 |      10 |\n```\n\n                               {{4}}\n\u003c!-- class=\"notranslate\"--\u003e\n| Animal          | weight in kg | Lifespan years | Mitogen |\n| --------------- | ------------:| --------------:| -------:|\n| Mouse           |        0.028 |             02 |      95 |\n| Flying squirrel |        0.085 |             15 |      50 |\n| Brown bat       |        0.020 |             30 |      10 |\n| Sheep           |           90 |             12 |      95 |\n| Human           |           68 |             70 |      10 |\n\n\n                          --{{5}}--\nAs mentioned earlier, this is only a brief introduction into this topic. So\ncheck out section [Fun With Tables](#fun-with-tables) for a complete overview.\n\n#### Editing\n\n                          --{{0}}--\nEditing tables might seem tedious, but actually it is not. There is a huge\nnumber of plugins for different editors that you can use, which do the\nformatting for you. You can use them to quickly navigate through your cells, and\nsome even allow sorting.\n\n![Demo of a table editor](img/table-editing.gif)\n\n**Editors: Plugins**\n\n* Atom: [markdown-table-editor](https://atom.io/packages/markdown-table-editor)\n* VS-Code: [Markdown Table](https://marketplace.visualstudio.com/items?itemName=TakumiI.markdowntable)\n* Obsidian: [Advanced Tables](https://github.com/tgrosinger/advanced-tables-obsidian)\n\n\n### HTML\n\n                          --{{0}}--\nYou can also use plain HTML in your Markdown, if you miss something. It will\nmostly work pretty good, but it should be used with caution, since some\ninterpreters apply different rules. Some interpret everything within an HTML tag\nas HTML, while others allow mixing. Thus, HTML can contain Markdown, which\ncontains HTML, which contains... By the way, LiaScript allows mixing. Thus, keep\nin mind that newlines and indentation are still relevant.\n\n**Markdown-Syntax:**\n\n\u003c!-- class=\"translate\"--\u003e\n``` html\n\u003cdiv style=\"color: green\"\u003e\n\nTest \u003cq\u003e**bold**\u003c/q\u003e and \u003cb\u003eHTML bold\u003c/b\u003e works also inline\n\n![Beautiful Lenna](img/lenna.jpg \"Image of Lenna with a hat\")\n\n\u003c/div\u003e\n```\n\n                          --{{1}}--\nThe result shows how the inline-CSS is applied to all nested Markdown elements.\nHowever, if you want to apply some styling to your document, LiaScript supports\nanother minimal invasive way of doing that. We will describe this in detail in\nsection [Styling](#styling).\n\n                            {{1}}\n********************************************************************************\n\n**Result:**\n\n\u003cdiv style=\"color: green\"\u003e\n\nTest \u003cq\u003e**bold**\u003c/q\u003e and \u003cb\u003eHTML bold\u003c/b\u003e works also inline\n\n![Beautiful Lenna](img/lenna.jpg \"Image of Lenna with a hat\")\n\n\u003c/div\u003e\n\n\u003e See the following list for an complete overview onto all HTML elements:\n\u003e\n\u003e [HTML Element Reference](https://www.w3schools.com/tags/default.asp)\n\n********************************************************************************\n\n\n\n                          --{{2}}--\nIf you use custom HTML instead of Markdown, then no styling will be applied. You\ncan of course create more complex content or tables, this way you can apply your\nown styling to all elements.\n\n                            {{2}}\n[CSS-Reference](https://www.w3schools.com/CSSref/default.asp)\n\n                          --{{3}}--\nIf you want to, you can also copy the generated LiaScript structure and use our\nclasses. Most Browsers include an inspector, which can be used to interactively\ninspect the entire DOM-tree.\n\n                            {{3}}\nOpen Inspector: \u003ckdb\u003eCtrl+Shift+i\u003c/kdb\u003e or \u003ckdb\u003eCtrl+Shift+k\u003c/kdb\u003e\n\n                            {{3}}\n!?[Inspecting the DOM](https://www.youtube.com/watch?v=Gk6BljF60RI)\n\n                          --{{4}}--\nBut, you can also import your own styles within the main document comment by\nusing the `link` definition. We will explain this in more details within the\nmacro section [link](#link).\n\n                            {{4}}\n``` md\n\u003c!--\n...\nlink: file.css\n...\n--\u003e\n\n# Main Title\n```\n\n#### Details \u0026 Summary\n\n                          --{{0}}--\nThe `details` and `summary` tags are standard HTML tags and GitHub also supports\ntheir usage with Markdown. These tags offer a neat way to define something what\nis nowadays called accordion. Thus, your user can click on the summary text to\nmake the body of the `details`-tag appear.\n\n**Syntax:**\n\n\u003c!-- class=\"notranslate\"--\u003e\n``` md\n\u003cdetails\u003e\n\n\u003csummary\u003e**Honest Textbook ads (click to enlarge)**\u003c/summary\u003e\n\n!?[If High School and College Textbooks Were Honest - Honest Ads](https://www.youtube.com/watch?v=lhSjYT7pWkw)\n\n\u003c/details\u003e\n```\n\n**Result:**\n\n\u003cdetails\u003e\n\n\u003csummary\u003e**Honest Textbook ads (click to enlarge)**\u003c/summary\u003e\n\n!?[If High School and College Textbooks Were Honest - Honest Ads](https://www.youtube.com/watch?v=lhSjYT7pWkw)\n\n\u003c/details\u003e\n\n#### `\u003clia-keep\u003e` 💫\n\n                          --{{0}}--\nIf you want to embed more complex HTML, and only HTML, without taking care about\nindentation and formatting, then should use the `lia-keep` tag to surround your\ncode.\n\n``` html\n\u003clia-keep\u003e\n  \u003cstyle\u003e\n    table, th, td {\n      border: 1px solid black;\n      width: 250px; height: 40px;\n      text-align: center;\n    }\n  \u003c/style\u003e\n\n  \u003ctable style=\"margin: 1em\"\u003e\n    \u003ctr\u003e\n      \u003cth\u003e**Header 1**\u003c/th\u003e\n      \u003cth\u003e**Header 2**\u003c/th\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eCell 1\u003c/td\u003e\n      \u003ctd rowspan=\"2\"\u003eCell 2\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eCell 3\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/table\u003e\n\u003c/lia-keep\u003e\n```\n\n                          --{{1}}--\nAs it is demonstrated in the result, everything within this tag will be treated\nas HTML only, no Markdown parsing will be applied and indentation will be\nchecked.\n\n                            {{1}}\n********************************************************************************\n\n**Result:**\n\n\u003clia-keep\u003e\n  \u003cstyle\u003e\n    table, th, td {\n      border: 1px solid black;\n      width: 250px;\n      height: 40px;\n      text-align: center;\n    }\n  \u003c/style\u003e\n\n  \u003ctable style=\"margin: 1em\"\u003e\n    \u003ctr\u003e\n      \u003cth\u003e**Header 1**\u003c/th\u003e\n      \u003cth\u003e**Header 2**\u003c/th\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eCell 1\u003c/td\u003e\n      \u003ctd rowspan=\"2\"\u003eCell 2\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eCell 3\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/table\u003e\n\n\u003c/lia-keep\u003e\n\n\n********************************************************************************\n\n                          --{{2}}--\n\nThis way, you could for example also import even more complex HTML-tables,\npictures with multiple sources for different screen-sizes, and more.\n_With great power comes great responsibility._  Thus, you will also be\nresponsible for your styling.\n\n\n### Code\n\n                          --{{0}}--\nIn Markdown, you can use a sequence of at least three subsequent backticks `\\``\nto indicate a code-block that should not be treated as Markdown, but instead\ncontains some kind of code for which syntax-highlighting should be used, if\npossible. The first word after the backticks is used as an indicator, for which\nkind of syntax-highlighting should be applied.\n\n```` md\n``` python\nimport time\n# Quick, count to ten!\nfor i in range(10):\n    # (but not *too* quick)\n    time.sleep(0.5)\n    print(i)\n```\n````\n\n                          --{{1}}--\nIn case you are wondering, how to embed a code-block into a code-block with\nbackticks? Three backticks are the minimum, thus you can surround your Markdown\ncode-block example with a sequence of 4 or more backticks. If you start with\nfour backticks, LiaScript will parse everything as code until it reaches a\nmatching number of backticks.\n\n        {{1}}\n``` python\nimport time\n# Quick, count to ten!\nfor i in range(10):\n  # (but not *too* quick)\n  time.sleep(0.5)\n  print(i)\n```\n\n                          --{{2}}--\nHowever, we are still in the Markdown world with static code visualization.\nLiaScript has also support for interactive programming, thus all of your\ncode-snippet can be made executable and editable. This will be described in more\ndetail in section [Interactive Coding](#interactive-coding).\n\n#### Differences to Markdown 💫\n\n                          --{{0}}--\nMarkdown also supports adding code by using tilde `~` characters instead of\nbackticks. This is at the moment not supported by LiaScript, but might be added\nin the future.\n\n``` md\n~~~ javascript\nvar a = \"b\"\n~~~\n```\n\n                          --{{1}}--\nAdditionally, it is also possible in standard Markdown to use indentation with\nat least 4 spaces to mark a block or a line as code. In LiaScript this is\ntreated differently. You can use indentation to keep your document readable. The\ntwo indicators for text-to-speech in the example are treated equally by\nLiaScript, but another Markdown interpreter will interpret the second example as\na single paragraph, while the indicator in the first example will be treated as\ncode, and thus be easier to read with any other Markdown interpreter (including\nthe representation on GitHub).\n\n\n                            {{1}}\n\u003c!-- class=\"translate\"--\u003e\n``` md\nThis is not code ...\n\n    Any kind of text with a 4 space\n    indentation will be treated as code\n    in Markdown ...\n\n                --{{1}}--\nThis text will be spoken out loud in LiaScript.\n\n--{{2}}--\nThis text will be spoken out loud too.\n```\n\n\n#### Projects 💫\n\n                          --{{0}}--\nIf you want to bundle a couple of code-blocks into something that mirrors a\nproject, you can achieve this with the following syntax. All code-blocks are\nsimply attached to each other, in order to indicate a grouping. If you separate\nthem at least by one newline, they will be treated separately. This will be\npretty neat, if we introduce the concept of interactive code-blocks.\n\n\n```` md\n``` js     -EvalScript.js\nlet who = data.first_name + \" \" + data.last_name;\n\nif(data.online) {\n  who + \" is online\"; }\nelse {\n  who + \" is NOT online\"; }\n```\n``` json    +Data.json\n{\n  \"first_name\" :  \"Sammy\",\n  \"last_name\"  :  \"Shark\",\n  \"online\"     :  true\n}\n```\n````\n\n                          --{{1}}--\nYou can define optional names within the head of your code-block. The starting\nplus `+` and minus `-` symbols are used to indicate, if the resulting\ncode-blocks should be visible or hidden. However, you can change this, by\nclicking onto the resulting title-bar to either maximize or minimize the\ncode-block.\n\n                            {{1}}\n``` js     -EvalScript.js\nlet who = data.first_name + \" \" + data.last_name;\n\nif(data.online) {\n  who + \" is online\"; }\nelse {\n  who + \" is NOT online\"; }\n```\n``` json    +Data.json\n{\n  \"first_name\" :  \"Sammy\",\n  \"last_name\"  :  \"Shark\",\n  \"online\"     :  true\n}\n```\n\n                          --{{2}}--\nIf you do not add a plus or a minus as a prefix to your file, the plus is used\nas default.\n\n\n#### Supported Languages 💫\n\n                          --{{0}}--\nIn most cases you can simply add the name of the language or the common filename\nending into the head of a code snippet. Most Markdown interpreters will use\n[highlight.js](https://highlightjs.org) for language rendering, since we require\nalso an editor with syntax highlighting capabilities, we use\n[ace](https://ace.c9.io). Thus, the language support might differ to other\nsystems. We therefore apply a mapping, so that you can still use all\n[highlight.js](https://highlightjs.org) short-codes but also those of\n[ace](https://ace.c9.io).\n\nOverview: https://github.com/LiaScript/docs/blob/master/Code.md\n\n\n### JavaScript 💫\n\n                                 --{{0}}--\nIn contrast to common Markdown parsers or viewers, LiaScript allows you to include and execute JavaScript code.\nWhen combined with HTML elements, you are free to integrate whatever functionality you desire.\n\n                                 --{{1}}--\nThe last statement of your script also defines the result that will be shown, but only if it is not `undefined`.\nYou can also use `console.log` to log the script activities.\nAs the examples below show, you can combine your scripts with LiaScript animations, so they will only be executed in the right fragment/context.\nHowever, you can do much more with scripts.\n\n                                  {{1}}\n\u003e Checkout Section [JavaScript](#JavaScript-or-JS-Components) for more information!\n\n``` html\nDo some internal calculation \u003cscript\u003e 99 * 88  \u003c/script\u003e, the next script\ncontains an error \u003cscript\u003e 99 * a \u003c/script\u003e.\n\n                                  {{2}}\n\u003cscript\u003e\n    // Initialize a Line chart in the container with the ID chart\n    new Chartist.Line('#chart', {\n        labels: [1, 2, 3, 4],\n        series: [[100, 120, 180, 200]]\n    });\n\n    console.debug(\"loaded #chart\") // or undefined\n\u003c/script\u003e\n\u003cdiv class=\"ct-chart ct-golden-section\" id=\"chart\"\u003e\u003c/div\u003e\n```\n\nDo some internal calculation \u003cscript\u003e 99 * 88  \u003c/script\u003e, the next script\ncontains an error: \u003cscript\u003e 99 * a \u003c/script\u003e.\n\n                                {{2-3}}\n\u003cscript\u003e\n// Initialize a Line chart in the container with the ID chart1\nnew Chartist.Line('#chart1', {\n  labels: [1, 2, 3, 4],\n  series: [[100, 120, 180, 200]]\n});\n\nconsole.debug(\"loaded #chart1\")\n\u003c/script\u003e\n\u003cdiv class=\"ct-chart ct-golden-section\" id=\"chart1\"\u003e\u003c/div\u003e\n\n\n                                {{3}}\n\u003cscript\u003e\n// Initialize a Line chart in the container with the ID chart2\nnew Chartist.Line('#chart2', {\n  labels: [1, 2, 3, 4],\n  series: [[-100, 120, 180, 20]]\n});\n\nconsole.debug(\"loaded #chart2\")\n\u003c/script\u003e\n\u003cdiv class=\"ct-chart ct-golden-section\" id=\"chart2\"\u003e\u003c/div\u003e\n\n\n    --{{4}}--\nWhen discussing events, whether past, present, or future, your course may quickly become outdated.\nThis is where scripts, as an initial building block, can shine. Using basic datetime calculations ensures precise determination of when events have occurred or will occur.\nRather than relying solely on your calculations, users have the opportunity to inspect and validate your code by double-clicking on the highlighted script result.\nEven more, it is possible to modify the code, enabling them to double-check your findings and experiment with the results.\n\n\n      {{4}}\n``` markdown\nRussia started its invasion of Ukraine\n\u003cscript format=\"relativetime\" unit=\"day\"\u003e\n// Define the start date of the invasion\nconst invasionStartDate = new Date('2022-02-24');\n\n// Get the current date\nconst currentDate = new Date();\n\n// Calculate the difference in milliseconds\nconst differenceInMs = currentDate - invasionStartDate;\n\n// Convert milliseconds to days\nconst differenceInDays = differenceInMs / (1000 * 60 * 60 * 24);\n\n// Calculate the number of full days\nconst daysSinceInvasion = Math.floor(differenceInDays);\n\n-daysSinceInvasion\n\u003c/script\u003e.\n```\n\n      {{4}}\nRussia started its invasion of Ukraine\n\u003cscript format=\"relativetime\" unit=\"day\" run-once\u003e\n// Define the start date of the invasion\nconst invasionStartDate = new Date('2022-02-24');\n\n// Get the current date\nconst currentDate = new Date();\n\n// Calculate the difference in milliseconds\nconst differenceInMs = currentDate - invasionStartDate;\n\n// Convert milliseconds to days\nconst differenceInDays = differenceInMs / (1000 * 60 * 60 * 24);\n\n// Calculate the number of full days\nconst daysSinceInvasion = Math.floor(differenceInDays);\n\n-daysSinceInvasion\n\u003c/script\u003e.\n\n     --{{5}}--\nWe combined scripts with the [Internationalization API](#Internationalization-API), which enables appropriate formatting of outputs.\nThe days output is not hardcoded in our code.\nIf we change the locale to another language, such as in the following example, the result will be optimized for the Russian language.\nFurthermore, by using the embedded Google Translator functions, the locale will be automatically set according to the selected language.\n\n\n     {{5}}\n\u003csection\u003e\n\n```` markdown\nРоссия начала вторжение в Украину\n\u003cscript format=\"relativetime\" unit=\"day\" locale=\"ru\"\u003e\n// Define the start date of the invasion\nconst invasionStartDate = new Date('2022-02-24');\n...\n````\n\nРоссия начала вторжение в Украину\n\u003cscript format=\"relativetime\" unit=\"day\" locale=\"ru\"\u003e\n// Define the start date of the invasion\nconst invasionStartDate = new Date('2022-02-24');\n\n// Get the current date\nconst currentDate = new Date();\n\n// Calculate the difference in milliseconds\nconst differenceInMs = currentDate - invasionStartDate;\n\n// Convert milliseconds to days\nconst differenceInDays = differenceInMs / (1000 * 60 * 60 * 24);\n\n// Calculate the number of full days\nconst daysSinceInvasion = Math.floor(differenceInDays);\n\n-daysSinceInvasion\n\u003c/script\u003e.\n\n\u003c/section\u003e\n\n    --{{6}}--\nNow, imagine that instead of performing simple calculations, a script could access any kind of real-world data and output it as either HTML or LiaScript.\nWhat's more, picture scripts being directly combined with input fields, and a change in one script triggering the execution of another.\nAll of this is possible in LiaScript.\nWe have re-imagined the usage of scripts as interactive powerhouses, and we will delve into the details in chapter [JavaScript or JS-Components](#JavaScript-or-JS-Components).\n\n      {{6}}\n\u003csection\u003e\n\n``` markdown\nlongitude: \u003cscript default=\"13.33125\" input=\"range\" output=\"longitude\"\u003e@input\u003c/script\u003e\n\nlatitude: \u003cscript default=\"50.92558\" input=\"range\" output=\"latitude\"\u003e@input\u003c/script\u003e\n\n\u003cscript run-once=\"true\" style=\"display: block\"\u003e\n  fetch(\"https://api.open-meteo.com/v1/forecast?latitude=@input(`latitude`)\u0026longitude=@input(`longitude`)\u0026hourly=temperature_2m\")\n    .then(response =\u003e response.json())\n    .then(data =\u003e {\n      let table = \"\u003c!-- data-show data-type='line' data-title='Open-Meteo Weather API' --\u003e\\n\"\n\n      table += \"| Time | Temperature |\\n\"\n      table += \"| ---- | ----------- |\\n\"\n\n      for (let i=0; i \u003c data.hourly.time.length; i++) {\n        table += \"| \" + data.hourly.time[i] + \" | \" + data.hourly.temperature_2m[i] + \" |\\n\"\n      }\n      send.lia(\"LIASCRIPT: \"+table) }\n    )\n    .catch(e =\u003e {\n      send.lia(\"ups, something went wrong\")\n    })\n  \"waiting for the weather\"\n\u003c/script\u003e\n```\n\n---\n\nlongitude: \u003cscript default=\"13.33125\" input=\"range\" output=\"longitude\"\u003e@input\u003c/script\u003e\n\nlatitude: \u003cscript default=\"50.92558\" input=\"range\" output=\"latitude\"\u003e@input\u003c/script\u003e\n\n\u003cscript run-once=\"true\" style=\"display: block\"\u003e\n  fetch(\"https://api.open-meteo.com/v1/forecast?latitude=@input(`latitude`)\u0026longitude=@input(`longitude`)\u0026hourly=temperature_2m\")\n    .then(response =\u003e response.json())\n    .then(data =\u003e {\n      let table = \"\u003c!-- data-show data-type='line' data-title='Open-Meteo weather API' --\u003e\\n\"\n\n      table += \"| Time | Temperature |\\n\"\n      table += \"| ---- | ----------- |\\n\"\n\n      for (let i=0; i \u003c data.hourly.time.length; i++) {\n        table += \"| \" + data.hourly.time[i] + \" | \" + data.hourly.temperature_2m[i] + \" |\\n\"\n      }\n      send.lia(\"LIASCRIPT: \"+table) }\n    )\n    .catch(e =\u003e {\n      send.lia(\"ups, something went wrong\")\n    })\n  \"LIA: wait\"\n\u003c/script\u003e\n\n\u003c/section\u003e\n\n\n\n### Horizontal rules 💫\n\n                          --{{0}}--\nAt the moment it is possible to insert horizontal rules by adding lines with at\nleast 3 dashes, longer sequences of dashes are allowed too. Common Markdown also\nallows to define such rules with asterisks `*`, but this is used in LiaScript to\ngroup blocks, as we will described later...\n\n**Markdown-Syntax:**\n\n\u003c!-- class=\"translate\"--\u003e\n``` markdown\nsome paragraph\n\n---\n\nsomething else\n\n----------------\n```\n\n**Result:**\n\nsome paragraph\n\n---\n\nsomething else\n\n----------------\n\n\n## Custom Styling\n\n\n                 \u003c!-- style=\"color: red\" --\u003e\n                          --{{0}}--\nIn order to support a nearly equal experience for all Markdown interpreters you\nshould stick with the basic Markdown notation or use simple HTML-tags as much as\npossible, for example if you want to change the color of a sentence or a word.\n\n                          --{{1}}--\nHowever, LiaScript allows you also to inject attributes into all Markdown blocks\nand inline elements by attaching an HTML-comment to that specific object. If the\ncontent of this HTML-comment can be parsed as HTML-attributes, then these\nsettings will be applied to the element attached.\n\n                           {{1-2}}\n``` markdown\n\u003c!--\nstyle=\"color: red;\" id = \"elementID\" class=\"foo bar\"\n--\u003e\n```\n\n\n\n                            {{2}}\n********************************************************************************\n\n**Further resources:**\n\n                         --{{2}}--\nThe following resources will give you a full overview onto the most common HTML\nattributes and onto styling elements. It might be pretty overwhelming at first\nglance, what is possible, but you will see, that with some basic elements you\ncan already achieve a lot. And when it comes to HTML and styling, you can find\nexamples for pretty much everything on your preferred search-engine, e.g.\n[ecosia](https://www.ecosia.org).\n\n\n* **HTML attributes:**\n\n  \u003e Checkout the following link to get a full overview onto all HTML attributes,\n  \u003e which you can also apply in LiaScript:\n  \u003e [w3schools: HTML Attribute Reference](https://www.w3schools.com/tags/ref_attributes.asp)\n\n* **Styling with CSS:**\n\n  \u003e In most cases inline-styling will be applied, the following website covers\n  \u003e all CSS-Syntax elements, which then can be used simply by attaching comments\n  \u003e in the following way:\n  \u003e\n  \u003e `\u003c!-- style=\"color: red; font-size: 20px;\" --\u003e`\n  \u003e\n  \u003e [w3schools CSS-Tutorial](https://www.w3schools.com/Css/css_syntax.asp)\n  \u003e\n  \u003e !?[Basic Inline Styling - CSS](https://www.youtube.com/watch?v=jH_WY-sQ8Lg)\n\n********************************************************************************\n\n\n### Block-Styling\n\n                            --{{0}}--\nSo what is actually a block in LiaScript or Markdown? Basically it is everything\nthat is separated by a newline, such as a paragraph, a table, a code-block or a\nlist. But it can also be a block of multiple blocks, such as a list, which may\nconsist of different bullet points, where every bullet point can be a list of\nmultiple blocks by itself.\n\n* **Blocks:**\n\n  * [tables](#Tables)\n  * [paragraphs](#content-blocks)\n  * [lists (ordered/unordered)](#lists)\n  * [blockquotes](#blockquotes)\n  * [horizontal rules](#horizontal-rules-💫)\n  * [HTML-blocks](#HTML) (if standing alone)\n\n* **LiaScript-Extensions:**\n\n  * [comments](#narrator)\n  * [citations](#citations-💫)\n  * [effects](#effects)\n  * [quizzes](#quizzes)\n  * [surveys](#surveys)\n  * [tables](#fun-with-tables)\n  * [ASCII-Art](#ascii-art) \u0026 [Charts](#charts)\n  * [executable code-blocks and projects](#Syntax-highlighting)\n\n\n\n                          --{{1}}--\nSettings for entire blocks can be set with a **starting** comment that includes\nall required HTML-attributes and can even contain animation settings. This can\nalso be used to highlight specific elements of your slides.\n\n                            {{1}}\n********************************************************************************\n\n**LiaScript-Syntax:**\n\n``` markdown\n\u003c!-- class = \"animated rollIn\" style = \"animation-delay: 3s; color: purple\" --\u003e\nThe whole text-block should appear in purple color and with a wobbling effect.\nWhich is a **bad** example, please use it with caution ...\n\n```\n\n**Result: (be patient)**\n\n\u003c!-- class = \"animated rollIn\" style = \"animation-delay: 3s; color: purple\" --\u003e\nThe whole text-block should appear in purple color and with a wobbling effect.\nWhich is a **bad** example, please use it with caution ...\n\n********************************************************************************\n\n\n                          --{{2}}--\nAdditionally, this method can be used to overwrite some aspects of all Markdown\nelement. The example shows how you can change the background color for a certain\nelement. This comes quite handy, if you want to emphasize further some parts of\nyour document.\n\n                            {{2}}\n********************************************************************************\n\n``` markdown\n\u003c!-- style=\"background-color: tomato;\"--\u003e\n\u003e **Warning**\n\u003e\n\u003e You have to be aware, that this does not affect the\n\u003e font-color (dark/light mode). Try to use  pastel\n\u003e colors, or overwrite the color manually with:\n\u003e\n\u003e `color: white;`\n```\n\n\u003c!-- style=\"background-color: tomato;\"--\u003e\n\u003e **Warning**\n\u003e\n\u003e You have to be aware, that this does not affect the\n\u003e font-color (dark/light mode). Try to use  pastel\n\u003e colors, or overwrite the color manually with:\n\u003e\n\u003e `color: white;`\n\n********************************************************************************\n\n                          --{{3}}--\nThe following example depicts the interconnection of nested block-elements. For\nthe entire table and also for all other blocks, it is possible to set the\nproperties for width, font-color and font size, which will be applied onto every\ncell. And every cell can overwrite these values simply by adding a style-comment\nas the first element. These settings are even preserved, if you reorder the\ntable.\n\n                            {{3}}\n********************************************************************************\n\n``` markdown\n               \u003c!-- style=\"width: 50%; min-width: 400px; color: red; font-size:20px\" --\u003e\n| \u003c!-- style=\"background: azure\"--\u003e Header 1 | \u003c!-- style=\"background: brown\"--\u003e Header 2        |\n|:------------------------------------------ |:------------------------------------------------- |\n| \u003c!-- style=\"background: coral\"--\u003e Item 1   | \u003c!-- style=\"background: rgb(12,12,111)\"--\u003e Item 2 |\n| \u003c!-- style=\"background: cyan\" --\u003e Item 3   | \u003c!-- style=\"background: #b88608\"--\u003e Item 4        |\n```\n\n**Result**\n\n                \u003c!-- style=\"width: 50%; min-width: 400px; color: red; font-size:20px\" --\u003e\n| \u003c!-- style=\"background: azure\"--\u003e Header 1 | \u003c!-- style=\"background: brown\"--\u003e Header 2        |\n|:------------------------------------------ |:------------------------------------------------- |\n| \u003c!-- style=\"background: coral\"--\u003e Item 1   | \u003c!-- style=\"background: rgb(12,12,111)\"--\u003e Item 2 |\n| \u003c!-- style=\"background: cyan\" --\u003e Item 3   | \u003c!-- style=\"background: #b88608\"--\u003e Item 4        |\n\n********************************************************************************\n\n\n                          --{{4}}--\nThere are some special (internal) formats for changing the appearance of\ncode-blocks and how to deal with tables. These topics will be handled\nseparately.\n\n\n### Inline-Styling\n\n                          --{{0}}--\nSo what are inline elements? These are basically all the tiny parts, such as\nsingle words, bold-text, links, inline-code, but also images and videos. In\ncontrast to blocks where you attach the comment to front, inline elements can be\nmodified by attaching a comment to the end. That's it ...\n\n**LiaScript-Syntax:**\n\n``` markdown\nThis **is an important**\u003c!-- style=\"color: red\" --\u003e part\nof the text\u003c!-- style=\"color: green; font-size: 10rem;\" --\u003e.\n\n\n![image](...Creative-Tail-Animal-lion.svg)\u003c!--\nstyle = \"width: 300px;\n         border: 10px solid;\"\nclass = \"animated infinite bounce\"\n--\u003e\n\nSome blurry and black-and-white video:\n\n!?[movie](https://www.youtube.com/watch?v=8pTEmbeENF4)\u003c!--\nstyle = \"filter: blur(2px); grayscale(80%);\"\n--\u003e\n```\n\n                          --{{1}}--\nAs you can see from the results, the entire bold text is treated as one block,\nwhereby in the second case only the single word \"text\" gets modified.\n\n                            {{1}}\n********************************************************************************\n\n**Result:**\n\nThis **is an important**\u003c!-- style=\"color: red\" --\u003e part\nof the text\u003c!-- style=\"color: green; font-size: 10rem;\" --\u003e.\n\n![image](https://upload.wikimedia.org/wikipedia/commons/d/d0/Creative-Tail-Animal-lion.svg)\u003c!--\nstyle = \"width: 300px;\n         border: 10px solid;\"\nclass = \"animated infinite bounce\"\n--\u003e\n\nSome blurry and black-and-white video:\n\n!?[movie](https://www.youtube.com/watch?v=8pTEmbeENF4)\u003c!--\nstyle = \"filter: blur(2px) grayscale(80%);\"\n--\u003e\n\n********************************************************************************\n\n                          --{{2}}--\nCSS is a pretty powerful tool and by using HTML-comments to tweak your Markdown,\nyou can still read the document with any ordinary Markdown interpreter that\nsimply ignores these comments.\n\n### Images and Styling\n\n                          --{{0}}--\nStyling images might happen quite often. However, you have to be aware of the\nfact, that the modal view functionality is only possible if LiaScript is in\ntotal control of the image. Thus, it will handle the optimal scaling for you and\nadds a click-event to switch to the modal view.\n\n```markdown\n![The Wave](...ave_off_Kanagawa_%28Kanagawa_oki_nami.jpg \"without attribute injection\")\n\n![Workplace](https://www.w3schools.com/htmL/workplace.jpg \"with attribute are added\")\u003c!-- usemap=\"#workmap\" --\u003e\n\n\u003cmap name=\"workmap\"\u003e\n  \u003carea shape=\"rect\" coords=\"34,44,270,350\" title=\"Computer\" onclick=\"alert('You clicked the Computer')\" \u003e\n  \u003carea shape=\"rect\" coords=\"290,172,333,250\" title=\"Phone\" href=\"#12\"\u003e\n  \u003carea shape=\"circle\" coords=\"337,300,44\" title=\"Cup of coffee\" href=\"#Projects\"\u003e\n\u003c/map\u003e\n```\n\n                          --{{1}}--\nThus, if you click onto the first image, you will be able to inspect it in more\ndetail. If you click onto the second image, then a map associated with this\nimage  is in charge of it, which handles click-events differently.\n\n                            {{1}}\n********************************************************************************\n\n**Result**\n\n![Workplace](https://upload.wikimedia.org/wikipedia/commons/thumb/3/33/1952.343_-_Under_the_Wave_off_Kanagawa_%28Kanagawa_oki_nami.jpg/2560px-1952.343_-_Under_the_Wave_off_Kanagawa_%28Kanagawa_oki_nami.jpg \"without attribute injection\")\n\n![Workplace](https://www.w3schools.com/htmL/workplace.jpg \"with attribute are added\")\u003c!-- usemap=\"#workmap\" --\u003e\n\n\u003cmap name=\"workmap\"\u003e\n  \u003carea shape=\"rect\" coords=\"34,44,270,350\" title=\"Computer\" onclick=\"alert('Computer')\" \u003e\n  \u003carea shape=\"rect\" coords=\"290,172,333,250\" title=\"Phone\" href=\"#12\"\u003e\n  \u003carea shape=\"circle\" coords=\"337,300,44\" title=\"Cup of coffee\" href=\"#Projects\"\u003e\n\u003c/map\u003e\n\n\u003e -- The example for the map was taken from\n\u003e [w3schools](https://www.w3schools.com/tags/tag_map.asp).\n\n********************************************************************************\n\n### What else can you do\n\n                         --{{0}}--\nThe following examples present some useful application of combining attribute\ninjection into LiaScript components.\n\n\n#### Hiding Content\n\n                          --{{0}}--\nThere might be use cases where you either want to show some parts only on GitHub\nand provide and alternative view at LiaScript. As it was shortly introduced in\nthe sections before, you can add comments to the start of every block to add\nadditional attributes. These attributes can also be used as a trigger to hide or\nshow content.\n\n``` markdown\n\u003c!-- style=\"display:block\" --\u003e\n\u003cdiv style=\"display:none\"\u003e\n\nVisible only in LiaScript, but not on GitHub.\n\n\u003c/div\u003e\n\n-----------------------------------------------\n\n\u003c!-- style=\"display:none\" --\u003e\n\u003cdiv style=\"display:block\" id=\"fooBar\"\u003e\n\nNot visible in LiaScript, but on GitHub!\n\n\u003c/div\u003e\n```\n\n                          --{{1}}--\nThe attributes within the comment will overwrite the attributes within the\nblock. Thus, if there would be more stuff within style, this will be overwritten\ntoo, but other attributes like `id` that are not contained within the comment\nwon't be affected...\n\n#### Customizing Multimedia\n\n                          --{{0}}--\nAs you have seen previously sizing videos and applying CSS filters is easy.\nHowever, there might also be the case that you want to start a video from some\nspecial point or to play it automatically, when it appears.\n\n\n                          --{{1}}--\nIf the video is yours, then you can use the following attributes `autoplay` and\n`muted` to control the behavior and the additional fragment `#t=4,12` attached\nto the URL of the video, will tell the browser where to start and where to stop\nthe video. The stop-parameter should be optional.\n\n\n                            {{1}}\n``` markdown\n!?[Something about math](vid/math.mp4#t=4,12)\u003c!--\nautoplay=\"true\"\nmuted=\"true\"\n--\u003e\n```\n\n\n                          --{{2}}--\nThe resulting video starts immediately at second 4 and stops at second 10, and\nof course it will be muted.\n\n                 {{2}}\n!?[Something about math](vid/math.mp4#t=4,10)\u003c!--\nautoplay=\"true\"\nmuted=\"true\" --\u003e\n\n\n##### Platform Diversity\n\n                          --{{0}}--\nHowever, if you are referencing other resource on platforms such as\n[YouTube](https://youtube.com), [Vimeo](https://vimeo.com),\n[DailyMotion](https://dailymotion.com), [PeerTube](https://peertube.tv) or\n[TeacherTube](https://teachertube.com) you can achieve something similar, but in\na slightly different way. These settings have to be added to the URL of your\nresource and different platforms might have different capabilities.\n\n\n                          --{{1}}--\nIn most cases, you can use something like `\u0026autoplay=1`, `\u0026muted=true` or\n`\u0026mute=false` as it is depicted below:\n\n                            {{1}}\n`!?[Multimedia](url/...?autoplay=1\u0026mute=1\u0026start=1895\u0026end=1905)`\n\n\n                          --{{2}}--\nBut, different platforms support different functionalities. Here is a link list\nof the different possible settings. For [PeerTube](https://peertube.tv) and\n[TeacherTube](https://teachertube.com) we could not find any settings so far.\n\n\n                            {{2}}\n********************************************************************************\n\n**URL Parameters:**\n\n* [DailyMotion](http://embedcodedailymotion.blogspot.com/2016/05/dailymotion-embed-generator-tdborder.html)\n* [Vimeo](https://vimeo.zendesk.com/hc/en-us/articles/360001494447-Using-Player-Parameters)\n* [YouTube](https://developers.google.com/youtube/player_parameters)\n* PeerTube\n* TeacherTube\n\n********************************************************************************\n\n## Ignoreable Comments\n\n                          --{{0}}--\nAs you have seen in the previous examples, you can use HTML comments to define certain settings within your course or to change the styling of elements.\n\n                          --{{1}}--\nHowever, since it is pretty difficult to separate ordinary comments from comments with HTML-parameters within, we have now added a special comment type, which is defined by at least three dashes.\n\n    {{1}}\n``` markdown\n\u003c!---\n  This is a comment, which will be ignored by the parser.\n  It will not be rendered in the final document.\n  It is only visible in the source code.\n---\u003e\n```\n\n                          --{{2}}--\nAt least means, that you can use more than three dashes...\n\n    {{2}}\n``` markdown\n\u003c!---------------------------------------------------------\nThis style of comment might be visually more appealing ...\n----------------------------------------------------------\u003e\n```\n\n                          --{{3}}--\nAnd of course this can be used to comment out content or settings.\n\n    {{3}}\n``` markdown\n\u003c!--- style=\"color: red\" class=\"to be ignored\" ---\u003e\nLorem ipsum dolor sit amet, consectetur adipiscing elit.\n```\n\n## Math \u0026 Formulas\n\n                 --{{0}}--\nThe following will not work on [GitHub](https://github.com), but most\nMarkdown-interpreters do support formulas with a\n[LaTeX](https://en.wikipedia.org/wiki/LaTeX)-like syntax. As it is common in\nmany Markdown dialects, such as in\n[Pandoc-Markdown](https://pandoc.org/MANUAL.html#math), you can apply dollar\nsigns to surround a \"math\"-environment. Everything within the dollar signs\nbelongs to the formula only, there is currently no nesting of other HTML or\nLiaScript/Markdown allowed.\n\n\n              --{{1}}--\nUse single dollar signs to define an inline formula, which will be treated as an\nordinary text element.\n\n                          {{1}}\nInline math-mode `$ \\frac{a}{\\sum{b+i}} $` -\u003e $ \\frac{a}{\\sum{b+i}} $\u003c!-- class=\"notranslate\"--\u003e\n\n\n             --{{2}}--\nUse double dollar signs to indicate a formula-block. This way you can also use\nmultiple lines to define a formula or a set of formulas that will furthermore\nbe displayed larger.\n\n\n                          {{2}}\n\u003csection\u003e\n\nMulti-line math-mode can be applied by double dollars `$$ formula $$`\n\n\u003c!-- class=\"notranslate\" --\u003e\n$$\n  \\frac{a}{\\sum{b+i}}\n$$\n\n\u003c/section\u003e\n\n\n                           --{{3}}--\nCurrently, we apply the [KaTeX](http://katex.org) library for typesetting. If you\nare already familiar with [LaTeX](https://en.wikipedia.org/wiki/LaTeX) or\n[MathJAX](https://www.mathjax.org), as another alternative library, then you can\nstart immediately to define formulas. If not, then check out some of the\nfollowing resources.\n\n         {{3}}\n* via KaTeX: http://katex.org\n\n* Supported functions:\n\n  https://katex.org/docs/supported.html\n\n* Alphabetically sorted features:\n\n  https://katex.org/docs/support_table.html\n\n* Detexify: get the appropriate command by drawing symbols\n\n  http://detexify.kirelabs.org/classify.html\n\n\n                 --{{4}}--\nSometimes it might be tedious to find the right, command for the intended\nsymbol, if you can draw it, then you should give\n[detexify](http://detexify.kirelabs.org/classify.html) a try.\n\n\n\n### Formula Playground\n\u003c!--\n\n@runFormula: \u003cscript\u003econsole.html(`\u003clia-formula formula=\"@'input\" displayMode=\"true\"\u003e\u003c/lia-formula\u003e`);\"LIA: stop\"\u003c/script\u003e\n\n--\u003e\n\n                          --{{0}}--\nAlignment is a typical use case for formulas. The code below, shows how this can\nbe achieved by using ampersands, which are used as an anchor for the center of a\nformula.\n\n\u003c!-- class=\"notranslate\"--\u003e\n```latex\n\\begin{split}\n  a \u0026=b+c \\\\\n    \u0026=e+f \\\\\n    \u0026=g+h+i+j\\\\\na+b+\u0026c+d=12\\\\\n\\end{split}\n```\n@runFormula\n\n\n                          --{{1}}--\nIf you want to number your formulas, we recommend using the `\\tag` command to\nadd or overwrite the reference number. Automatic numbering does not work well at\nthe moment, since the formulas are rendered within a\n[web component](https://en.wikipedia.org/wiki/Web_Components), and it does\nconflict with the LiaScript idea of animation, which we describe in a later part\nof this series.\n\n\n      {{1}}\n\u003c!-- class=\"notranslate\"--\u003e\n```latex\n\\tag{33}\n\\begin{equation}\n a =b+c\n\\end{equation}\n```\n@runFormula\n\n\n                          --{{2}}--\nAnd finally it is possible to add some styling, but with\n[KaTeX](https://katex.org/docs/supported.html#html)-functionalities, this\nincludes some basic styling, with the same inline CSS, as we had described it in\nsection [Custom Styling](#custom-styling). (Can you spot the strange looking\ngerman character [_Eszett_](https://en.wikipedia.org/wiki/%C3%9F).) And you can\nmark elements as links with `\\href` and add images with the command\n`\\includegraphics`.\n\n\n      {{2}}\n\u003c!-- class=\"notranslate\"--\u003e\n```latex\n\\begin{Bmatrix}\n   a \u0026 b \u0026 c \u0026 d \u0026 e \u0026 f \\\\\n   g \u0026 h \u0026 i \u0026 j \u0026 k \u0026 l \\\\\n   m \u0026 n \u0026 o \u0026 p \u0026 q \u0026 r \\\\\n   s \u0026 t \u0026 u \u0026 v \u0026 w \u0026 x \\\\\n   y \u0026 z \u0026 ä \u0026 ö \u0026 ü \u0026\n   \\htmlStyle{color: red; font-size: 26px}{ß}\n\\end{Bmatrix}\n\\\\\n\\href{https://katex.org/docs/supported.html#html}{\\KaTeX HTML support}\n\\\\\n\\includegraphics[height=0.8em, totalheight=0.9em, width=0.9em, alt=KA logo]{https://katex.org/img/khan-academy.png}\n```\n@runFormula\n\n### Formula-Macros\n\u003c!--\nformula:  foo  {x^2}\nformula:  \\bar  {#1^2}\n--\u003e\n\n                 --{{0}}--\nAdditionally, you can define custom macros, as it is supported by [KaTeX](https://katex.org).\nHowever, there are currently two options to define macros, which can be either local or global.\n\n\n       {{1}}\n\u003csection\u003e\n\n#### Local\n\n      --{{1}}--\nLocal macros can be defined directly within the formula environment.\nEven if you use something like `\\gdef`, which stands for global define, these macros will only affect the local formula.\nThe reason for this is, that in contrast to other Markdown renderers, LiaScript will only parse and display the current slide/section.\nA global definition on slide 100 will not affect the formulas on slide 12.\n\nDocumentation: [KaTeX-Macros](https://katex.org/docs/supported.html#macros)\n\n`$ \\def\\foo{x^2} \\foo + \\foo $` --\u003e $ \\def\\foo{x^2} \\foo + \\foo $\n\n`$ \\gdef\\bar#1{#1^2} \\bar{y} + \\bar{y} $` --\u003e $ \\gdef\\bar#1{#1^2} \\bar{y} + \\bar{y} $\n\n\u003c/section\u003e\n\n\n    {{2}}\n\u003csection\u003e\n\n#### Global\n\n    --{{2}}--\nHowever, if you want to define a custom set of macros and reuse them within all of your formulas, you will have to define them within the main comment of your document.\nUse the `formula` macro, whereby the first word defines the macro name (the starting backslash is optional) and the remainder is used as the body.\nAll of these macros are then passed to every formula while rendering, see therefore the comments at:\n\n[KaTeX rendering options](https://katex.org/docs/options.html)\n\n\n``` markdown\n\u003c!--\nauthor: ...\n\nformula:  foo   {x^2}\nformula:  \\bar  {#1^2}\n\n--\u003e\n\n# Main\n\n$ \\foo + \\foo $\n\n$ \\bar{y} + \\bar{y} $\n```\n\n`$ \\foo + \\foo $` --\u003e $ \\foo + \\foo $\n\n`$ \\bar{y} + \\bar{y} $` --\u003e $ \\bar{y} + \\bar{y} $\n\n\u003c/section\u003e\n\n\n    {{3}}\n\u003csection\u003e\n\n#### Changing\n\n    --{{3}}--\nAdditionally, it is possible to overwrite global formulas or define new ones per slide.\nIn the example below, the new formula definition for `foo` will be used, while `bar` remains as it is.\nHowever, if you switch to another slide, the previously global definition of `foo` is used again.\n\n\n``` markdown\n...\n\n## Subsection\n\u003c!--\nformula: \\foo  {y^3}\n--\u003e\n\n$ \\bar{\\foo} + \\bar{\\foo} $\n\n```\n\n\u003c/section\u003e\n\n\n    {{4}}\n\u003csection\u003e\n\n#### Mixing global and local\n\n    --{{4}}--\nUnfortunately, it is currently not possible to use both types of macros within one formula.\nIf there are local macro definitions, then no global macros are passed.\nThus, the following formula will result in an error, since the global `\\bar` is not defined.\nPassing macros as rendering options and defining local ones currently result in KaTeX errors.\n\n`$ \\def\\foo{x^2} \\bar{\\foo} + \\bar{\\foo} $` $ --\u003e \\def\\foo{x^2} \\bar{\\foo} + \\bar{\\foo} $\n\n\u003c/section\u003e\n\n\n### Chemical Formulas\n\n    --{{0}}--\nLiaScript now supports rendering chemical formulas using KaTeX!\nWith this update, you can include chemical equations in your slides using the `mhchem` macros.\n\n    --{{1}}--\nTo display chemical equations, simply wrap your formula using the `\\ce{...}` command. For example:\n\n      {{1}}\n``` latex\n$\\ce{CO2 + C -\u003e 2 CO}$\n```\n\n    --{{2}}--\nThis will render as:\n\n      {{2}}\n$\\ce{CO2 + C -\u003e 2 CO}$\n\n      {{3}}\n\u003e For further details on the syntax and additional features provided by `mhchem`, please refer to the [official mhchem documentation](https://mhchem.github.io/MathJax-mhchem/).\n\n\n## Footnotes\n\n                            --{{0}}--\nBefore moving on to the LiaScript specific features, such as quizzes, surveys,\nanimations, ASCII-art, etc., we would like present a last feature that is common\nto many Markdown dialects and these are footnotes. So, what are footnotes in\ngeneral and when to use them.\n\n                            {{0-1}}\n\u003e     {{|\u003e UK English Male}}\n\u003e Footnotes are notes at the foot of the page while endnotes are collected under\n\u003e a separate heading at the end of a chapter, volume, or entire work. Unlike\n\u003e footnotes, endnotes have the advantage of not affecting the layout of the main\n\u003e text, but may cause inconvenience to readers who have to move back and forth\n\u003e between the main text and the endnotes.\n\u003e\n\u003e -- [Wikipedia](https://en.wikipedia.org/wiki/Note_%28typography%29)\n\n\n                          --{{1}}--\nIn LiaScript a \"section\", which is defined by a header and a body, resembles a\npage. Thus, the body might contain a couple of footnote-marks, while the actual\nfootnotes have to be defined a","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FLiaScript%2Fdocs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FLiaScript%2Fdocs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FLiaScript%2Fdocs/lists"}