Skip to content

Commit 0a7c48b

Browse files
LincZeroLincZero
committed
style: add notation style
1 parent 46988ff commit 0a7c48b

File tree

3 files changed

+233
-29
lines changed

3 files changed

+233
-29
lines changed

‎meta.txt‎

Lines changed: 30 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,5 @@
11
{
22
"inputs": {
3-
"src/CodeBlock.ts": {
4-
"bytes": 2215,
5-
"imports": [
6-
{
7-
"path": "obsidian",
8-
"kind": "import-statement",
9-
"external": true
10-
}
11-
],
12-
"format": "esm"
13-
},
143
"src/codemirror/Cm6_Util.ts": {
154
"bytes": 1334,
165
"imports": [
@@ -11812,7 +11801,7 @@
1181211801
"format": "esm"
1181311802
},
1181411803
"src/Highlighter.ts": {
11815-
"bytes": 8214,
11804+
"bytes": 8543,
1181611805
"imports": [
1181711806
{
1181811807
"path": "node_modules/@expressive-code/core/dist/index.js",
@@ -11824,6 +11813,11 @@
1182411813
"kind": "import-statement",
1182511814
"original": "shiki"
1182611815
},
11816+
{
11817+
"path": "@shikijs/transformers",
11818+
"kind": "import-statement",
11819+
"external": true
11820+
},
1182711821
{
1182811822
"path": "src/themes/ThemeMapper.ts",
1182911823
"kind": "import-statement",
@@ -11877,18 +11871,23 @@
1187711871
],
1187811872
"format": "esm"
1187911873
},
11874+
"node_modules/@shikijs/transformers/dist/index.mjs": {
11875+
"bytes": 20611,
11876+
"imports": [],
11877+
"format": "esm"
11878+
},
1188011879
"src/main.ts": {
11881-
"bytes": 5171,
11880+
"bytes": 5831,
1188211881
"imports": [
1188311882
{
1188411883
"path": "obsidian",
1188511884
"kind": "import-statement",
1188611885
"external": true
1188711886
},
1188811887
{
11889-
"path": "src/CodeBlock.ts",
11888+
"path": "src/CodeBlock",
1189011889
"kind": "import-statement",
11891-
"original": "src/CodeBlock"
11890+
"external": true
1189211891
},
1189311892
{
1189411893
"path": "src/codemirror/Cm6_ViewPlugin.ts",
@@ -11914,6 +11913,16 @@
1191411913
"path": "src/Highlighter.ts",
1191511914
"kind": "import-statement",
1191611915
"original": "src/Highlighter"
11916+
},
11917+
{
11918+
"path": "node_modules/@shikijs/transformers/dist/index.mjs",
11919+
"kind": "import-statement",
11920+
"original": "@shikijs/transformers"
11921+
},
11922+
{
11923+
"path": "node_modules/shiki/dist/index.mjs",
11924+
"kind": "import-statement",
11925+
"original": "shiki"
1191711926
}
1191811927
],
1191911928
"format": "esm"
@@ -11922,11 +11931,6 @@
1192211931
"outputs": {
1192311932
"main.js": {
1192411933
"imports": [
11925-
{
11926-
"path": "obsidian",
11927-
"kind": "require-call",
11928-
"external": true
11929-
},
1193011934
{
1193111935
"path": "obsidian",
1193211936
"kind": "require-call",
@@ -13950,10 +13954,7 @@
1395013954
"bytesInOutput": 100
1395113955
},
1395213956
"src/main.ts": {
13953-
"bytesInOutput": 2585
13954-
},
13955-
"src/CodeBlock.ts": {
13956-
"bytesInOutput": 986
13957+
"bytesInOutput": 2677
1395713958
},
1395813959
"src/codemirror/Cm6_ViewPlugin.ts": {
1395913960
"bytesInOutput": 2708
@@ -14220,7 +14221,7 @@
1422014221
"bytesInOutput": 32
1422114222
},
1422214223
"node_modules/hast-util-select/lib/pseudo.js": {
14223-
"bytesInOutput": 3782
14224+
"bytesInOutput": 3796
1422414225
},
1422514226
"node_modules/hast-util-select/lib/test.js": {
1422614227
"bytesInOutput": 388
@@ -14329,9 +14330,12 @@
1432914330
},
1433014331
"src/Highlighter.ts": {
1433114332
"bytesInOutput": 4050
14333+
},
14334+
"node_modules/@shikijs/transformers/dist/index.mjs": {
14335+
"bytesInOutput": 4584
1433214336
}
1433314337
},
14334-
"bytes": 19037804
14338+
"bytes": 19041508
1433514339
}
1433614340
}
1433714341
}

‎src/main.ts‎

Lines changed: 26 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,15 @@ import { ShikiSettingsTab } from 'src/settings/SettingsTab';
66
import { filterHighlightAllPlugin } from 'src/PrismPlugin';
77
import { CodeHighlighter } from 'src/Highlighter';
88

9+
import {
10+
transformerNotationDiff,
11+
transformerNotationHighlight,
12+
transformerNotationFocus,
13+
transformerNotationErrorLevel,
14+
transformerMetaHighlight,
15+
} from '@shikijs/transformers';
16+
import { codeToHtml } from 'shiki';
17+
918
export const SHIKI_INLINE_REGEX = /^\{([^\s]+)\} (.*)/i; // format: `{lang} code`
1019

1120
export default class ShikiPlugin extends Plugin {
@@ -102,9 +111,23 @@ export default class ShikiPlugin extends Plugin {
102111
}
103112
}
104113

105-
const codeBlock = new CodeBlock(this, el, source, language, ctx);
106-
107-
ctx.addChild(codeBlock);
114+
const html:string = await codeToHtml(source, {
115+
lang: language,
116+
theme: this.settings.theme,
117+
transformers: [
118+
transformerNotationDiff(),
119+
transformerNotationDiff({ matchAlgorithm: 'v3' }),
120+
transformerNotationHighlight(),
121+
transformerNotationFocus(),
122+
transformerNotationErrorLevel(),
123+
transformerMetaHighlight(),
124+
],
125+
})
126+
el.innerHTML = html
127+
128+
// const codeBlock = new CodeBlock(this, el, source, language, ctx);
129+
130+
// ctx.addChild(codeBlock);
108131
},
109132
1000,
110133
);

‎styles.css‎

Lines changed: 177 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -96,3 +96,180 @@ span.shiki-ul {
9696
.setting-item-control input.shiki-custom-theme-folder {
9797
min-width: 250px;
9898
}
99+
/*
100+
* shiki transformers style
101+
* https://shiki.style/packages/transformers#unstyled
102+
*/
103+
/* color perset */
104+
:root {
105+
--vp-c-gray-1: #dddde3;
106+
--vp-c-gray-2: #e4e4e9;
107+
--vp-c-gray-3: #ebebef;
108+
--vp-c-gray-soft: rgba(142, 150, 170, .14);
109+
--vp-c-indigo-1: #3451b2;
110+
--vp-c-indigo-2: #3a5ccc;
111+
--vp-c-indigo-3: #5672cd;
112+
--vp-c-indigo-soft: rgba(100, 108, 255, .14);
113+
--vp-c-purple-1: #6f42c1;
114+
--vp-c-purple-2: #7e4cc9;
115+
--vp-c-purple-3: #8e5cd9;
116+
--vp-c-purple-soft: rgba(159, 122, 234, .14);
117+
--vp-c-green-1: #18794e;;
118+
--vp-c-green-2: #299764;
119+
--vp-c-green-3: #30a46c;
120+
--vp-c-green-soft: rgba(16, 185, 129, .14);;
121+
--vp-c-yellow-1: #915930;
122+
--vp-c-yellow-2: #946300;
123+
--vp-c-yellow-3: #9f6a00;
124+
--vp-c-yellow-soft: rgba(234, 179, 8, .14);
125+
--vp-c-red-1: #b8272c;
126+
--vp-c-red-2: #d5393e;
127+
--vp-c-red-3: #e0575b;
128+
--vp-c-red-soft: rgba(244, 63, 94, .14);
129+
}
130+
.dark {
131+
--vp-c-gray-1: #515c67;
132+
--vp-c-gray-2: #414853;
133+
--vp-c-gray-3: #32363f;
134+
--vp-c-gray-soft: rgba(101, 117, 133, .16);
135+
--vp-c-indigo-1: #a8b1ff;
136+
--vp-c-indigo-2: #5c73e7;
137+
--vp-c-indigo-3: #3e63dd;
138+
--vp-c-indigo-soft: rgba(100, 108, 255, .16);
139+
--vp-c-purple-1: #c8abfa;
140+
--vp-c-purple-2: #a879e6;
141+
--vp-c-purple-3: #8e5cd9;
142+
--vp-c-purple-soft: rgba(159, 122, 234, .16);
143+
--vp-c-green-1: #3dd68c;;
144+
--vp-c-green-2: #30a46c;
145+
--vp-c-green-3: #298459;
146+
--vp-c-green-soft: rgba(16, 185, 129, .16);;
147+
--vp-c-yellow-1: #f9b44e;
148+
--vp-c-yellow-2: #da8b17;
149+
--vp-c-yellow-3: #a46a0a;
150+
--vp-c-yellow-soft: rgba(234, 179, 8, .16);
151+
--vp-c-red-1: #f66f81;;
152+
--vp-c-red-2: #f14158;
153+
--vp-c-red-3: #b62a3c;
154+
--vp-c-red-soft: rgba(244, 63, 94, .16);;
155+
}
156+
157+
/* Adapt to color preset */
158+
:root {
159+
--vp-c-default-1: var(--vp-c-gray-1);
160+
--vp-c-default-2: var(--vp-c-gray-2);
161+
--vp-c-default-3: var(--vp-c-gray-3);
162+
--vp-c-default-soft: var(--vp-c-gray-soft);;
163+
--vp-c-brand-1: var(--vp-c-indigo-1);
164+
--vp-c-brand-2: var(--vp-c-indigo-2);
165+
--vp-c-brand-3: var(--vp-c-indigo-3);
166+
--vp-c-brand-soft: var(--vp-c-indigo-soft);
167+
--vp-c-brand: var(--vp-c-brand-1);
168+
--vp-c-tip-1: var(--vp-c-brand-1);
169+
--vp-c-tip-2: var(--vp-c-brand-2);
170+
--vp-c-tip-3: var(--vp-c-brand-3);
171+
--vp-c-tip-soft: var(--vp-c-brand-soft);
172+
--vp-c-note-1: var(--vp-c-brand-1);
173+
--vp-c-note-2: var(--vp-c-brand-2);
174+
--vp-c-note-3: var(--vp-c-brand-3);
175+
--vp-c-note-soft: var(--vp-c-brand-soft);
176+
--vp-c-success-1: var(--vp-c-green-1);;
177+
--vp-c-success-2: var(--vp-c-green-2);
178+
--vp-c-success-3: var(--vp-c-green-3);
179+
--vp-c-success-soft: var(--vp-c-green-soft);;
180+
--vp-c-important-1: var(--vp-c-purple-1);
181+
--vp-c-important-2: var(--vp-c-purple-2);
182+
--vp-c-important-3: var(--vp-c-purple-3);
183+
--vp-c-important-soft: var(--vp-c-purple-soft);
184+
--vp-c-warning-1: var(--vp-c-yellow-1);
185+
--vp-c-warning-2: var(--vp-c-yellow-2);
186+
--vp-c-warning-3: var(--vp-c-yellow-3);
187+
--vp-c-warning-soft: var(--vp-c-yellow-soft);;
188+
--vp-c-danger-1: var(--vp-c-red-1);;
189+
--vp-c-danger-2: var(--vp-c-red-2);
190+
--vp-c-danger-3: var(--vp-c-red-3);
191+
--vp-c-danger-soft: var(--vp-c-red-soft);;
192+
--vp-c-caution-1: var(--vp-c-red-1);
193+
--vp-c-caution-2: var(--vp-c-red-2);
194+
--vp-c-caution-3: var(--vp-c-red-3);
195+
--vp-c-caution-soft: var(--vp-c-red-soft)
196+
}
197+
198+
/* Adapt to vuepress */
199+
:root {
200+
--vp-code-line-height: 1.7;
201+
--vp-code-font-size: .875em;
202+
--vp-code-color: var(--vp-c-brand-1);
203+
--vp-code-link-color: var(--vp-c-brand-1);
204+
--vp-code-link-hover-color: var(--vp-c-brand-2);
205+
--vp-code-bg: var(--vp-c-default-soft);
206+
--vp-code-block-color: var(--vp-c-text-2);
207+
--vp-code-block-bg: var(--vp-c-bg-alt);
208+
--vp-code-block-divider-color: var(--vp-c-gutter);
209+
--vp-code-lang-color: var(--vp-c-text-2);
210+
--vp-code-line-highlight-color: var(--vp-c-default-soft);;
211+
--vp-code-line-number-color: var(--vp-c-text-2);
212+
--vp-code-line-diff-add-color: var(--vp-c-success-soft);;
213+
--vp-code-line-diff-add-symbol-color: var(--vp-c-success-1);;
214+
--vp-code-line-diff-remove-color: var(--vp-c-danger-soft);;
215+
--vp-code-line-diff-remove-symbol-color: var(--vp-c-danger-1);;
216+
--vp-code-line-warning-color: var(--vp-c-warning-soft);;
217+
--vp-code-line-error-color: var(--vp-c-danger-soft);;
218+
--vp-code-copy-code-border-color: var(--vp-c-divider);
219+
--vp-code-copy-code-bg: var(--vp-c-bg-soft);
220+
--vp-code-copy-code-hover-border-color: var(--vp-c-divider);
221+
--vp-code-copy-code-hover-bg: var(--vp-c-bg);
222+
--vp-code-copy-code-active-text: var(--vp-c-text-2);
223+
--vp-code-copy-copied-text-content: "Copied";
224+
--vp-code-tab-divider: var(--vp-code-block-divider-color);
225+
--vp-code-tab-text-color: var(--vp-c-text-2);
226+
--vp-code-tab-bg: var(--vp-code-block-bg);
227+
--vp-code-tab-hover-text-color: var(--vp-c-text-1);
228+
--vp-code-tab-active-text-color: var(--vp-c-text-1);
229+
--vp-code-tab-active-bar-color: var(--vp-c-brand-1)
230+
}
231+
232+
code>span.line.diff {
233+
transition: background-color .5s;
234+
margin: 0 -24px;
235+
padding: 0 24px;
236+
width: calc(100% + 48px);
237+
display: inline-block
238+
}
239+
code>span.line.diff:before {
240+
position: absolute;
241+
left: 5px; /*old 10*/
242+
}
243+
code>span.line.diff.add {
244+
background-color: var(--vp-code-line-diff-add-color);
245+
}
246+
code>span.line.diff.add:before {
247+
content: "+";
248+
color: var(--vp-code-line-diff-add-symbol-color)
249+
}
250+
code>span.line.diff.remove {
251+
background-color: var(--vp-code-line-diff-remove-color);
252+
}
253+
code>span.line.diff.remove:before {
254+
content: "-";
255+
color: var(--vp-code-line-diff-remove-symbol-color)
256+
}
257+
code>span.line.highlighted {
258+
background-color: var(--vp-code-line-highlight-color);
259+
transition: background-color .5s;
260+
margin: 0 -24px;
261+
padding: 0 24px;
262+
width: calc(100% + 48px);
263+
display: inline-block
264+
}
265+
code>span.line.highlighted.error {
266+
background-color: var(--vp-code-line-error-color)
267+
}
268+
code>span.line.highlighted.warning {
269+
background-color: var(--vp-code-line-warning-color)
270+
}
271+
272+
/* chore fix: keep color magin zero */
273+
code>span.line {
274+
line-height: 24px;
275+
}

0 commit comments

Comments
 (0)