refine docs and sync language-highlight.md (#21)

This commit is contained in:
Koy 2020-07-05 12:51:07 +08:00 committed by GitHub
parent 81bc29b61e
commit cefb56f9c7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 60 additions and 20 deletions

View File

@ -1,12 +1,10 @@
## docsify
> 一个神奇的文档网站生成工具
> 一个神奇的文档网站生成器。
## 是什么
## 概述
docsify 是一个动态生成文档网站的工具。不同于 GitBook、Hexo 的地方是它不会生成将 `.md` 转成 `.html` 文件,所有转换工作都是在运行时进行。
这将非常实用,如果只是需要快速的搭建一个小型的文档网站,或者不想因为生成的一堆 `.html` 文件“污染” commit 记录,只需要创建一个 `index.html` 就可以开始写文档而且直接[部署在 GitHub Pages](zh-cn/deploy.md)。
docsify 可以快速帮你生成文档网站。不同于 GitBook、Hexo 的地方是它不会生成静态的 `.html` 文件,所有转换工作都是在运行时。如果你想要开始使用它,只需要创建一个 `index.html` 就可以开始编写文档并直接[部署在 GitHub Pages](zh-cn/deploy.md)。
查看[快速开始](zh-cn/quickstart.md)了解详情。
@ -21,9 +19,9 @@ docsify 是一个动态生成文档网站的工具。不同于 GitBook、Hexo
- 兼容 IE11
- 支持服务端渲染 SSR ([示例](https://github.com/docsifyjs/docsify-ssr-demo))
## 例
##
可以查看 [Showcase](https://github.com/docsifyjs/docsify/#showcase) 来了解使用 docsify 的文档项目。
可以查看 [Showcase](https://github.com/docsifyjs/docsify/#showcase) 来了解更多在使用 docsify 的文档项目。
## 捐赠

View File

@ -1,11 +1,53 @@
# 代码高亮
内置的代码高亮工具是 [Prism](https://github.com/PrismJS/prism),默认支持 CSS、JavaScript 和 HTML。如果需要高亮其他语言例如`PHP`,可以手动引入代码高亮插件。
**docsify**内置的代码高亮工具是 [Prism](https://github.com/PrismJS/prism)。Prism 默认支持的语言如下:
* Markup - `markup`, `html`, `xml`, `svg`, `mathml`, `ssml`, `atom`, `rss`
* CSS - `css`
* C-like - `clike`
* JavaScript - `javascript`, `js`
[添加额外的语法支持](https://prismjs.com/#supported-languages)需要通过CDN添加相应的[语法文件](https://cdn.jsdelivr.net/npm/prismjs@1/components/) :
```html
<script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/prismjs/components/prism-bash.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/prismjs/components/prism-php.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-bash.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-php.min.js"></script>
```
?> 其他的语言高亮插件可以查看[Prims 仓库](https://github.com/PrismJS/prism/tree/gh-pages/components)。
要使用语法高亮,需要在代码块第一行添加对应的[语言声明](https://prismjs.com/#supported-languages),示例如下:
````
```html
<p>This is a paragraph</p>
<a href="//docsify.js.org/">Docsify</a>
```
```bash
echo "hello"
```
```php
function getAdder(int $x): int
{
return 123;
}
```
````
上面代码的渲染结果:
```html
<p>This is a paragraph</p>
<a href="//docsify.js.org/">Docsify</a>
```
```bash
echo "hello"
```
```php
function getAdder(int $x): int
{
return 123;
}
```

View File

@ -1,6 +1,6 @@
# 快速开始
推荐安装 `docsify-cli` 工具,可以方便创建及本地预览文档网站
推荐全局安装 `docsify-cli` 工具,可以方便创建及本地预览生成的文档。
```bash
npm i docsify-cli -g
@ -20,13 +20,13 @@ docsify init ./docs
- `index.html` 入口文件
- `README.md` 会做为主页内容渲染
- `.nojekyll` 用于阻止 GitHub Pages 忽略掉下划线开头的文件
- `.nojekyll` 用于阻止 GitHub Pages 忽略掉下划线开头的文件
直接编辑 `docs/README.md` 就能更新网站内容,当然也可以[写多个页面](zh-cn/more-pages.md)。
直接编辑 `docs/README.md` 就能更新文档内容,当然也可以[添加更多页面](zh-cn/more-pages.md)。
## 本地预览网站
## 本地预览
运行一个本地服务器通过 `docsify serve` 可以方便的预览效果,而且提供 LiveReload 功能,可以让实时的预览。默认访问 http://localhost:3000 。
通过运行 `docsify serve` 启动一个本地服务器,可以方便地实时预览效果。默认访问地址 http://localhost:3000 。
```bash
docsify serve docs
@ -36,7 +36,7 @@ docsify serve docs
## 手动初始化
如果不喜欢 npm 或者觉得安装工具太麻烦,我们其实只需要直接创建一个 `index.html` 文件。
如果不喜欢 npm 或者觉得安装工具太麻烦,我们可以直接手动创建一个 `index.html` 文件。
*index.html*
@ -61,7 +61,7 @@ docsify serve docs
</html>
```
如果系统里安装 Python 的话,也可以很轻易的启动一个静态服务器
如果你的系统里安装了 Python 的话,也可以很容易地启动一个静态服务器去预览你的网站
```bash
cd docs && python -m SimpleHTTPServer 3000
@ -91,4 +91,4 @@ cd docs && python -m SimpleHTTPServer 3000
</script>
```
对比 [el 设置](configuration.md#el)
对比 [el 设置](configuration.md#el)