The documentation is a work in progress, and English edition is just an empty shell for now. I will translate it when Chinese edition has done.
v-no 使用 Vue.js(+ vue-router + vue-class-component)+ TypeScript + Sass 进行开发。
除此之外,它主要依赖:
- axios:异步请求
.md
文件。 - dayjs:格式化日期时间。
- markdown-it:渲染 Markdown。
- prismjs:代码高亮。
Day.js
v-no 使用 Day.js 处理时间和日期。
它包含以下几个插件:
markdown-it
v-no 使用 markdown-it 渲染 Markdown 文件,它的打包体积在 100 kb 左右。
它包含以下几个插件:
- markdown-it-container:解析
<details>
标签语法标记(:::
)。 - markdown-it-deflist:解析
<dl>
标签语法标记(:
)。 - markdown-it-footnote:解析脚注语法标记(
[^1]
)。 - markdown-it-task-lists:解析任务列表语法标记(
- [x]
)。
markdown-it 有着丰富的插件生态,我会较为克制地引入它们。对于在 GFM (GitHub Flavored Markdown) 标准之外的语法,如果它在渲染后只是一个简单 HTML 标签,我不太喜欢为它增加一个新的语法标记(现有的行内标记已经足够让人混淆了)。
v-no 主要通过重写部分核心语法的渲染规则来达到扩展它的目的,不过更多的处理工作还是放在了渲染之后的 DOM 更新上。
Prism.js
v-no 使用 Prism.js 对代码块进行高亮,需要高亮的语言越多,它的打包体积越大。如果你完全用不到它,最多只能将 PRISM_LANGUAGES
环境变量设为空,目前还没有办法将它彻底移除(默认打包的 JS + CSS 体积在 42 KB 左右,环境变量设空后能减少到 7 KB)。
不过因为它是动态引入的,只在页面有需要高亮的代码块时才会被加载,所以你也不用担心体积太大的代码文件会影响到页面的加载速度。
它默认支持的语言:
- Markup:
markup
、html
、xml
、svg
、mathml
、ssml
、atom
、rss
- CSS:
css
- C-like:
clike
- JavaScript:
javascript
、js
使用的插件:
- line-numbers
- line-highlight(像这样把它们加到语言标记后
```text|1-2,5,9-20
) - show-language
- copy-to-clipboard
使用的主题:tomorrow
。
编译 Prism.js
v-no 使用 babel-plugin-prismjs 对 Prism.js 按需编译。它的相关代码会被单独打包在 assets/js/prismjs.[hash].js
文件,体积会随着 PRISM_LANGUAGES
环境变量的改动而产生变化。
但我不知道为什么如果不修改导入了 Prism.js 的代码文件,它就不会使用新的环境变量进行编译。具体表现为编译后的 prismjs.[hash].js
文件的大小和 Hash 值都没有发生变化。
为了确保对 Prism.js 相关变量的更新能够生效,你需要在编译前对 src/ts/async/prismjs.ts
做出一点不影响代码逻辑的小改动。比如增加一个空行,等编译完成再把它删去。
- This page is open source, improve it