feat: Support KaTeX.

Example/Example.xcodeproj/project.pbxproj

@@ -30,6 +30,8 @@
 		7D6AF8DD27D9EEA500EE5204 /* Markdown in Frameworks */ = {isa = PBXBuildFile; fileRef = 7D6AF8D727D9E43500EE5204 /* Markdown */; };
 		7D6AF8DF27D9EEFC00EE5204 /* Markdown in Frameworks */ = {isa = PBXBuildFile; productRef = 7D6AF8DE27D9EEFC00EE5204 /* Markdown */; };
 		7D6AF8E227DA73B100EE5204 /* Markdown in Frameworks */ = {isa = PBXBuildFile; productRef = 7D6AF8E127DA73B100EE5204 /* Markdown */; };
+		7D8C8BA027DD22CA0022929A /* KaTeXGroup.swift in Sources */ = {isa = PBXBuildFile; fileRef = 7D8C8B9F27DD22CA0022929A /* KaTeXGroup.swift */; };
+		7D8C8BA127DD22CA0022929A /* KaTeXGroup.swift in Sources */ = {isa = PBXBuildFile; fileRef = 7D8C8B9F27DD22CA0022929A /* KaTeXGroup.swift */; };
 /* End PBXBuildFile section */
 
 /* Begin PBXFileReference section */
@@ -47,6 +49,7 @@
 		7D6AF8C027D9DF2300EE5204 /* Example.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = Example.app; sourceTree = BUILT_PRODUCTS_DIR; };
 		7D6AF8C227D9DF2300EE5204 /* macOS.entitlements */ = {isa = PBXFileReference; lastKnownFileType = text.plist.entitlements; path = macOS.entitlements; sourceTree = "<group>"; };
 		7D6AF8D727D9E43500EE5204 /* Markdown */ = {isa = PBXFileReference; lastKnownFileType = wrapper; name = Markdown; path = ..; sourceTree = "<group>"; };
+		7D8C8B9F27DD22CA0022929A /* KaTeXGroup.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = KaTeXGroup.swift; sourceTree = "<group>"; };
 /* End PBXFileReference section */
 
 /* Begin PBXFrameworksBuildPhase section */
@@ -79,6 +82,7 @@
 				7D6033C827DB2A4A00F7B36B /* ToDoGroup.swift */,
 				7D025D0027DB47620057979B /* MarkdownStyleGroup.swift */,
 				7D025D0327DBCC390057979B /* ListGroup.swift */,
+				7D8C8B9F27DD22CA0022929A /* KaTeXGroup.swift */,
 			);
 			path = Group;
 			sourceTree = "<group>";
@@ -245,6 +249,7 @@
 				7D025D0427DBCC3A0057979B /* ListGroup.swift in Sources */,
 				7D6033C927DB2A4A00F7B36B /* ToDoGroup.swift in Sources */,
 				7D025D0127DB47620057979B /* MarkdownStyleGroup.swift in Sources */,
+				7D8C8BA027DD22CA0022929A /* KaTeXGroup.swift in Sources */,
 				7D6033C627DAF1D900F7B36B /* BaseMarkdownGroup.swift in Sources */,
 				7D6033C027DAEB7E00F7B36B /* CodeGroup.swift in Sources */,
 				7D6033C327DAF08000F7B36B /* HomeGroup.swift in Sources */,
@@ -261,6 +266,7 @@
 				7D025D0527DBCC3A0057979B /* ListGroup.swift in Sources */,
 				7D6033CA27DB2A4B00F7B36B /* ToDoGroup.swift in Sources */,
 				7D025D0227DB47620057979B /* MarkdownStyleGroup.swift in Sources */,
+				7D8C8BA127DD22CA0022929A /* KaTeXGroup.swift in Sources */,
 				7D6033C727DAF1D900F7B36B /* BaseMarkdownGroup.swift in Sources */,
 				7D6033C127DAEB7E00F7B36B /* CodeGroup.swift in Sources */,
 				7D6033C427DAF08000F7B36B /* HomeGroup.swift in Sources */,

Example/Shared/DemoList.swift

