@@ -20,27 +20,124 @@ import Viz from 'viz.js';
20
20
import { Module , render } from 'viz.js/full.render.js' ;
21
21
22
22
function init ( ) {
23
- const mermaids = $ ( 'span.mermaid.raw' ) ;
24
- mermaids . removeClass ( 'raw' ) ;
25
- mermaids . each ( ( key , value ) => {
23
+ try {
24
+ updateMermaid ( ) ;
25
+ updateFlowcharts ( ) ;
26
+ updateSequences ( ) ;
27
+ updateGraphviz ( ) ;
28
+ updateMathjax ( ) ;
29
+ updateABC ( ) ;
30
+ updateExtraTags ( ) ;
31
+ updateLineNumbers ( ) ;
32
+ } catch ( err ) {
33
+ console . error ( err ) ;
34
+ }
35
+ }
36
+
37
+ window . addEventListener ( 'vscode.markdown.updateContent' , init ) ;
38
+
39
+ init ( ) ;
40
+
41
+ function updateLineNumbers ( ) {
42
+ // update continue line numbers
43
+ const linenumberdivs = $ ( '.gutter.linenumber' ) . toArray ( ) ;
44
+ for ( let i = 0 ; i < linenumberdivs . length ; i ++ ) {
45
+ if ( $ ( linenumberdivs [ i ] ) . hasClass ( 'continue' ) ) {
46
+ const startnumber = linenumberdivs [ i - 1 ]
47
+ ? parseInt (
48
+ $ ( linenumberdivs [ i - 1 ] )
49
+ . find ( '> span' )
50
+ . last ( )
51
+ . attr ( 'data-linenumber' )
52
+ )
53
+ : 0 ;
54
+ $ ( linenumberdivs [ i ] )
55
+ . find ( '> span' )
56
+ . each ( ( key , value ) => {
57
+ $ ( value ) . attr ( 'data-linenumber' , startnumber + key + 1 ) ;
58
+ } ) ;
59
+ }
60
+ }
61
+ }
62
+
63
+ function updateABC ( ) {
64
+ $ ( 'span.abc.raw' )
65
+ . removeClass ( 'raw' )
66
+ . each ( ( key , value ) => {
67
+ let $value ;
68
+ try {
69
+ $value = $ ( value ) ;
70
+ const $ele = $ ( value ) . parent ( ) . parent ( ) ;
71
+
72
+ abcjs . renderAbc ( value , $value . text ( ) ) ;
73
+
74
+ $ele . addClass ( 'abc' ) ;
75
+ $value . children ( ) . unwrap ( ) . unwrap ( ) ;
76
+ const svg = $ele . find ( '> svg' ) ;
77
+ svg [ 0 ] . setAttribute ( 'viewBox' , `0 0 ${ svg . attr ( 'width' ) } ${ svg . attr ( 'height' ) } ` ) ;
78
+ svg [ 0 ] . setAttribute ( 'preserveAspectRatio' , 'xMidYMid meet' ) ;
79
+ } catch ( err ) {
80
+ $value . unwrap ( ) ;
81
+ $value . parent ( ) . append ( `<div class="alert alert-warning">${ S ( err ) . escapeHTML ( ) . s } </div>` ) ;
82
+ console . warn ( err ) ;
83
+ }
84
+ } ) ;
85
+ }
86
+
87
+ function updateMathjax ( ) {
88
+ $ ( 'span.mathjax.raw' )
89
+ . removeClass ( 'raw' )
90
+ . each ( function ( key , value ) {
91
+ const $value = $ ( value ) ;
92
+ const $ele = $ ( value ) . parent ( ) . parent ( ) ;
93
+ $value . unwrap ( ) ;
94
+
95
+ let result ;
96
+ if ( $ ( value ) . hasClass ( 'display' ) ) {
97
+ result = katex . renderToString ( $value . text ( ) , {
98
+ throwOnError : false ,
99
+ displayMode : true ,
100
+ } ) ;
101
+ } else {
102
+ result = katex . renderToString ( $value . text ( ) , {
103
+ throwOnError : false ,
104
+ } ) ;
105
+ }
106
+
107
+ $value . html ( result ) ;
108
+ $value . children ( ) . unwrap ( ) ;
109
+ } ) ;
110
+ }
111
+
112
+ function updateSequences ( ) {
113
+ const sequences = $ ( 'span.sequence-diagram.raw' ) ;
114
+ sequences . removeClass ( 'raw' ) ;
115
+ sequences . each ( ( key , value ) => {
26
116
let $ele ;
27
117
try {
28
118
const $value = $ ( value ) ;
29
- $ele = $ ( value ) . closest ( 'pre' ) ;
119
+ $ele = $ ( value ) . parent ( ) . parent ( ) ;
30
120
31
- mermaid . parse ( $value . text ( ) ) ;
32
- $ele . addClass ( 'mermaid' ) ;
33
- $ele . html ( $value . text ( ) ) ;
34
- mermaid . init ( undefined , $ele ) ;
121
+ const sequence = $value as any ;
122
+ sequence . sequenceDiagram ( {
123
+ theme : 'simple' ,
124
+ } ) ;
125
+
126
+ $ele . addClass ( 'sequence-diagram' ) ;
127
+ $value . children ( ) . unwrap ( ) . unwrap ( ) ;
128
+ const svg = $ele . find ( '> svg' ) ;
129
+ svg [ 0 ] . setAttribute ( 'viewBox' , `0 0 ${ svg . attr ( 'width' ) } ${ svg . attr ( 'height' ) } ` ) ;
130
+ svg [ 0 ] . setAttribute ( 'preserveAspectRatio' , 'xMidYMid meet' ) ;
35
131
} catch ( err ) {
36
132
// $value.unwrap()
37
- // $value.parent().append(`<div class="alert alert-warning">${S(err.str ).escapeHTML().s}</div>`)
133
+ // $value.parent().append(`<div class="alert alert-warning">${S(err).escapeHTML().s}</div>`)
38
134
// console.warn(err)
39
- // console.log($value.text())
40
- $ele . addClass ( 'mermaid' ) ;
135
+ $ele . addClass ( 'sequence-diagram' ) ;
41
136
}
42
137
} ) ;
138
+ }
43
139
140
+ function updateFlowcharts ( ) {
44
141
const flows = $ ( 'span.flow-chart.raw' ) ;
45
142
flows . removeClass ( 'raw' ) ;
46
143
flows . each ( ( key , value ) => {
@@ -66,35 +163,36 @@ function init() {
66
163
$ele . addClass ( 'flow-chart' ) ;
67
164
}
68
165
} ) ;
166
+ }
69
167
70
- const sequences = $ ( 'span.sequence-diagram.raw' ) ;
71
- sequences . removeClass ( 'raw' ) ;
72
- sequences . each ( ( key , value ) => {
168
+ function updateMermaid ( ) {
169
+ const mermaids = $ ( 'span.mermaid.raw' ) ;
170
+ mermaids . removeClass ( 'raw' ) ;
171
+ mermaids . each ( ( key , value ) => {
73
172
let $ele ;
74
173
try {
75
174
const $value = $ ( value ) ;
76
- $ele = $ ( value ) . parent ( ) . parent ( ) ;
175
+ $ele = $ ( value ) . closest ( 'pre' ) ;
77
176
78
- const sequence = $value as any ;
79
- sequence . sequenceDiagram ( {
80
- theme : 'simple' ,
81
- } ) ;
177
+ const text = $value . text ( ) ;
82
178
83
- $ele . addClass ( 'sequence-diagram' ) ;
84
- $value . children ( ) . unwrap ( ) . unwrap ( ) ;
85
- const svg = $ele . find ( '> svg' ) ;
86
- svg [ 0 ] . setAttribute ( 'viewBox' , `0 0 ${ svg . attr ( 'width' ) } ${ svg . attr ( 'height' ) } ` ) ;
87
- svg [ 0 ] . setAttribute ( 'preserveAspectRatio' , 'xMidYMid meet' ) ;
179
+ if ( mermaid . parse ( text ) ) {
180
+ $ele . addClass ( 'mermaid' ) ;
181
+ $ele . text ( text ) ;
182
+ mermaid . init ( undefined , $ele ) ;
183
+ }
88
184
} catch ( err ) {
89
185
// $value.unwrap()
90
- // $value.parent().append(`<div class="alert alert-warning">${S(err).escapeHTML().s}</div>`)
91
- // console.warn(err)
92
- $ele . addClass ( 'sequence-diagram' ) ;
186
+ // $value.parent().append(`<div class="alert alert-warning">${S(err.str).escapeHTML().s}</div>`)
187
+ console . warn ( err ) ;
188
+ // console.log($value.text())
189
+ $ele . addClass ( 'mermaid' ) ;
93
190
}
94
191
} ) ;
192
+ }
95
193
194
+ function updateGraphviz ( ) {
96
195
let viz = new Viz ( { Module, render } ) ;
97
-
98
196
const graphvizs = $ ( 'span.graphviz.raw' ) ;
99
197
graphvizs . removeClass ( 'raw' ) ;
100
198
graphvizs . each ( function ( key , value ) {
@@ -116,7 +214,7 @@ function init() {
116
214
$value . children ( ) . unwrap ( ) ;
117
215
} )
118
216
. catch ( ( err ) => {
119
- viz = new Viz ( { Module, render } ) ;
217
+ viz = new Viz ( { Module, render : init } ) ;
120
218
121
219
// $value.parent().append(`<div class="alert alert-warning">${S(err).escapeHTML().s}</div>`)
122
220
// console.warn(err)
@@ -126,52 +224,9 @@ function init() {
126
224
// console.warn(err)
127
225
}
128
226
} ) ;
227
+ }
129
228
130
- $ ( 'span.mathjax.raw' )
131
- . removeClass ( 'raw' )
132
- . each ( function ( key , value ) {
133
- const $value = $ ( value ) ;
134
- const $ele = $ ( value ) . parent ( ) . parent ( ) ;
135
- $value . unwrap ( ) ;
136
-
137
- let result ;
138
- if ( $ ( value ) . hasClass ( 'display' ) ) {
139
- result = katex . renderToString ( $value . text ( ) , {
140
- throwOnError : false ,
141
- displayMode : true ,
142
- } ) ;
143
- } else {
144
- result = katex . renderToString ( $value . text ( ) , {
145
- throwOnError : false ,
146
- } ) ;
147
- }
148
-
149
- $value . html ( result ) ;
150
- $value . children ( ) . unwrap ( ) ;
151
- } ) ;
152
-
153
- $ ( 'span.abc.raw' )
154
- . removeClass ( 'raw' )
155
- . each ( ( key , value ) => {
156
- let $value ;
157
- try {
158
- $value = $ ( value ) ;
159
- const $ele = $ ( value ) . parent ( ) . parent ( ) ;
160
-
161
- abcjs . renderAbc ( value , $value . text ( ) ) ;
162
-
163
- $ele . addClass ( 'abc' ) ;
164
- $value . children ( ) . unwrap ( ) . unwrap ( ) ;
165
- const svg = $ele . find ( '> svg' ) ;
166
- svg [ 0 ] . setAttribute ( 'viewBox' , `0 0 ${ svg . attr ( 'width' ) } ${ svg . attr ( 'height' ) } ` ) ;
167
- svg [ 0 ] . setAttribute ( 'preserveAspectRatio' , 'xMidYMid meet' ) ;
168
- } catch ( err ) {
169
- $value . unwrap ( ) ;
170
- $value . parent ( ) . append ( `<div class="alert alert-warning">${ S ( err ) . escapeHTML ( ) . s } </div>` ) ;
171
- console . warn ( err ) ;
172
- }
173
- } ) ;
174
-
229
+ function updateExtraTags ( ) {
175
230
// regex for extra tags
176
231
const spaceregex = / \s * / ;
177
232
const notinhtmltagregex = / (? ! [ ^ < ] * > | [ ^ < > ] * < \/ ) / ;
@@ -209,28 +264,4 @@ function init() {
209
264
$ ( value ) . closest ( 'blockquote' ) . css ( 'border-left-color' , $ ( value ) . attr ( 'data-color' ) ) ;
210
265
} ) ;
211
266
} ) ;
212
-
213
- // update continue line numbers
214
- const linenumberdivs = $ ( '.gutter.linenumber' ) . toArray ( ) ;
215
- for ( let i = 0 ; i < linenumberdivs . length ; i ++ ) {
216
- if ( $ ( linenumberdivs [ i ] ) . hasClass ( 'continue' ) ) {
217
- const startnumber = linenumberdivs [ i - 1 ]
218
- ? parseInt (
219
- $ ( linenumberdivs [ i - 1 ] )
220
- . find ( '> span' )
221
- . last ( )
222
- . attr ( 'data-linenumber' )
223
- )
224
- : 0 ;
225
- $ ( linenumberdivs [ i ] )
226
- . find ( '> span' )
227
- . each ( ( key , value ) => {
228
- $ ( value ) . attr ( 'data-linenumber' , startnumber + key + 1 ) ;
229
- } ) ;
230
- }
231
- }
232
267
}
233
-
234
- window . addEventListener ( 'vscode.markdown.updateContent' , init ) ;
235
-
236
- init ( ) ;
0 commit comments