Add subscript and superscript (#879)

* Added superscript and subscript to markdown

* Added docs for Superscript and subscript

* Remove leftover brace

common/markdown_parser/customtags.ts

@@ -29,3 +29,6 @@ export const NakedURLTag = Tag.define();
 
 export const DirectiveMarkTag = Tag.define();
 export const DirectiveTag = Tag.define();
+
+export const SubscriptTag = Tag.define();
+export const SuperscriptTag = Tag.define();

common/markdown_parser/parser.ts

@@ -8,6 +8,8 @@ import {
   Line,
   MarkdownConfig,
   Strikethrough,
+  Subscript,
+  Superscript,
 } from "@lezer/markdown";
 import { markdown } from "@codemirror/lang-markdown";
 import { StreamLanguage } from "@codemirror/language";
@@ -624,6 +626,8 @@ export const extendedMarkdownLanguage = markdown({
     Hashtag,
     TaskDeadline,
     NamedAnchor,
+    Superscript,
+    Subscript,
     {
       props: [
         foldNodeProp.add({
@@ -646,8 +650,9 @@ export const extendedMarkdownLanguage = markdown({
           Task: ct.TaskTag,
           TaskMark: ct.TaskMarkTag,
           Comment: ct.CommentTag,
-          "TableDelimiter SubscriptMark SuperscriptMark StrikethroughMark":
-            t.processingInstruction,
+          "Subscript": ct.SubscriptTag,
+          "Superscript": ct.SuperscriptTag,
+          "TableDelimiter StrikethroughMark": t.processingInstruction,
           "TableHeader/...": t.heading,
           TableCell: t.content,
           CodeInfo: ct.CodeInfoTag,

plugs/markdown/markdown_render.ts

@@ -477,6 +477,16 @@ function render(
         body: renderToText(t),
       };
     }
+    case "Superscript":
+      return {
+        name: "sup",
+        body: cleanTags(mapRender(t.children!)),
+      };
+    case "Subscript":
+      return {
+        name: "sub",
+        body: cleanTags(mapRender(t.children!)),
+      };
 
     // Text
     case undefined:

web/cm_plugins/hide_mark.ts

@@ -21,6 +21,8 @@ const typesWithMarks = [
   "InlineCode",
   "Highlight",
   "Strikethrough",
+  "Superscript",
+  "Subscript",
 ];
 /**
  * The elements which are used as marks.
@@ -30,6 +32,8 @@ const markTypes = [
   "CodeMark",
   "HighlightMark",
   "StrikethroughMark",
+  "SuperscriptMark",
+  "SubscriptMark",
 ];
 
 /**

web/style.ts

@@ -53,6 +53,8 @@ export default function highlightStyles() {
     { tag: ct.NakedURLTag, class: "sb-naked-url" },
     { tag: ct.TaskDeadlineTag, class: "sb-task-deadline" },
     { tag: ct.NamedAnchorTag, class: "sb-named-anchor" },
+    { tag: ct.SubscriptTag, class: "sb-sub" },
+    { tag: ct.SuperscriptTag, class: "sb-sup" },
 
     { tag: ct.DirectiveMarkTag, class: "sb-directive-mark" },
     { tag: ct.DirectiveTag, class: "sb-directive" },

web/styles/colors.scss

@@ -218,9 +218,9 @@
   .sb-line-h3 .sb-meta,
   .sb-line-h4 .sb-meta,
   .sb-line-h5 .sb-meta,
-  .sb-line-h6 .sb-meta,
-  {
+  .sb-line-h6 .sb-meta {
     color: var(--editor-heading-meta-color);
+  }
 }
 
 .sb-hashtag,
@@ -386,6 +386,16 @@ tbody tr:nth-of-type(even) {
   font-weight: 900;
 }
 
+.sb-sub {
+  vertical-align: sub;
+  font-size: smaller;
+}
+
+.sb-sup {
+  vertical-align: super;
+  font-size: smaller;
+}
+
 .sb-line-code-outside .sb-code-info {
   color: var(--editor-code-info-color);
 }
@@ -433,4 +443,3 @@ a.sb-wiki-link-page-missing,
 .sb-line-comment {
   background-color: var(--editor-code-comment-color); // rgba(255, 255, 0, 0.5);
 }
-}

website/Markdown/Extensions.md

@@ -15,4 +15,5 @@ In addition to supporting [[Markdown/Basics|markdown basics]] as standardized by
 * [Task lists](https://www.markdownguide.org/extended-syntax/#task-lists)
 * [Highlight](https://www.markdownguide.org/extended-syntax/#highlight)
 * [Automatic URL linking](https://www.markdownguide.org/extended-syntax/#automatic-url-linking)
+* [Subscript](https://www.markdownguide.org/extended-syntax/#subscript) and [superscript](https://www.markdownguide.org/extended-syntax/#superscript)
 * Any addition custom markdown extensions provided by [[Plugs]]