title: 让博客里的 Terminal 的例子动起来，给 Mkdocs 添加 termynal 支持description: 最近在看 typer 的文档时候看到 typer 的文档也是用的 mkdocs，但发现文档里 console 是带进度条的
redirect: 2021-02-03-mkdocs-add-termy

description: 最近在看 typer 的文档时候看到 typer 的文档也是用的 mkdocs，但发现文档里 console 是带进度条的

先进入 typer 的仓库 https://github.com/tiangolo/typer 看下目录
添加自定义的 css/js 到 doc 目录下

  1. typer/docs/css/termynal.css
  2. typer/docs/css/custom.css
  4. typer/docs/js/termynal.js
  5. typer/docs/js/custom.js

修改 mkdocs 的配置文件 typer/mkdocs.yml

+ extra_css:
+     - 'css/termynal.css'
+     - 'css/custom.css'

+ extra_javascript:
+     - 'js/termynal.js'
+     - 'js/custom.js'

这里需要注意一下引入外部资源的顺序
推动到你的 CI，看下效果吧
Code

    <div class="termy">

    ```console
    $ pip install typer
    ---> 100%
    Successfully installed typer

</div>

**Render**

$ pip install typer —-> 100% Successfully installed typer

```