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
