Skip to content

Commit 0449e94

Browse files
jaywcjlovejaywcjlove
committed
feat: Add syntax highlighting.
1 parent 9ff02de commit 0449e94

File tree

8 files changed

+371
-115
lines changed

8 files changed

+371
-115
lines changed

‎Example/Shared/Group/BaseMarkdownGroup.swift‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import SwiftUI
99

1010
struct BaseMarkdownGroup: View {
1111
@State private var mdStr: String = """
12-
Markdown
12+
Base Markdown
1313
===
1414
1515
[![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 {
6060
6161
Licensed under the MIT License.
6262
63+
Here is a simple footnote[^1]. With some additional text after it.
64+
65+
[^1]: My reference.
66+
6367
"""
6468
var body: some View {
6569
Markdown(content: $mdStr)

‎Example/Shared/Group/CodeGroup.swift‎

Lines changed: 52 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import SwiftUI
1010

1111
struct CodeGroup: View {
1212
@State private var mdStr: String = """
13-
## SwiftUI Code Preview
13+
## Code Block
1414
1515
```swift
1616
import SwiftUI
@@ -34,6 +34,15 @@ struct CodeGroup: View {
3434
```jsx
3535
import CodeMirror from '@uiw/react-codemirror';
3636
import { javascript } from '@codemirror/lang-javascript';
37+
38+
/**
39+
* Prism: Lightweight, robust, elegant syntax highlighting
40+
*
41+
* @license MIT <https://opensource.org/licenses/MIT>
42+
* @author Kenny Wong
43+
* @namespace
44+
* @public
45+
*/
3746
3847
export default function App() {
3948
return (
@@ -48,6 +57,48 @@ struct CodeGroup: View {
4857
);
4958
}
5059
```
60+
61+
```css
62+
@media (prefers-color-scheme: light) {
63+
.markdown-body {
64+
color-scheme: light;
65+
--color-border-default: #d0d7de;
66+
--color-border-muted: hsla(210,18%,87%,1);
67+
--color-neutral-muted: rgba(175,184,193,0.2);
68+
/** --color-accent-fg: #0969da; **/
69+
}
70+
}
71+
72+
.markdown-body kbd {
73+
color: var(--color-fg-default);
74+
vertical-align: middle;
75+
box-shadow: inset 0 -1px 0 var(--color-neutral-muted);
76+
}
77+
78+
.markdown-body pre {
79+
margin-top: 0;
80+
margin-bottom: 0;
81+
font-family: ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;
82+
font-size: 12px;
83+
word-wrap: normal;
84+
}
85+
```
86+
87+
```html
88+
<script src="https://unpkg.com/hotkeys-js/dist/hotkeys.min.js"></script>
89+
<script type="text/javascript">
90+
hotkeys('ctrl+a,ctrl+b,r,f', function (event, handler){
91+
switch (handler.key) {
92+
case 'ctrl+a': alert('you pressed ctrl+a!');
93+
break;
94+
// case 'f': alert('you pressed f!');
95+
// break;
96+
default: alert(event);
97+
}
98+
});
99+
</script>
100+
```
101+
51102
"""
52103
var body: some View {
53104
Markdown(content: $mdStr)

‎Example/Shared/Group/HomeGroup.swift‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ struct HomeGroup: View {
1717
1818
Render Markdown text in SwiftUI. It is a preview based on the [`Marked`](https://github.com/markedjs/marked) implementation.
1919
20-
![Markdown Package Screenshot](https://user-images.githubusercontent.com/1680273/157746319-d338670c-e4b2-471b-b524-0e9ecb8d2c52.png)
20+
![Markdown Package Screenshot](https://user-images.githubusercontent.com/1680273/157921398-b1557bab-6de2-4d09-b50d-1d865d252c3c.png)
2121
2222
## Installation
2323

‎Example/Shared/Group/ToDoGroup.swift‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import SwiftUI
99

1010
struct ToDoGroup: View {
1111
@State private var mdStr: String = """
12-
ToDo Group
12+
To Do
1313
===
1414
1515
- [ ] title 1

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ Markdown
66

77
Render Markdown text in SwiftUI. It is a preview based on the [`Marked`](https://github.com/markedjs/marked) implementation.
88

9-
![Markdown Package Screenshot](https://user-images.githubusercontent.com/1680273/157866748-911e038b-c845-4da9-9ae2-1499a1cb0b93.png)
9+
![Markdown Package Screenshot](https://user-images.githubusercontent.com/1680273/157921398-b1557bab-6de2-4d09-b50d-1d865d252c3c.png)
1010

1111
## Installation
1212

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

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,22 @@
33
<head>
44
<title>Markdown Preview</title>
55
<link rel="stylesheet" href="marked.css">
6+
<script type="text/javascript" src="./prism.js"></script>
7+
<script src="./marked.min.js" type="text/javascript" charset="utf-8"></script>
68
</head>
79
<body>
810
<div id="__markdown_preview__" class="markdown-body">
911
</div>
10-
<script src="./marked.min.js" type="text/javascript" charset="utf-8"></script>
1112
<script>
13+
marked.setOptions({
14+
highlight: function(code, lang) {
15+
const language = Prism.languages[lang];
16+
if (language) {
17+
return Prism.highlight(code, language, lang);
18+
}
19+
return code;
20+
},
21+
})
1222
window.__markdown_preview_dom__ = document.getElementById('__markdown_preview__');
1323
function markdownPreview(content) {
1424
__markdown_preview_dom__.innerHTML = marked.parse(content);

‎Sources/Markdown/Resources/web.bundle/marked.css‎

Lines changed: 19 additions & 109 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,9 @@ body, html {
1414
min-height: 100%;
1515
}
1616

17-
.markdown-body code {
17+
.markdown-body pre code {
1818
-webkit-user-select: text;
19+
user-select: text;
1920
cursor: text;
2021
}
2122

@@ -445,125 +446,34 @@ body, html {
445446
appearance: none;
446447
}
447448

448-
.markdown-body .pl-c {
449+
.token.comment, .token.prolog, .token.doctype, .token.cdata {
449450
color: var(--color-prettylights-syntax-comment);
450451
}
451-
452-
.markdown-body .pl-c1,
453-
.markdown-body .pl-s .pl-v {
454-
color: var(--color-prettylights-syntax-constant);
455-
}
456-
457-
.markdown-body .pl-e,
458-
.markdown-body .pl-en {
459-
color: var(--color-prettylights-syntax-entity);
460-
}
461-
462-
.markdown-body .pl-smi,
463-
.markdown-body .pl-s .pl-s1 {
464-
color: var(--color-prettylights-syntax-storage-modifier-import);
465-
}
466-
467-
.markdown-body .pl-ent {
452+
.token.namespace { opacity: 0.7; }
453+
.token.property, .token.tag, .token.selector, .token.constant, .token.symbol, .token.deleted {
468454
color: var(--color-prettylights-syntax-entity-tag);
469455
}
470-
471-
.markdown-body .pl-k {
472-
color: var(--color-prettylights-syntax-keyword);
473-
}
474-
475-
.markdown-body .pl-s,
476-
.markdown-body .pl-pds,
477-
.markdown-body .pl-s .pl-pse .pl-s1,
478-
.markdown-body .pl-sr,
479-
.markdown-body .pl-sr .pl-cce,
480-
.markdown-body .pl-sr .pl-sre,
481-
.markdown-body .pl-sr .pl-sra {
482-
color: var(--color-prettylights-syntax-string);
483-
}
484-
485-
.markdown-body .pl-v,
486-
.markdown-body .pl-smw {
456+
.token.maybe-class-name {
487457
color: var(--color-prettylights-syntax-variable);
488458
}
489-
490-
.markdown-body .pl-bu {
491-
color: var(--color-prettylights-syntax-brackethighlighter-unmatched);
492-
}
493-
494-
.markdown-body .pl-ii {
495-
color: var(--color-prettylights-syntax-invalid-illegal-text);
496-
background-color: var(--color-prettylights-syntax-invalid-illegal-bg);
497-
}
498-
499-
.markdown-body .pl-c2 {
500-
color: var(--color-prettylights-syntax-carriage-return-text);
501-
background-color: var(--color-prettylights-syntax-carriage-return-bg);
502-
}
503-
504-
.markdown-body .pl-sr .pl-cce {
505-
font-weight: bold;
506-
color: var(--color-prettylights-syntax-string-regexp);
507-
}
508-
509-
.markdown-body .pl-ml {
510-
color: var(--color-prettylights-syntax-markup-list);
511-
}
512-
513-
.markdown-body .pl-mh,
514-
.markdown-body .pl-mh .pl-en,
515-
.markdown-body .pl-ms {
516-
font-weight: bold;
517-
color: var(--color-prettylights-syntax-markup-heading);
518-
}
519-
520-
.markdown-body .pl-mi {
521-
font-style: italic;
522-
color: var(--color-prettylights-syntax-markup-italic);
523-
}
524-
525-
.markdown-body .pl-mb {
526-
font-weight: bold;
527-
color: var(--color-prettylights-syntax-markup-bold);
528-
}
529-
530-
.markdown-body .pl-md {
531-
color: var(--color-prettylights-syntax-markup-deleted-text);
532-
background-color: var(--color-prettylights-syntax-markup-deleted-bg);
533-
}
534-
535-
.markdown-body .pl-mi1 {
536-
color: var(--color-prettylights-syntax-markup-inserted-text);
537-
background-color: var(--color-prettylights-syntax-markup-inserted-bg);
538-
}
539-
540-
.markdown-body .pl-mc {
541-
color: var(--color-prettylights-syntax-markup-changed-text);
542-
background-color: var(--color-prettylights-syntax-markup-changed-bg);
543-
}
544-
545-
.markdown-body .pl-mi2 {
546-
color: var(--color-prettylights-syntax-markup-ignored-text);
547-
background-color: var(--color-prettylights-syntax-markup-ignored-bg);
459+
.token.property-access, .token.operator, .token.boolean, .token.number, .token.selector .token.class, .token.attr-name, .token.string, .token.char, .token.builtin, .token.inserted {
460+
color: var(--color-prettylights-syntax-constant);
548461
}
549-
550-
.markdown-body .pl-mdr {
551-
font-weight: bold;
552-
color: var(--color-prettylights-syntax-meta-diff-range);
462+
.token.variable {
463+
color: var(--color-prettylights-syntax-constant);
553464
}
554-
555-
.markdown-body .pl-ba {
556-
color: var(--color-prettylights-syntax-brackethighlighter-angle);
465+
.token.entity, .token.url, .language-css .token.string, .style .token.string {
466+
color: var(--color-prettylights-syntax-string);
557467
}
558-
559-
.markdown-body .pl-sg {
560-
color: var(--color-prettylights-syntax-sublimelinter-gutter-mark);
468+
.token.color, .token.atrule, .token.attr-value, .token.function, .token.class-name {
469+
color: var(--color-prettylights-syntax-string);
561470
}
562-
563-
.markdown-body .pl-corl {
564-
text-decoration: underline;
565-
color: var(--color-prettylights-syntax-constant-other-reference-link);
471+
.token.rule, .token.regex, .token.important, .token.keyword {
472+
color: var(--color-prettylights-syntax-keyword);
566473
}
474+
.token.important, .token.bold { font-weight: bold; }
475+
.token.italic { font-style: italic; }
476+
.token.entity { cursor: help; }
567477

568478
.markdown-body [data-catalyst] {
569479
display: block;

0 commit comments

Comments
 (0)