Skip to content

Commit 49c6672

Browse files
jackycutejackycute
committed
feat: add support of vega-lite
Signed-off-by: Max Wu <jackymaxj@gmail.com>
1 parent 9042b19 commit 49c6672

File tree

9 files changed

+69
-11
lines changed

9 files changed

+69
-11
lines changed

‎package.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -139,6 +139,9 @@
139139
"turndown": "~5.0.1",
140140
"uuid": "~3.1.0",
141141
"validator": "~10.4.0",
142+
"vega": "~5.4.0",
143+
"vega-embed": "~4.2.2",
144+
"vega-lite": "~3.4.0",
142145
"velocity-animate": "~1.4.0",
143146
"visibilityjs": "~1.2.4",
144147
"viz.js": "~1.7.0",

‎public/css/markdown.css

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -126,7 +126,8 @@
126126
.markdown-body pre.sequence-diagram,
127127
.markdown-body pre.graphviz,
128128
.markdown-body pre.mermaid,
129-
.markdown-body pre.abc {
129+
.markdown-body pre.abc,
130+
.markdown-body pre.vega {
130131
text-align: center;
131132
background-color: inherit;
132133
border-radius: 0;
@@ -147,15 +148,17 @@
147148
.markdown-body pre.sequence-diagram > code,
148149
.markdown-body pre.graphviz > code,
149150
.markdown-body pre.mermaid > code,
150-
.markdown-body pre.abc > code {
151+
.markdown-body pre.abc > code,
152+
.markdown-body pre.vega > code {
151153
text-align: left;
152154
}
153155

154156
.markdown-body pre.flow-chart > svg,
155157
.markdown-body pre.sequence-diagram > svg,
156158
.markdown-body pre.graphviz > svg,
157159
.markdown-body pre.mermaid > svg,
158-
.markdown-body pre.abc > svg {
160+
.markdown-body pre.abc > svg,
161+
.markdown-body pre.vega > svg {
159162
max-width: 100%;
160163
height: 100%;
161164
}

‎public/css/slide.css

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -223,7 +223,8 @@ pre.flow-chart,
223223
pre.sequence-diagram,
224224
pre.graphviz,
225225
pre.mermaid,
226-
pre.abc {
226+
pre.abc,
227+
pre.vega {
227228
text-align: center;
228229
background-color: white;
229230
border-radius: 0;
@@ -234,15 +235,17 @@ pre.flow-chart > code,
234235
pre.sequence-diagram > code,
235236
pre.graphviz > code,
236237
pre.mermaid > code,
237-
pre.abc > code {
238+
pre.abc > code,
239+
pre.vega > code {
238240
text-align: left;
239241
}
240242

241243
pre.flow-chart > svg,
242244
pre.sequence-diagram > svg,
243245
pre.graphviz > svg,
244246
pre.mermaid > svg,
245-
pre.abc > svg {
247+
pre.abc > svg,
248+
pre.vega > svg {
246249
max-width: 100%;
247250
height: 100%;
248251
}

‎public/js/extra.js

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -419,6 +419,32 @@ export function finishView (view) {
419419
console.warn(err)
420420
}
421421
})
422+
// vega-lite
423+
const vegas = view.find('div.vega.raw').removeClass('raw')
424+
vegas.each((key, value) => {
425+
try {
426+
var $value = $(value)
427+
var $ele = $(value).parent().parent()
428+
429+
const specText = $value.text()
430+
431+
$value.unwrap()
432+
window.vegaEmbed($ele[0], JSON.parse(specText))
433+
.then(result => {
434+
$ele.addClass('vega')
435+
})
436+
.catch(err => {
437+
$ele.append(`<div class="alert alert-warning">${escapeHTML(err)}</div>`)
438+
console.warn(err)
439+
})
440+
.finally(() => {
441+
if (window.viewAjaxCallback) window.viewAjaxCallback()
442+
})
443+
} catch (err) {
444+
$ele.append(`<div class="alert alert-warning">${escapeHTML(err)}</div>`)
445+
console.warn(err)
446+
}
447+
})
422448
// image href new window(emoji not included)
423449
const images = view.find('img.raw[src]').removeClass('raw')
424450
images.each((key, value) => {
@@ -926,6 +952,8 @@ function highlightRender (code, lang) {
926952
return `<div class="mermaid raw">${code}</div>`
927953
} else if (lang === 'abc') {
928954
return `<div class="abc raw">${code}</div>`
955+
} else if (lang === 'vega') {
956+
return `<div class="vega raw">${code}</div>`
929957
}
930958
const result = {
931959
value: code

‎public/js/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -97,7 +97,7 @@ var cursorActivityDebounce = 50
9797
var cursorAnimatePeriod = 100
9898
var supportContainers = ['success', 'info', 'warning', 'danger', 'spoiler']
9999
var supportCodeModes = ['javascript', 'typescript', 'jsx', 'htmlmixed', 'htmlembedded', 'css', 'xml', 'clike', 'clojure', 'ruby', 'python', 'shell', 'php', 'sql', 'haskell', 'coffeescript', 'yaml', 'pug', 'lua', 'cmake', 'nginx', 'perl', 'sass', 'r', 'dockerfile', 'tiddlywiki', 'mediawiki', 'go', 'gherkin'].concat(hljs.listLanguages())
100-
var supportCharts = ['sequence', 'flow', 'graphviz', 'mermaid', 'abc', 'plantuml']
100+
var supportCharts = ['sequence', 'flow', 'graphviz', 'mermaid', 'abc', 'plantuml', 'vega']
101101
var supportHeaders = [
102102
{
103103
text: '# h1',

‎public/views/codimd/foot.ejs

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,10 @@
1919
<script src="https://cdnjs.cloudflare.com/ajax/libs/gist-embed/2.6.0/gist-embed.min.js" integrity="sha256-KyF2D6xPIJUW5sUDSs93vWyZm+1RzIpKCexxElmxl8g=" crossorigin="anonymous" defer></script>
2020
<script src="https://cdnjs.cloudflare.com/ajax/libs/viz.js/1.7.0/viz.js" integrity="sha256-8t+rndrF+TU4JtelmOH1lDHTMe2ovhO2UbzDArp5lY8=" crossorigin="anonymous" defer></script>
2121
<script src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.11.8/validator.min.js" integrity="sha256-LHeY7YoYJ0SSXbCx7sR14Pqna+52moaH3bhv0Mjzd/M=" crossorigin="anonymous" defer></script>
22-
<script src="https://cdnjs.cloudflare.com/ajax/libs/abcjs/3.1.1/abcjs_basic-min.js" integrity="sha256-Sq1r2XXWXQoShQKsS0Wrf5r7fRkErd9Fat9vHYeU68s=" crossorigin="anonymous"></script>
22+
<script src="https://cdnjs.cloudflare.com/ajax/libs/abcjs/3.1.1/abcjs_basic-min.js" integrity="sha256-Sq1r2XXWXQoShQKsS0Wrf5r7fRkErd9Fat9vHYeU68s=" crossorigin="anonymous" defer></script>
23+
<script src="https://cdnjs.cloudflare.com/ajax/libs/vega/5.4.0/vega.min.js" integrity="sha256-PrkRj4B3I5V9yHBLdO3jyyqNUwSKS1CXXIh3VrnFPEU=" crossorigin="anonymous" defer></script>
24+
<script src="https://cdnjs.cloudflare.com/ajax/libs/vega-lite/3.4.0/vega-lite.min.js" integrity="sha256-ro+FWr16NboXJ5rSwInNli1P16ObUXnWUJMgKc8KnHI=" crossorigin="anonymous" defer></script>
25+
<script src="https://cdnjs.cloudflare.com/ajax/libs/vega-embed/4.2.2/vega-embed.min.js" integrity="sha256-FvIpRBgWEczIjFNpbshtVJbx3QlxqxkBkf+xqZeOxUU=" crossorigin="anonymous" defer></script>
2326
<%- include ../build/index-scripts %>
2427
<% } else { %>
2528
<script src="<%- serverURL %>/build/MathJax/MathJax.js" defer></script>

‎public/views/pretty.ejs

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,10 @@
8888
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js" integrity="sha256-/BfiIkHlHoVihZdc6TFuj7MmJ0TWcWsMXkeDFwhi0zw=" crossorigin="anonymous" defer></script>
8989
<script src="https://cdnjs.cloudflare.com/ajax/libs/gist-embed/2.6.0/gist-embed.min.js" integrity="sha256-KyF2D6xPIJUW5sUDSs93vWyZm+1RzIpKCexxElmxl8g=" crossorigin="anonymous" defer></script>
9090
<script src="https://cdnjs.cloudflare.com/ajax/libs/viz.js/1.7.0/viz.js" integrity="sha256-8t+rndrF+TU4JtelmOH1lDHTMe2ovhO2UbzDArp5lY8=" crossorigin="anonymous" defer></script>
91-
<script src="https://cdnjs.cloudflare.com/ajax/libs/abcjs/3.1.1/abcjs_basic-min.js" integrity="sha256-Sq1r2XXWXQoShQKsS0Wrf5r7fRkErd9Fat9vHYeU68s=" crossorigin="anonymous"></script>
91+
<script src="https://cdnjs.cloudflare.com/ajax/libs/abcjs/3.1.1/abcjs_basic-min.js" integrity="sha256-Sq1r2XXWXQoShQKsS0Wrf5r7fRkErd9Fat9vHYeU68s=" crossorigin="anonymous" defer></script>
92+
<script src="https://cdnjs.cloudflare.com/ajax/libs/vega/5.4.0/vega.min.js" integrity="sha256-PrkRj4B3I5V9yHBLdO3jyyqNUwSKS1CXXIh3VrnFPEU=" crossorigin="anonymous" defer></script>
93+
<script src="https://cdnjs.cloudflare.com/ajax/libs/vega-lite/3.4.0/vega-lite.min.js" integrity="sha256-ro+FWr16NboXJ5rSwInNli1P16ObUXnWUJMgKc8KnHI=" crossorigin="anonymous" defer></script>
94+
<script src="https://cdnjs.cloudflare.com/ajax/libs/vega-embed/4.2.2/vega-embed.min.js" integrity="sha256-FvIpRBgWEczIjFNpbshtVJbx3QlxqxkBkf+xqZeOxUU=" crossorigin="anonymous" defer></script>
9295
<%- include build/pretty-scripts %>
9396
<% } else { %>
9497
<script src="<%- serverURL %>/build/MathJax/MathJax.js" defer></script>

‎public/views/slide.ejs

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,10 @@
104104
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js" integrity="sha256-/BfiIkHlHoVihZdc6TFuj7MmJ0TWcWsMXkeDFwhi0zw=" crossorigin="anonymous" defer></script>
105105
<script src="https://cdnjs.cloudflare.com/ajax/libs/gist-embed/2.6.0/gist-embed.min.js" integrity="sha256-KyF2D6xPIJUW5sUDSs93vWyZm+1RzIpKCexxElmxl8g=" crossorigin="anonymous" defer></script>
106106
<script src="https://cdnjs.cloudflare.com/ajax/libs/viz.js/1.7.0/viz.js" integrity="sha256-8t+rndrF+TU4JtelmOH1lDHTMe2ovhO2UbzDArp5lY8=" crossorigin="anonymous" defer></script>
107-
<script src="https://cdnjs.cloudflare.com/ajax/libs/abcjs/3.1.1/abcjs_basic-min.js" integrity="sha256-Sq1r2XXWXQoShQKsS0Wrf5r7fRkErd9Fat9vHYeU68s=" crossorigin="anonymous"></script>
107+
<script src="https://cdnjs.cloudflare.com/ajax/libs/abcjs/3.1.1/abcjs_basic-min.js" integrity="sha256-Sq1r2XXWXQoShQKsS0Wrf5r7fRkErd9Fat9vHYeU68s=" crossorigin="anonymous" defer></script>
108+
<script src="https://cdnjs.cloudflare.com/ajax/libs/vega/5.4.0/vega.min.js" integrity="sha256-PrkRj4B3I5V9yHBLdO3jyyqNUwSKS1CXXIh3VrnFPEU=" crossorigin="anonymous" defer></script>
109+
<script src="https://cdnjs.cloudflare.com/ajax/libs/vega-lite/3.4.0/vega-lite.min.js" integrity="sha256-ro+FWr16NboXJ5rSwInNli1P16ObUXnWUJMgKc8KnHI=" crossorigin="anonymous" defer></script>
110+
<script src="https://cdnjs.cloudflare.com/ajax/libs/vega-embed/4.2.2/vega-embed.min.js" integrity="sha256-FvIpRBgWEczIjFNpbshtVJbx3QlxqxkBkf+xqZeOxUU=" crossorigin="anonymous" defer></script>
108111
<%- include build/slide-scripts %>
109112
<% } else { %>
110113
<script src="<%- serverURL %>/build/MathJax/MathJax.js" defer></script>

‎webpack.common.js

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -258,6 +258,9 @@ module.exports = {
258258
'imports-loader?Raphael=raphael!js-sequence-diagrams',
259259
'expose-loader?Viz!viz.js',
260260
'script-loader!abcjs',
261+
'script-loader!vega',
262+
'script-loader!vega-lite',
263+
'script-loader!vega-embed',
261264
'expose-loader?io!socket.io-client',
262265
'expose-loader?RevealMarkdown!reveal-markdown',
263266
path.join(__dirname, 'public/js/index.js')
@@ -293,6 +296,9 @@ module.exports = {
293296
'imports-loader?Raphael=raphael!js-sequence-diagrams',
294297
'expose-loader?Viz!viz.js',
295298
'script-loader!abcjs',
299+
'script-loader!vega',
300+
'script-loader!vega-lite',
301+
'script-loader!vega-embed',
296302
'expose-loader?RevealMarkdown!reveal-markdown',
297303
path.join(__dirname, 'public/js/pretty.js')
298304
],
@@ -331,6 +337,9 @@ module.exports = {
331337
'imports-loader?Raphael=raphael!js-sequence-diagrams',
332338
'expose-loader?Viz!viz.js',
333339
'script-loader!abcjs',
340+
'script-loader!vega',
341+
'script-loader!vega-lite',
342+
'script-loader!vega-embed',
334343
'headjs',
335344
'expose-loader?Reveal!reveal.js',
336345
'expose-loader?RevealMarkdown!reveal-markdown',
@@ -363,7 +372,10 @@ module.exports = {
363372
'reveal-markdown': path.join(__dirname, 'public/js/reveal-markdown.js'),
364373
abcjs: path.join(__dirname, 'public/vendor/abcjs_basic_3.1.1-min.js'),
365374
raphael: path.join(__dirname, 'node_modules/raphael/raphael.min.js'),
366-
'js-sequence-diagrams': path.join(__dirname, 'node_modules/@hackmd/js-sequence-diagrams/build/main.js')
375+
'js-sequence-diagrams': path.join(__dirname, 'node_modules/@hackmd/js-sequence-diagrams/build/main.js'),
376+
vega: path.join(__dirname, 'node_modules/vega/build/vega.min.js'),
377+
'vega-lite': path.join(__dirname, 'node_modules/vega-lite/build/vega-lite.min.js'),
378+
'vega-embed': path.join(__dirname, 'node_modules/vega-embed/build/vega-embed.min.js')
367379
}
368380
},
369381

0 commit comments

Comments
 (0)