diff --git a/package.json b/package.json
index eea28c61..96c8db91 100644
--- a/package.json
+++ b/package.json
@@ -139,6 +139,9 @@
"turndown": "~5.0.1",
"uuid": "~3.1.0",
"validator": "~10.4.0",
+ "vega": "~5.4.0",
+ "vega-embed": "~4.2.2",
+ "vega-lite": "~3.4.0",
"velocity-animate": "~1.4.0",
"visibilityjs": "~1.2.4",
"viz.js": "~1.7.0",
diff --git a/public/css/markdown.css b/public/css/markdown.css
index 23ed6bab..5cb32d14 100644
--- a/public/css/markdown.css
+++ b/public/css/markdown.css
@@ -126,7 +126,8 @@
.markdown-body pre.sequence-diagram,
.markdown-body pre.graphviz,
.markdown-body pre.mermaid,
-.markdown-body pre.abc {
+.markdown-body pre.abc,
+.markdown-body pre.vega {
text-align: center;
background-color: inherit;
border-radius: 0;
@@ -147,7 +148,8 @@
.markdown-body pre.sequence-diagram > code,
.markdown-body pre.graphviz > code,
.markdown-body pre.mermaid > code,
-.markdown-body pre.abc > code {
+.markdown-body pre.abc > code,
+.markdown-body pre.vega > code {
text-align: left;
}
@@ -155,7 +157,8 @@
.markdown-body pre.sequence-diagram > svg,
.markdown-body pre.graphviz > svg,
.markdown-body pre.mermaid > svg,
-.markdown-body pre.abc > svg {
+.markdown-body pre.abc > svg,
+.markdown-body pre.vega > svg {
max-width: 100%;
height: 100%;
}
diff --git a/public/css/slide.css b/public/css/slide.css
index f8f9c717..0c84ce47 100644
--- a/public/css/slide.css
+++ b/public/css/slide.css
@@ -223,7 +223,8 @@ pre.flow-chart,
pre.sequence-diagram,
pre.graphviz,
pre.mermaid,
-pre.abc {
+pre.abc,
+pre.vega {
text-align: center;
background-color: white;
border-radius: 0;
@@ -234,7 +235,8 @@ pre.flow-chart > code,
pre.sequence-diagram > code,
pre.graphviz > code,
pre.mermaid > code,
-pre.abc > code {
+pre.abc > code,
+pre.vega > code {
text-align: left;
}
@@ -242,7 +244,8 @@ pre.flow-chart > svg,
pre.sequence-diagram > svg,
pre.graphviz > svg,
pre.mermaid > svg,
-pre.abc > svg {
+pre.abc > svg,
+pre.vega > svg {
max-width: 100%;
height: 100%;
}
diff --git a/public/js/extra.js b/public/js/extra.js
index 2024c297..1df8f923 100644
--- a/public/js/extra.js
+++ b/public/js/extra.js
@@ -419,6 +419,32 @@ export function finishView (view) {
console.warn(err)
}
})
+ // vega-lite
+ const vegas = view.find('div.vega.raw').removeClass('raw')
+ vegas.each((key, value) => {
+ try {
+ var $value = $(value)
+ var $ele = $(value).parent().parent()
+
+ const specText = $value.text()
+
+ $value.unwrap()
+ window.vegaEmbed($ele[0], JSON.parse(specText))
+ .then(result => {
+ $ele.addClass('vega')
+ })
+ .catch(err => {
+ $ele.append(`
${escapeHTML(err)}
`)
+ console.warn(err)
+ })
+ .finally(() => {
+ if (window.viewAjaxCallback) window.viewAjaxCallback()
+ })
+ } catch (err) {
+ $ele.append(`${escapeHTML(err)}
`)
+ console.warn(err)
+ }
+ })
// image href new window(emoji not included)
const images = view.find('img.raw[src]').removeClass('raw')
images.each((key, value) => {
@@ -926,6 +952,8 @@ function highlightRender (code, lang) {
return `${code}
`
} else if (lang === 'abc') {
return `${code}
`
+ } else if (lang === 'vega') {
+ return `${code}
`
}
const result = {
value: code
diff --git a/public/js/index.js b/public/js/index.js
index 938ad908..02e5dbcd 100644
--- a/public/js/index.js
+++ b/public/js/index.js
@@ -97,7 +97,7 @@ var cursorActivityDebounce = 50
var cursorAnimatePeriod = 100
var supportContainers = ['success', 'info', 'warning', 'danger', 'spoiler']
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())
-var supportCharts = ['sequence', 'flow', 'graphviz', 'mermaid', 'abc', 'plantuml']
+var supportCharts = ['sequence', 'flow', 'graphviz', 'mermaid', 'abc', 'plantuml', 'vega']
var supportHeaders = [
{
text: '# h1',
diff --git a/public/views/codimd/foot.ejs b/public/views/codimd/foot.ejs
index 61bb10d6..babddf76 100644
--- a/public/views/codimd/foot.ejs
+++ b/public/views/codimd/foot.ejs
@@ -19,7 +19,10 @@
-
+
+
+
+
<%- include ../build/index-scripts %>
<% } else { %>
diff --git a/public/views/pretty.ejs b/public/views/pretty.ejs
index 6bdcf9bc..28c67213 100644
--- a/public/views/pretty.ejs
+++ b/public/views/pretty.ejs
@@ -88,7 +88,10 @@
-
+
+
+
+
<%- include build/pretty-scripts %>
<% } else { %>
diff --git a/public/views/slide.ejs b/public/views/slide.ejs
index b7d73bfd..bb1db9e1 100644
--- a/public/views/slide.ejs
+++ b/public/views/slide.ejs
@@ -104,7 +104,10 @@
-
+
+
+
+
<%- include build/slide-scripts %>
<% } else { %>
diff --git a/webpack.common.js b/webpack.common.js
index 09447634..122889dc 100644
--- a/webpack.common.js
+++ b/webpack.common.js
@@ -258,6 +258,9 @@ module.exports = {
'imports-loader?Raphael=raphael!js-sequence-diagrams',
'expose-loader?Viz!viz.js',
'script-loader!abcjs',
+ 'script-loader!vega',
+ 'script-loader!vega-lite',
+ 'script-loader!vega-embed',
'expose-loader?io!socket.io-client',
'expose-loader?RevealMarkdown!reveal-markdown',
path.join(__dirname, 'public/js/index.js')
@@ -293,6 +296,9 @@ module.exports = {
'imports-loader?Raphael=raphael!js-sequence-diagrams',
'expose-loader?Viz!viz.js',
'script-loader!abcjs',
+ 'script-loader!vega',
+ 'script-loader!vega-lite',
+ 'script-loader!vega-embed',
'expose-loader?RevealMarkdown!reveal-markdown',
path.join(__dirname, 'public/js/pretty.js')
],
@@ -331,6 +337,9 @@ module.exports = {
'imports-loader?Raphael=raphael!js-sequence-diagrams',
'expose-loader?Viz!viz.js',
'script-loader!abcjs',
+ 'script-loader!vega',
+ 'script-loader!vega-lite',
+ 'script-loader!vega-embed',
'headjs',
'expose-loader?Reveal!reveal.js',
'expose-loader?RevealMarkdown!reveal-markdown',
@@ -363,7 +372,10 @@ module.exports = {
'reveal-markdown': path.join(__dirname, 'public/js/reveal-markdown.js'),
abcjs: path.join(__dirname, 'public/vendor/abcjs_basic_3.1.1-min.js'),
raphael: path.join(__dirname, 'node_modules/raphael/raphael.min.js'),
- 'js-sequence-diagrams': path.join(__dirname, 'node_modules/@hackmd/js-sequence-diagrams/build/main.js')
+ 'js-sequence-diagrams': path.join(__dirname, 'node_modules/@hackmd/js-sequence-diagrams/build/main.js'),
+ vega: path.join(__dirname, 'node_modules/vega/build/vega.min.js'),
+ 'vega-lite': path.join(__dirname, 'node_modules/vega-lite/build/vega-lite.min.js'),
+ 'vega-embed': path.join(__dirname, 'node_modules/vega-embed/build/vega-embed.min.js')
}
},