feat: Add syntax highlighting.

jaywcjlove · Mar 11, 2022 · 0449e94 · 0449e94
1 parent 9ff02de
commit 0449e94
Show file tree

Hide file tree

Showing 8 changed files with 371 additions and 115 deletions.
diff --git a/Example/Shared/Group/BaseMarkdownGroup.swift b/Example/Shared/Group/BaseMarkdownGroup.swift
@@ -9,7 +9,7 @@ import SwiftUI
 
 struct BaseMarkdownGroup: View {
     @State private var mdStr: String = """
-        Markdown
+        Base Markdown
         ===
 
         [![CI](https://github.com/jaywcjlove/markdown/actions/workflows/ci.yml/badge.svg)](https://github.com/jaywcjlove/markdown/actions/workflows/ci.yml)
@@ -60,6 +60,10 @@ struct BaseMarkdownGroup: View {
 
         Licensed under the MIT License.
         
+        Here is a simple footnote[^1]. With some additional text after it.
+
+        [^1]: My reference.
+        
         """
     var body: some View {
         Markdown(content: $mdStr)

diff --git a/Example/Shared/Group/CodeGroup.swift b/Example/Shared/Group/CodeGroup.swift
@@ -10,7 +10,7 @@ import SwiftUI
 
 struct CodeGroup: View {
     @State private var mdStr: String = """
-        ## SwiftUI Code Preview
+        ## Code Block
 
         ```swift
         import SwiftUI
@@ -34,6 +34,15 @@ struct CodeGroup: View {
         ```jsx
         import CodeMirror from '@uiw/react-codemirror';
         import { javascript } from '@codemirror/lang-javascript';
+
+        /**
+         * Prism: Lightweight, robust, elegant syntax highlighting
+         *
+         * @license MIT <https://opensource.org/licenses/MIT>
+         * @author Kenny Wong
+         * @namespace
+         * @public
+         */
         
         export default function App() {
           return (
@@ -48,6 +57,48 @@ struct CodeGroup: View {
           );
         }
         ```
+        
+        ```css
+        @media (prefers-color-scheme: light) {
+          .markdown-body {
+            color-scheme: light;
+            --color-border-default: #d0d7de;
+            --color-border-muted: hsla(210,18%,87%,1);
+            --color-neutral-muted: rgba(175,184,193,0.2);
+            /** --color-accent-fg: #0969da; **/
+          }
+        }
+
+        .markdown-body kbd {
+          color: var(--color-fg-default);
+          vertical-align: middle;
+          box-shadow: inset 0 -1px 0 var(--color-neutral-muted);
+        }
+
+        .markdown-body pre {
+          margin-top: 0;
+          margin-bottom: 0;
+          font-family: ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;
+          font-size: 12px;
+          word-wrap: normal;
+        }
+        ```
+        
+        ```html
+        <script src="https://unpkg.com/hotkeys-js/dist/hotkeys.min.js"></script>
+        <script type="text/javascript">
+        hotkeys('ctrl+a,ctrl+b,r,f', function (event, handler){
+          switch (handler.key) {
+            case 'ctrl+a': alert('you pressed ctrl+a!');
+              break;
+            // case 'f': alert('you pressed f!');
+            //   break;
+            default: alert(event);
+          }
+        });
+        </script>
+        ```
+        
         """
     var body: some View {
         Markdown(content: $mdStr)

diff --git a/Example/Shared/Group/HomeGroup.swift b/Example/Shared/Group/HomeGroup.swift
@@ -17,7 +17,7 @@ struct HomeGroup: View {
 
         Render Markdown text in SwiftUI. It is a preview based on the [`Marked`](https://github.com/markedjs/marked) implementation.
 
-        ![Markdown Package Screenshot](https://user-images.githubusercontent.com/1680273/157746319-d338670c-e4b2-471b-b524-0e9ecb8d2c52.png)
+        ![Markdown Package Screenshot](https://user-images.githubusercontent.com/1680273/157921398-b1557bab-6de2-4d09-b50d-1d865d252c3c.png)
 
         ## Installation
 

diff --git a/Example/Shared/Group/ToDoGroup.swift b/Example/Shared/Group/ToDoGroup.swift
@@ -9,7 +9,7 @@ import SwiftUI
 
 struct ToDoGroup: View {
     @State private var mdStr: String = """
-        ToDo Group
+        To Do
         ===
                 
         - [ ] title 1

diff --git a/README.md b/README.md
@@ -6,7 +6,7 @@ Markdown
 
 Render Markdown text in SwiftUI. It is a preview based on the [`Marked`](https://github.com/markedjs/marked) implementation.
 
-![Markdown Package Screenshot](https://user-images.githubusercontent.com/1680273/157866748-911e038b-c845-4da9-9ae2-1499a1cb0b93.png)
+![Markdown Package Screenshot](https://user-images.githubusercontent.com/1680273/157921398-b1557bab-6de2-4d09-b50d-1d865d252c3c.png)
 
 ## Installation
 

diff --git a/Sources/Markdown/Resources/web.bundle/index.html b/Sources/Markdown/Resources/web.bundle/index.html
@@ -3,12 +3,22 @@
 <head>
   <title>Markdown Preview</title>
   <link rel="stylesheet" href="marked.css">
+  <script type="text/javascript" src="./prism.js"></script>
+  <script src="./marked.min.js" type="text/javascript" charset="utf-8"></script>
 </head>
 <body>
     <div id="__markdown_preview__" class="markdown-body">
     </div>
-    <script src="./marked.min.js" type="text/javascript" charset="utf-8"></script>
     <script>
+        marked.setOptions({
+            highlight: function(code, lang) {
+                const language = Prism.languages[lang];
+                if (language) {
+                    return Prism.highlight(code, language, lang);
+                }
+                return code;
+            },
+        })
         window.__markdown_preview_dom__ = document.getElementById('__markdown_preview__');
         function markdownPreview(content) {
             __markdown_preview_dom__.innerHTML = marked.parse(content);

diff --git a/Sources/Markdown/Resources/web.bundle/marked.css b/Sources/Markdown/Resources/web.bundle/marked.css
@@ -14,8 +14,9 @@ body, html {
     min-height: 100%;
 }
 
-.markdown-body code {
+.markdown-body pre code {
     -webkit-user-select: text;
+    user-select: text;
     cursor: text;
 }
 
@@ -445,125 +446,34 @@ body, html {
   appearance: none;
 }
 
-.markdown-body .pl-c {
+.token.comment, .token.prolog, .token.doctype, .token.cdata {
   color: var(--color-prettylights-syntax-comment);
 }
-
-.markdown-body .pl-c1,
-.markdown-body .pl-s .pl-v {
-  color: var(--color-prettylights-syntax-constant);
-}
-
-.markdown-body .pl-e,
-.markdown-body .pl-en {
-  color: var(--color-prettylights-syntax-entity);
-}
-
-.markdown-body .pl-smi,
-.markdown-body .pl-s .pl-s1 {
-  color: var(--color-prettylights-syntax-storage-modifier-import);
-}
-
-.markdown-body .pl-ent {
+.token.namespace { opacity: 0.7; }
+.token.property, .token.tag, .token.selector, .token.constant, .token.symbol, .token.deleted {
   color: var(--color-prettylights-syntax-entity-tag);
 }
-
-.markdown-body .pl-k {
-  color: var(--color-prettylights-syntax-keyword);
-}
-
-.markdown-body .pl-s,
-.markdown-body .pl-pds,
-.markdown-body .pl-s .pl-pse .pl-s1,
-.markdown-body .pl-sr,
-.markdown-body .pl-sr .pl-cce,
-.markdown-body .pl-sr .pl-sre,
-.markdown-body .pl-sr .pl-sra {
-  color: var(--color-prettylights-syntax-string);
-}
-
-.markdown-body .pl-v,
-.markdown-body .pl-smw {
+.token.maybe-class-name {
   color: var(--color-prettylights-syntax-variable);
 }
-
-.markdown-body .pl-bu {
-  color: var(--color-prettylights-syntax-brackethighlighter-unmatched);
-}
-
-.markdown-body .pl-ii {
-  color: var(--color-prettylights-syntax-invalid-illegal-text);
-  background-color: var(--color-prettylights-syntax-invalid-illegal-bg);
-}
-
-.markdown-body .pl-c2 {
-  color: var(--color-prettylights-syntax-carriage-return-text);
-  background-color: var(--color-prettylights-syntax-carriage-return-bg);
-}
-
-.markdown-body .pl-sr .pl-cce {
-  font-weight: bold;
-  color: var(--color-prettylights-syntax-string-regexp);
-}
-
-.markdown-body .pl-ml {
-  color: var(--color-prettylights-syntax-markup-list);
-}
-
-.markdown-body .pl-mh,
-.markdown-body .pl-mh .pl-en,
-.markdown-body .pl-ms {
-  font-weight: bold;
-  color: var(--color-prettylights-syntax-markup-heading);
-}
-
-.markdown-body .pl-mi {
-  font-style: italic;
-  color: var(--color-prettylights-syntax-markup-italic);
-}
-
-.markdown-body .pl-mb {
-  font-weight: bold;
-  color: var(--color-prettylights-syntax-markup-bold);
-}
-
-.markdown-body .pl-md {
-  color: var(--color-prettylights-syntax-markup-deleted-text);
-  background-color: var(--color-prettylights-syntax-markup-deleted-bg);
-}
-
-.markdown-body .pl-mi1 {
-  color: var(--color-prettylights-syntax-markup-inserted-text);
-  background-color: var(--color-prettylights-syntax-markup-inserted-bg);
-}
-
-.markdown-body .pl-mc {
-  color: var(--color-prettylights-syntax-markup-changed-text);
-  background-color: var(--color-prettylights-syntax-markup-changed-bg);
-}
-
-.markdown-body .pl-mi2 {
-  color: var(--color-prettylights-syntax-markup-ignored-text);
-  background-color: var(--color-prettylights-syntax-markup-ignored-bg);
+.token.property-access, .token.operator, .token.boolean, .token.number, .token.selector .token.class, .token.attr-name, .token.string, .token.char, .token.builtin, .token.inserted {
+  color: var(--color-prettylights-syntax-constant);
 }
-
-.markdown-body .pl-mdr {
-  font-weight: bold;
-  color: var(--color-prettylights-syntax-meta-diff-range);
+.token.variable {
+  color: var(--color-prettylights-syntax-constant);
 }
-
-.markdown-body .pl-ba {
-  color: var(--color-prettylights-syntax-brackethighlighter-angle);
+.token.entity, .token.url, .language-css .token.string, .style .token.string {
+  color: var(--color-prettylights-syntax-string);
 }
-
-.markdown-body .pl-sg {
-  color: var(--color-prettylights-syntax-sublimelinter-gutter-mark);
+.token.color, .token.atrule, .token.attr-value, .token.function, .token.class-name {
+  color: var(--color-prettylights-syntax-string);
 }
-
-.markdown-body .pl-corl {
-  text-decoration: underline;
-  color: var(--color-prettylights-syntax-constant-other-reference-link);
+.token.rule, .token.regex, .token.important, .token.keyword {
+  color: var(--color-prettylights-syntax-keyword);
 }
+.token.important, .token.bold { font-weight: bold; }
+.token.italic { font-style: italic; }
+.token.entity { cursor: help; }
 
 .markdown-body [data-catalyst] {
   display: block;