This is an automated email from the ASF dual-hosted git repository. ovilia pushed a commit to branch master in repository https://gitbox.apache.org/repos/asf/incubator-echarts-handbook.git
commit d612fb152af11ec342f8bb0fe879e62f9974bb65 Author: Ovilia <zwl.s...@gmail.com> AuthorDate: Thu Apr 16 15:33:22 2020 +0800 feat: code highlighting and iframe demo --- .gitignore | 1 + README.md | 2 ++ configs/config.js | 3 ++- contents/zh/get-started.md | 2 +- layouts/default.vue | 13 +++++++++++++ package-lock.json | 19 +++++++++++++++++++ package.json | 1 + pages/en/_post.vue | 20 ++++++++++++++++++++ pages/helper/post.ts | 25 +++++++++++++++++++++++++ pages/zh/_post.vue | 16 ++-------------- 10 files changed, 86 insertions(+), 16 deletions(-) diff --git a/.gitignore b/.gitignore index e8f682b..e10e71c 100644 --- a/.gitignore +++ b/.gitignore @@ -6,6 +6,7 @@ npm-debug.log* yarn-debug.log* yarn-error.log* +.vscode # Runtime data pids diff --git a/README.md b/README.md index 717982f..f779ff9 100644 --- a/README.md +++ b/README.md @@ -12,6 +12,8 @@ npm install npm run dev ``` +Open in browser: http://localhost:3000/echarts-handbook/dist/ + ## Release ```bash diff --git a/configs/config.js b/configs/config.js index 1300256..2e73436 100644 --- a/configs/config.js +++ b/configs/config.js @@ -1,3 +1,4 @@ export default { - rootPath: '/echarts-handbook/dist' + rootPath: '/echarts-handbook/dist', + galleryViewPath: 'https://echarts.apache.org/examples/zh/view.html?c=' }; diff --git a/contents/zh/get-started.md b/contents/zh/get-started.md index d2f6668..b2b2db9 100644 --- a/contents/zh/get-started.md +++ b/contents/zh/get-started.md @@ -86,6 +86,6 @@ 这样你的第一个图表就诞生了! -~[600x300](${galleryViewPath}doc-example/getting-started&reset=1&edit=1) +<iframe width="600" height="300" src="${galleryViewPath}doc-example/getting-started&reset=1&edit=1"></iframe> 你也可以直接进入 [ECharts Gallery](${galleryEditorPath}doc-example/getting-started) 中查看编辑示例 diff --git a/layouts/default.vue b/layouts/default.vue index 87cedc8..1cc022d 100644 --- a/layouts/default.vue +++ b/layouts/default.vue @@ -13,6 +13,8 @@ </div> </div> </div> + + <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/styles/github.min.css"> </div> </template> @@ -80,4 +82,15 @@ blockquote { blockquote :last-child { margin-bottom: 0; } + +pre code { + padding: 10px 15px !important; + border-radius: 5px; + border: 1px solid #eee; +} + +iframe { + border: 1px solid #ddd; + margin: 10px 0; +} </style> diff --git a/package-lock.json b/package-lock.json index a2b4c2d..eb72400 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6383,6 +6383,11 @@ "resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz", "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==" }, + "highlight.js": { + "version": "9.18.1", + "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-9.18.1.tgz", + "integrity": "sha512-OrVKYz70LHsnCgmbXctv/bfuvntIKDz177h0Co37DQ5jamGZLVmoCVMtjMtNZY3X9DrCcKfklHPNeA0uPZhSJg==" + }, "hmac-drbg": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz", @@ -7308,6 +7313,11 @@ "integrity": "sha512-3j8wdDzYuWO3lM3Reg03MuQR957t287Rpcxp1njpEa8oDrikb+FwGdW3n+FELh/A6qib6yPit0j/pv9G/yeAqA==", "dev": true }, + "lodash.flow": { + "version": "3.5.0", + "resolved": "https://registry.npmjs.org/lodash.flow/-/lodash.flow-3.5.0.tgz", + "integrity": "sha1-h79AKSuM+D5OjOGjrkIJ4gBxZ1o=" + }, "lodash.get": { "version": "4.4.2", "resolved": "https://registry.npmjs.org/lodash.get/-/lodash.get-4.4.2.tgz", @@ -7446,6 +7456,15 @@ "uc.micro": "^1.0.5" } }, + "markdown-it-highlightjs": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/markdown-it-highlightjs/-/markdown-it-highlightjs-3.1.0.tgz", + "integrity": "sha512-SYy8fXlZ7Bk+Q+bc9JmHHcMCUFsKR3nr1JjkpPnq0gsmLOyIaxJfRoIAVqWF/AIuN7CZlJWQuSFwQoBb6dZmnQ==", + "requires": { + "highlight.js": "^9.18.1", + "lodash.flow": "^3.5.0" + } + }, "md5.js": { "version": "1.3.5", "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz", diff --git a/package.json b/package.json index 0537008..1af90e3 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ "dependencies": { "bootstrap": "^4.1.3", "bootstrap-vue": "^2.0.0", + "markdown-it-highlightjs": "^3.1.0", "nuxt": "^2.0.0", "nuxt-i18n": "^6.7.2" }, diff --git a/pages/en/_post.vue b/pages/en/_post.vue new file mode 100644 index 0000000..cbcc8dc --- /dev/null +++ b/pages/en/_post.vue @@ -0,0 +1,20 @@ +<template> + <div v-html="content" class="post-inner"></div> +</template> + +<script lang="ts"> +import Vue from 'vue'; +import {getPostData} from '../helper/post'; + +export default Vue.extend({ + components: { + }, + async asyncData({params}) { + return await getPostData(params.post, 'en'); + } +}); + +</script> + +<style> +</style> diff --git a/pages/helper/post.ts b/pages/helper/post.ts new file mode 100644 index 0000000..0c82512 --- /dev/null +++ b/pages/helper/post.ts @@ -0,0 +1,25 @@ +import fm from 'front-matter'; +import MarkdownIt from 'markdown-it'; +import highlightjs from 'markdown-it-highlightjs'; +import config from '../../configs/config'; + +export async function getPostData(path: string, lang: string) { + const md = new MarkdownIt({ + html: true + }) + .use(highlightjs, {}); + + path = path.split('_').join('/'); + const fileContent = await import(`~/contents/${lang}/${path}.md`); + let content = fileContent.default; + + for (let attr in config) { + content = content.split(`\${${attr}}`).join((config as any)[attr]); + } + + const res = fm(content); + return { + attributes: res.attributes, + content: md.render(res.body) + }; +} diff --git a/pages/zh/_post.vue b/pages/zh/_post.vue index a5662db..e1f0a89 100644 --- a/pages/zh/_post.vue +++ b/pages/zh/_post.vue @@ -3,26 +3,14 @@ </template> <script lang="ts"> -import fm from 'front-matter'; -import MarkdownIt from 'markdown-it'; import Vue from 'vue'; -import config from '../../configs/config'; - -const md = new MarkdownIt({ - html: true -}); +import {getPostData} from '../helper/post'; export default Vue.extend({ components: { }, async asyncData({params}) { - params.post = params.post.split('_').join('/'); - const fileContent = await import(`~/contents/zh/${params.post}.md`); - const res = fm(fileContent.default.split('${rootPath}').join(config.rootPath)); - return { - attributes: res.attributes, - content: md.render(res.body) - }; + return await getPostData(params.post, 'zh'); } }); --------------------------------------------------------------------- To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org For additional commands, e-mail: commits-h...@echarts.apache.org