Merge pull request jannis-baum#104 from jannis-baum/issue/87-support-…

…full-extended-syntax

Support full extended syntax

README.md

@@ -32,6 +32,13 @@ issue](https://github.com/jannis-baum/vivify/issues/new/choose) or
 - links to other files: [relative links like in
   GitHub](https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#relative-links)
   as well as absolute file links
+- [add styles, classes, ids or other attributes directly from
+  Markdown](https://github.com/arve0/markdown-it-attrs?tab=readme-ov-file#examples)
+
+You can find examples for all supported features in the files in the
+[`tests/`](tests) directory. In case you are looking at these on GitHub, keep in
+mind that GitHub doesn't support some of the features that Vivify supports so
+some things may look off.
 
 ### Editor Support
 

package.json

@@ -17,10 +17,14 @@
     "katex": "^0.16.11",
     "markdown-it": "^14.1.0",
     "markdown-it-anchor": "^9.0.1",
+    "markdown-it-attrs": "^4.1.6",
     "markdown-it-deflist": "^3.0.0",
     "markdown-it-emoji": "^3.0.0",
     "markdown-it-footnote": "^4.0.0",
     "markdown-it-inject-linenumbers": "^0.3.0",
+    "markdown-it-mark": "^4.0.0",
+    "markdown-it-sub": "^2.0.0",
+    "markdown-it-sup": "^2.0.0",
     "markdown-it-task-lists": "^2.1.1",
     "markdown-it-texmath": "^1.0.0",
     "node-stream-zip": "^1.15.0",

src/parser/markdown.ts

@@ -11,13 +11,6 @@ const mdit = new MarkdownIt({
     linkify: true,
 });
 
-mdit.use(anchor, {
-    permalink: anchor.permalink.ariaHidden({
-        placement: 'before',
-    }),
-});
-mdit.use(graphviz);
-
 // MARK: markdown-it plugins that don't have types; unfortunately we can't
 // ts-expect-error for blocks so this is ugly:
 // https://github.com/Microsoft/TypeScript/issues/19573
@@ -46,6 +39,28 @@ mdit.use(texMath, {
 /* @ts-expect-error: markdown-it modules aren't typed */
 import defList from 'markdown-it-deflist';
 mdit.use(defList);
+/* @ts-expect-error: markdown-it modules aren't typed */
+import sub from 'markdown-it-sub';
+mdit.use(sub);
+/* @ts-expect-error: markdown-it modules aren't typed */
+import sup from 'markdown-it-sup';
+mdit.use(sup);
+/* @ts-expect-error: markdown-it modules aren't typed */
+import mark from 'markdown-it-mark';
+mdit.use(mark);
+/* @ts-expect-error: markdown-it modules aren't typed */
+import attributes from 'markdown-it-attrs';
+mdit.use(attributes);
+
+// MARK: untyped plugins done
+
+// anchor has to be added after attribute plugin for ids to work
+mdit.use(anchor, {
+    permalink: anchor.permalink.ariaHidden({
+        placement: 'before',
+    }),
+});
+mdit.use(graphviz);
 
 const renderMarkdown: Renderer = (content: string) => {
     return mdit.render(content);

static/style.css

@@ -17,13 +17,6 @@ body {
 } 
 .content-txt { max-width: 1200px; }
 
-/* --------------------------------------------------------------------------
- * HEADINGS ----------------------------------------------------------------- */
-h1, h2 {
-    border-bottom: 0.2px solid #444;
-    padding-bottom: 0.75rem;
-}
-
 /* --------------------------------------------------------------------------
  * CODE --------------------------------------------------------------------- */
 pre {
@@ -71,15 +64,6 @@ a#parent-dir {
 }
 a#parent-dir:hover { opacity: 1; }
 
-/* --------------------------------------------------------------------------
- * QUOTES ------------------------------------------------------------------- */
-blockquote {
-    padding: 0 1em;
-    color: #6a6a6a;
-    border-left: .25em solid #353535;
-    margin-left: 0
-}
-
 /* --------------------------------------------------------------------------
  * TABLES ------------------------------------------------------------------- */
 table {
@@ -115,10 +99,6 @@ li[class^='dir-list-']:before { margin-right: 0.5rem; }
 li.dir-list-directory:before { content: '📁' }
 li.dir-list-file:before { content: '📄' }
 
-/* --------------------------------------------------------------------------
- * IMAGES ------------------------------------------------------------------- */
-img, svg { max-width: 100%; }
-
 /* --------------------------------------------------------------------------
  * HORIZONTAL RULE ---------------------------------------------------------- */
 hr {
@@ -179,8 +159,23 @@ dt + dt + dd {
 }                        /* Self height - margin - padding */
 
 /* --------------------------------------------------------------------------
- * KEYBOARD INPUT ----------------------------------------------------------- */
+ * MISCELLANEOUS ------------------------------------------------------------ */
+/* headings */
+h1, h2 {
+    border-bottom: 0.2px solid #444;
+    padding-bottom: 0.75rem;
+}
+/* quotes */
+blockquote {
+    padding: 0 1em;
+    color: #6a6a6a;
+    border-left: .25em solid #353535;
+    margin-left: 0
+}
+/* images */
+img, svg { max-width: 100%; }
 
+/* keyboard */
 kbd {
     background-color: #161616;
     border: 1px solid #242424;
@@ -189,6 +184,12 @@ kbd {
     border-radius: 6px;
 }
 
+/* highlight/mark */
+mark {
+  background-color: rgba(255, 255, 175, 0.8);
+  color: #222;
+}
+
 /* --------------------------------------------------------------------------
  * LIGHT MODE --------------------------------------------------------------- */
 @media (prefers-color-scheme: light) {
@@ -248,4 +249,9 @@ kbd {
         border: 1px solid #eff1f3;
         box-shadow: inset 0 -1px 0 #eff1f3;
     }
+
+    mark {
+        background-color: rgba(255, 255, 175, 1);
+        color: #1f2328;
+    }
 }

tests/markdown-additional.md

@@ -28,3 +28,7 @@ digraph {
 While not a markdown syntax, this has a default style:
 
 Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy, and <kbd>Ctrl</kbd> + <kbd>V</kbd> to paste!
+
+## Custom attributes
+
+This paragraph has a red background color.{style=background-color:red}

tests/markdown-extended.md

@@ -89,9 +89,20 @@ That is so funny! :joy:
 
 :cowboy_hat_face::nerd_face:
 
-## Highlight
-
-I need to highlight these ==very important words==.
+## Highlight/Mark
+
+I need to highlight/mark these ==very important words==. There can also be
+longer highlighted sections which may be relevant for testing styles:
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, ==sed do eiusmod tempor
+incididunt ut labore et dolore magna aliqua. Amet justo donec enim diam
+vulputate ut pharetra sit amet. Neque egestas congue quisque egestas diam in.
+Risus at ultrices mi tempus imperdiet nulla malesuada pellentesque elit. Massa
+placerat duis ultricies lacus sed turpis tincidunt id aliquet. Lacus sed viverra
+tellus in hac habitasse platea dictumst. Facilisi morbi tempus iaculis urna id.
+Feugiat in fermentum posuere urna. Ultricies tristique nulla aliquet enim
+tortor. Vitae congue mauris rhoncus aenean.== Mi eget mauris pharetra et ultrices
+neque. Tincidunt vitae semper quis lectus nulla.
 
 ## Subscript
 

yarn.lock

@@ -1661,6 +1661,11 @@ markdown-it-anchor@^9.0.1:
   resolved "https://registry.yarnpkg.com/markdown-it-anchor/-/markdown-it-anchor-9.0.1.tgz#b913adf25cb56cb52ed1acd79bdb98ff466f38eb"
   integrity sha512-cBt7aAzmkfX8X7FqAe8EBryiKmToXgMQEEMqkXzWCm0toDtfDYIGboKeTKd8cpNJArJtutrf+977wFJTsvNGmQ==
 
+markdown-it-attrs@^4.1.6:
+  version "4.1.6"
+  resolved "https://registry.yarnpkg.com/markdown-it-attrs/-/markdown-it-attrs-4.1.6.tgz#2bc331c7649d8c6396a0613c2bba1093f3e64da9"
+  integrity sha512-O7PDKZlN8RFMyDX13JnctQompwrrILuz2y43pW2GagcwpIIElkAdfeek+erHfxUOlXWPsjFeWmZ8ch1xtRLWpA==
+
 markdown-it-deflist@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/markdown-it-deflist/-/markdown-it-deflist-3.0.0.tgz#f2beb0b308beae5a62f62cca7fde0de48dcbe3de"
@@ -1681,6 +1686,21 @@ markdown-it-inject-linenumbers@^0.3.0:
   resolved "https://registry.yarnpkg.com/markdown-it-inject-linenumbers/-/markdown-it-inject-linenumbers-0.3.0.tgz#654364fa7a2dcb5f4461ef6d29d2603b74b29fd7"
   integrity sha512-c9ymcXUunjCJ8vNBNrg3JMT5d94IxAy6KHJ891vuZf/go98opU77X5neiVIi9Rer3v+03WYk5913J1pVmJOV0g==
 
+markdown-it-mark@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/markdown-it-mark/-/markdown-it-mark-4.0.0.tgz#c19cbc87d9cb9fd1a495e8fe31b740b6d9ebf8c8"
+  integrity sha512-YLhzaOsU9THO/cal0lUjfMjrqSMPjjyjChYM7oyj4DnyaXEzA8gnW6cVJeyCrCVeyesrY2PlEdUYJSPFYL4Nkg==
+
+markdown-it-sub@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/markdown-it-sub/-/markdown-it-sub-2.0.0.tgz#10f6c7bbf2faacf71ae1a64c75009c40ef9b2c94"
+  integrity sha512-iCBKgwCkfQBRg2vApy9vx1C1Tu6D8XYo8NvevI3OlwzBRmiMtsJ2sXupBgEA7PPxiDwNni3qIUkhZ6j5wofDUA==
+
+markdown-it-sup@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/markdown-it-sup/-/markdown-it-sup-2.0.0.tgz#683b9390929f3024fcd5291799c466ce3d367f44"
+  integrity sha512-5VgmdKlkBd8sgXuoDoxMpiU+BiEt3I49GItBzzw7Mxq9CxvnhE/k09HFli09zgfFDRixDQDfDxi0mgBCXtaTvA==
+
 markdown-it-task-lists@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/markdown-it-task-lists/-/markdown-it-task-lists-2.1.1.tgz#f68f4d2ac2bad5a2c373ba93081a1a6848417088"