From ddc02d4d47cbe87c77ce97b240c36460033502ff Mon Sep 17 00:00:00 2001 From: Jannis Baum Date: Wed, 17 Jul 2024 18:28:44 +0200 Subject: [PATCH 1/5] feat(#87): super & subscript --- package.json | 2 ++ src/parser/markdown.ts | 6 ++++++ yarn.lock | 10 ++++++++++ 3 files changed, 18 insertions(+) diff --git a/package.json b/package.json index ca65a0a4..8299a92a 100644 --- a/package.json +++ b/package.json @@ -21,6 +21,8 @@ "markdown-it-emoji": "^3.0.0", "markdown-it-footnote": "^4.0.0", "markdown-it-inject-linenumbers": "^0.3.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", diff --git a/src/parser/markdown.ts b/src/parser/markdown.ts index 34c97f60..9eab09d6 100644 --- a/src/parser/markdown.ts +++ b/src/parser/markdown.ts @@ -46,6 +46,12 @@ 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); const renderMarkdown: Renderer = (content: string) => { return mdit.render(content); diff --git a/yarn.lock b/yarn.lock index 4c1a1ba6..400208bc 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1681,6 +1681,16 @@ 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-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" From d067fa60d04cb76af9335499a17829a89ca3f718 Mon Sep 17 00:00:00 2001 From: Jannis Baum Date: Wed, 17 Jul 2024 18:30:34 +0200 Subject: [PATCH 2/5] feat(#87): mark/highlight --- package.json | 1 + src/parser/markdown.ts | 3 +++ tests/markdown-extended.md | 4 ++-- yarn.lock | 5 +++++ 4 files changed, 11 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 8299a92a..e15970b4 100644 --- a/package.json +++ b/package.json @@ -21,6 +21,7 @@ "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", diff --git a/src/parser/markdown.ts b/src/parser/markdown.ts index 9eab09d6..e4707865 100644 --- a/src/parser/markdown.ts +++ b/src/parser/markdown.ts @@ -52,6 +52,9 @@ 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); const renderMarkdown: Renderer = (content: string) => { return mdit.render(content); diff --git a/tests/markdown-extended.md b/tests/markdown-extended.md index a25d0bcc..6ec6c23f 100644 --- a/tests/markdown-extended.md +++ b/tests/markdown-extended.md @@ -89,9 +89,9 @@ That is so funny! :joy: :cowboy_hat_face::nerd_face: -## Highlight +## Highlight/Mark -I need to highlight these ==very important words==. +I need to highlight/mark these ==very important words==. ## Subscript diff --git a/yarn.lock b/yarn.lock index 400208bc..046966ed 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1681,6 +1681,11 @@ 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" From 316e1369d566701d407bf323a0321f5f19b3052b Mon Sep 17 00:00:00 2001 From: Jannis Baum Date: Wed, 17 Jul 2024 18:35:24 +0200 Subject: [PATCH 3/5] feat(#87): custom heading ids --- package.json | 1 + src/parser/markdown.ts | 20 +++++++++++++------- yarn.lock | 5 +++++ 3 files changed, 19 insertions(+), 7 deletions(-) diff --git a/package.json b/package.json index e15970b4..3130749c 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "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", diff --git a/src/parser/markdown.ts b/src/parser/markdown.ts index e4707865..2b839abb 100644 --- a/src/parser/markdown.ts +++ b/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 @@ -55,6 +48,19 @@ 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); diff --git a/yarn.lock b/yarn.lock index 046966ed..33206895 100644 --- a/yarn.lock +++ b/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" From 76a5d8698d235da4c74155b78c233109ff2ce170 Mon Sep 17 00:00:00 2001 From: Jannis Baum Date: Wed, 17 Jul 2024 18:39:36 +0200 Subject: [PATCH 4/5] feat(#87): testing file & docs for attributes --- README.md | 7 +++++++ tests/markdown-additional.md | 4 ++++ 2 files changed, 11 insertions(+) diff --git a/README.md b/README.md index 5f4bb714..4f9a77d4 100644 --- a/README.md +++ b/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 diff --git a/tests/markdown-additional.md b/tests/markdown-additional.md index 39a6b38f..99c16dd6 100644 --- a/tests/markdown-additional.md +++ b/tests/markdown-additional.md @@ -28,3 +28,7 @@ digraph { While not a markdown syntax, this has a default style: Press Ctrl + C to copy, and Ctrl + V to paste! + +## Custom attributes + +This paragraph has a red background color.{style=background-color:red} From 673990f997e0f2bb876bcc428b1dd3ac2f33ab8a Mon Sep 17 00:00:00 2001 From: Jannis Baum Date: Thu, 18 Jul 2024 14:48:26 +0200 Subject: [PATCH 5/5] feat(#87): mark color --- static/style.css | 48 +++++++++++++++++++++----------------- tests/markdown-extended.md | 13 ++++++++++- 2 files changed, 39 insertions(+), 22 deletions(-) diff --git a/static/style.css b/static/style.css index b2c68337..bee9dc94 100644 --- a/static/style.css +++ b/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; + } } diff --git a/tests/markdown-extended.md b/tests/markdown-extended.md index 6ec6c23f..720ab28c 100644 --- a/tests/markdown-extended.md +++ b/tests/markdown-extended.md @@ -91,7 +91,18 @@ That is so funny! :joy: ## Highlight/Mark -I need to highlight/mark these ==very important words==. +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