From 0449e944341afc9b07aa4d7df21af0fce2959e5b Mon Sep 17 00:00:00 2001 From: jaywcjlove <398188662@qq.com> Date: Sat, 12 Mar 2022 02:07:42 +0800 Subject: [PATCH] feat: Add syntax highlighting. --- Example/Shared/Group/BaseMarkdownGroup.swift | 6 +- Example/Shared/Group/CodeGroup.swift | 53 +++- Example/Shared/Group/HomeGroup.swift | 2 +- Example/Shared/Group/ToDoGroup.swift | 2 +- README.md | 2 +- .../Markdown/Resources/web.bundle/index.html | 12 +- .../Markdown/Resources/web.bundle/marked.css | 128 ++------ .../Markdown/Resources/web.bundle/prism.js | 281 ++++++++++++++++++ 8 files changed, 371 insertions(+), 115 deletions(-) create mode 100644 Sources/Markdown/Resources/web.bundle/prism.js diff --git a/Example/Shared/Group/BaseMarkdownGroup.swift b/Example/Shared/Group/BaseMarkdownGroup.swift index 3bbf9ba..fd843cf 100644 --- 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 index b7a87a5..741a435 100644 --- 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 + * @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 + + + ``` + """ var body: some View { Markdown(content: $mdStr) diff --git a/Example/Shared/Group/HomeGroup.swift b/Example/Shared/Group/HomeGroup.swift index d825542..36a68e5 100644 --- 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 index 9a8bcdf..79c2d72 100644 --- 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 index 8f7253c..9a23ce2 100644 --- 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 index aaa7fd4..2dbf336 100644 --- a/Sources/Markdown/Resources/web.bundle/index.html +++ b/Sources/Markdown/Resources/web.bundle/index.html @@ -3,12 +3,22 @@ Markdown Preview + +
-