@@ -59,6 +59,9 @@ struct DemoList: View {
             DemoRow(title: "List", systemImage: "list.bullet.rectangle.portrait.fill", tag: "List", selection: $selection) {
                 ListGroup()
             }
+            DemoRow(title: "KaTeX", systemImage: "x.squareroot", tag: "KaTeX", selection: $selection) {
+                KaTeXGroup()
+            }
             Section(header: Text("API")) {
                 DemoRow(
                     title: "markdownStyle",

Example/Shared/Group/KaTeXGroup.swift

@@ -0,0 +1,98 @@
+//
+//  KaTeXGroup.swift
+//  Example
+//
+//  Created by 王楚江 on 2022/3/13.
+//
+
+import Markdown
+import SwiftUI
+
+struct KaTeXGroup: View {
+    @State private var mdStr: String = """
+        KaTeX
+        ===
+        
+        ## Grammar
+        
+        ```markdown
+        `KaTeX:a''`
+        ```
+        
+        ```markdown
+        \\\\`\\\\`\\\\`KaTeX
+        ```
+        
+        ## Example
+        
+        `KaTeX:a'` `KaTeX:a''`  `KaTeX:\\widetilde{ac}`
+        
+        `KaTeX:( \\big( \\Big( \\bigg( \\Bigg(`
+
+        ```katex
+        c = \\pm\\sqrt{a^2 + b^2}
+        ```
+        
+        ```katex
+        \\widetilde{ac}
+        \\underbrace{AB}
+        ```
+        
+        ## [Accents](https://katex.org/docs/supported.html#accents)
+        
+        Source Code | Preview | Source Code | Preview |  Source Code | Preview
+        ---- | ---- | ---- | ---- | ---- | ----
+        `a'` | `KaTeX:a'` | `\\tilde{a}` | `KaTeX:\\tilde{a}` | `\\mathring{g}` | `KaTeX:\\mathring{g}`
+        `a''` | `KaTeX:a''` | `\\widetilde{ac}` | `KaTeX:\\widetilde{ac}` | `\\overgroup{AB}` | `KaTeX:\\overgroup{AB}`
+        `a^{\\prime}` | `KaTeX:a^{\\prime}` | `\\utilde{AB}` | `KaTeX:\\utilde{AB}` | `\\undergroup{AB}` | `KaTeX:\\undergroup{AB}`
+        `\\acute{a}` | `KaTeX:\\acute{a}` | `\\vec{F}` | `KaTeX:\\vec{F}` | `\\Overrightarrow{AB}` | `KaTeX:\\Overrightarrow{AB}`
+        `\\bar{y}` | `KaTeX:\\bar{y}` | `\\overleftarrow{AB}` | `KaTeX:\\overleftarrow{AB}` | `\\overrightarrow{AB}` | `KaTeX:\\overrightarrow{AB}`
+        `\\breve{a}` | `KaTeX:\\breve{a}` | `\\underleftarrow{AB}` | `KaTeX:\\underleftarrow{AB}` | `\\underrightarrow{AB}` | `KaTeX:\\underrightarrow{AB}`
+        `\\check{a}` | `KaTeX:\\check{a}` | `\\overleftharpoon{ac}` | `KaTeX:\\overleftharpoon{ac}` | `\\overrightharpoon{ac}` | `KaTeX:\\overrightharpoon{ac}`
+        `\\dot{a}` | `KaTeX:\\dot{a}` | `\\overleftrightarrow{AB}` | `KaTeX:\\overleftrightarrow{AB}` | `\\overbrace{AB}` | `KaTeX:\\overbrace{AB}`
+        `\\ddot{a}` | `KaTeX:\\ddot{a}` | `\\underleftrightarrow{AB}` | `KaTeX:\\underleftrightarrow{AB}` | `\\underbrace{AB}` | `KaTeX:\\underbrace{AB}`
+        `\\grave{a}` | `KaTeX:\\grave{a}` | `\\overline{AB}` | `KaTeX:\\overline{AB}` | `\\overlinesegment{AB}` | `KaTeX:\\overlinesegment{AB}`
+        `\\hat{\theta}` | `KaTeX:\\hat{\theta}` | `\\underline{AB}` | `KaTeX:\\underline{AB}` | `\\underlinesegment{AB}` | `KaTeX:\\underlinesegment{AB}`
+        `\\widehat{ac}` | `KaTeX:\\widehat{ac}` | `\\widecheck{ac}` | `KaTeX:\\widecheck{ac}` | `\\underbar{X}` | `KaTeX:\\underbar{X}`
+        
+        
+        **Accent functions inside \\text{…}**
+        
+        
+        Source Code | Preview | Source Code | Preview |  Source Code | Preview | Source Code | Preview
+        ---- | ---- | ---- | ---- | ---- | ---- | ---- | ----
+        `\\'{a}` | `KaTeX:\\'{a}` | `\\~{a}` | `KaTeX:\\~{a}` | `\\.{a}` | `KaTeX:\\.{a}` | `\\H{a}` | `KaTeX:\\H{a}`
+        ⚠️`-` | `-` | `\\={a}` | `KaTeX:\\={a}` | `\\"{a}` | `KaTeX:\\"{a}` | `\\v{a}` | `KaTeX:\\v{a}`
+        `\\^{a}` | `KaTeX:\\^{a}` | `\\u{a}` | `KaTeX:\\u{a}` | `\\r{a}` | `KaTeX:\\r{a}`
+        
+        ## [Delimiters](https://katex.org/docs/supported.html#delimiters)
+        
+        Source Code | Preview | Source Code | Preview |  Source Code | Preview | Source Code | Preview | Source Code | Preview
+        ---- | ---- | ---- | ---- | ---- | ---- | ---- | ---- | ---- | ----
+        `( )` | `KaTeX:( )` | `\\lparen`, `\\rparen` | `KaTeX:\\lparen` `KaTeX:\\rparen` | `⌈ ⌉` | `KaTeX:⌈ ⌉` | `\\rceil`, `\\lceil` | `KaTeX:\\lceil` `KaTeX:\\rceil` | `\\uparrow` | `KaTeX:\\uparrow`
+        `[ ]` | `KaTeX:[ ]` | `\\lbrack`, `\\rbrack` | `KaTeX:\\lbrack` `KaTeX:\\rbrack` | `⌊ ⌋` | `KaTeX:⌊ ⌋` | `\\lfloor`, `\\rfloor` | `KaTeX:\\lfloor` `KaTeX:\\rfloor` | `\\downarrow` |
+        `\\{ \\}` | `KaTeX:\\{ \\}` | `\\lbrace`, `\\rbrace` | `KaTeX:\\lbrace` `KaTeX:\\rbrace` | `⎰⎱` | `KaTeX:⎰⎱` | `\\lmoustache`, `\\rmoustache` | `KaTeX:\\lmoustache` `KaTeX:\\rmoustache` | `\\updownarrow` | `KaTeX:\\updownarrow`
+        `⟨ ⟩` | `KaTeX:⟨ ⟩` | `\\langle`, `\\rangle` | `KaTeX:\\langle` `KaTeX:\\rangle` | `⟮ ⟯` | `KaTeX:⟮ ⟯` | `\\lgroup`, `\\rgroup` | `KaTeX:\\lgroup` `KaTeX:\\rgroup` | `\\Uparrow` | `KaTeX:\\Uparrow` `KaTeX:\\downarrow`
+        `\\|` | `KaTeX:\\|` | `\\vert` | `KaTeX:\\vert` | `┌ ┐` | `KaTeX:┌ ┐` | `\\ulcorner`, `\\urcorner` | `KaTeX:\\ulcorner` `KaTeX:\\urcorner` | `\\Downarrow` | `KaTeX:\\Downarrow`
+        ⚠️`\\|` | ⚠️`KaTeX:\\|` | `\\Vert` | `KaTeX:\\Vert` | `└ ┘` | `KaTeX:└ ┘` | `\\llcorner`, `\\lrcorner` | `KaTeX:\\llcorner` `KaTeX:\\lrcorner` | `\\Updownarrow` | `KaTeX:\\Updownarrow`
+        `\\lvert`, `\\rvert` | `KaTeX:\\lvert` `KaTeX:\\rvert` | `\\lVert`, `\\rVert` | `KaTeX:\\lVert` `KaTeX:\\rVert` | `\\left.` | `-` | `\\right.` | `-` | `\\backslash` | `KaTeX:\\backslash`
+        `\\lang`, `\\rang` | `KaTeX:\\lang` `KaTeX:\\rang` | `\\lt \\gt` | `KaTeX:\\lt \\gt` | `⟦ ⟧` | `KaTeX:⟦ ⟧` | `\\llbracket`, `\\rrbracket` | `KaTeX:\\llbracket` `KaTeX:\\rrbracket` | `\\lBrace \\rBrace` | `KaTeX:\\lBrace \\rBrace`
+        
+        **Delimiter Sizing**
+        
+        `KaTeX:\\left(\\LARGE{AB}\\right)`
+        
+        `KaTeX:( \\big( \\Big( \\bigg( \\Bigg(`
+        
+        | Code | Code | Code | Code | Code |
+        | ---- | ---- | ---- | ---- | ---- |
+        | `\\left` | `\\big` | `\\bigl` | `\\bigm` | `\\bigr` |
+        | `\\middle` | `\\Big` | `\\Bigl` | `\\Bigm` | `\\Bigr` |
+        | `\\right` | `\\bigg` | `\\biggl` | `\\biggm` | `\\biggr` |
+        |  - | `\\Bigg` | `\\Biggl` | `\\Biggm` | `\\Biggr` |
+        
+        """
+    var body: some View {
+        Markdown(content: $mdStr)
+    }
+}

Sources/Markdown/MarkdownWebView.swift

@@ -90,6 +90,7 @@ public class MarkdownWebView: CustomView, WKNavigationDelegate {
         \(value)
         """.replacingOccurrences(of: "`", with: "\\`", options: .literal, range: nil)
             .replacingOccurrences(of: "{", with: "\\{", options: .literal, range: nil)
+
         let end = "`; markdownPreview(content.replace(/\\\\`/g, '`').replace(/\\\\{/g, '{'));"
 
         let script = first + content + end

Sources/Markdown/Resources/web.bundle/index.html

@@ -3,13 +3,80 @@
 <head>
   <title>Markdown Preview</title>
   <link rel="stylesheet" href="marked.css">
-  <link rel="stylesheet" href="plugin.css">
+  <link rel="stylesheet" href="katex.css">
+  <style>
+    body, html {
+      margin: 0;
+      padding: 0;
+      user-select: none;
+      -webkit-user-select: none;
+      min-height: 100%;
+    }
+
+#__markdown_preview__ {
+    cursor: default;
+}
+
+.markdown-body pre .copied {
+  visibility: hidden;
+  display: flex;
+  position: absolute;
+  cursor: pointer;
+  color: var(--color-fg-defaul);
+  top: 6px;
+  right: 6px;
+  border-radius: 5px;
+  background: var(--color-prettylights-syntax-sublimelinter-gutter-mark);
+  padding: 6px;
+  font-size: 12px;
+  transition: all .3s;
+}
+.markdown-body pre:hover .copied {
+  visibility: visible;
+}
+.markdown-body pre:hover .copied:hover {
+  background: var(--color-prettylights-syntax-entity-tag);
+  color: var(--color-canvas-default);
+}
+.markdown-body pre:hover .copied:active,.markdown-body pre .copied.active {
+  background: #2e9b33;
+  color: var(--color-canvas-default);
+}
+
+.markdown-body pre .copied .octicon-copy {
+    display: block;
+}
+
+.markdown-body pre .copied .octicon-check {
+    display: none;
+}
+
+.markdown-body pre .active .octicon-copy {
+    display: none;
+}
+
+.markdown-body pre .active .octicon-check {
+    display: block;
+}
+
+.markdown-body pre code {
+  -webkit-user-select: text;
+  user-select: text;
+  cursor: text;
+}
+.markdown-body pre[class*="language-"] {
+  position: relative;
+}
+
+.math.math-inline {
+  background-color: transparent;
+}
+  </style>
 </head>
 <body>
     <div id="__markdown_preview__" class="markdown-body"></div>
-    <script type="text/javascript" src="./prism.js"></script>
-    <script type="text/javascript" src="./plugins/lnline-color.js"></script>
-    <script type="text/javascript" src="./marked.min.js" charset="utf-8"></script>
+    <script type="text/javascript" src="./markdown.min.js"></script>
+    <script type="text/javascript" src="./node/copyNode.js"></script>
     <script type="text/javascript" src="./copy.js"></script>
     <script type="text/javascript" src="./main.js"></script>
 </body>