Vue 文档风格的 Typora 主题

typora-vue-theme 是 Typora Markdown 文档编辑器中一款类似Vue文档风格的主题。

简介

Typora是一款支持实时预览的 Markdown 编辑器和阅读器,支持Windows、macOS、Linux三大平台。Typora 作为一款合格的 Markdown 编辑器,支持图片、列表、表格、代码、公式、目录等功能,同时这款软件还支持(一键)动态预览功能,让一切都变得如此干净、纯粹。并且有多种主题模板。typora-vue-theme就是参考了Vue文档风格而开发的一个 Typora 自定义主题。

安装主题

  1. 下载本主题中的vue.css、vue-dark.css文件和包含字体的vue文件夹;
  2. 打开 Typora,点击“偏好设置” => “打开主题文件夹”按钮,将弹出 Typora 的主题文件夹;
  3. 将下载好的vue.css和vue-dark.css文件和包含字体的vue文件夹放到 Typora 的主题文件夹中;
  4. 关闭并重新打开 Typora,从菜单栏中选择 “主题” => “Vue” 或者 “Vue Dark” 即可。

效果图

vue主题效果图1

vue主题效果图2

vue主题效果图3

Vue Dark

vue主题效果图4

vue主题效果图5

感谢: 本主题中的vue-dark.css来自typora-vue-dark-theme.

        </div>
        <hr/>

        

<div class="reprint" id="reprint-statement">
    
        <div class="reprint__author">
            <span class="reprint-meta" style="font-weight: bold;">
                <i class="fas fa-user">
                    文章作者:
                </i>
            </span>
            <span class="reprint-info">
                <a href="/" rel="external nofollow noreferrer">Winstonsky</a>
            </span>
        </div>
        <div class="reprint__type">
            <span class="reprint-meta" style="font-weight: bold;">
                <i class="fas fa-link">
                    文章链接:
                </i>
            </span>
            <span class="reprint-info">
                <a href="/posts/2018/11/19/kai-fa-gong-ju/markdown/vue-wen-dang-feng-ge-de-typora-zhu-ti/">/posts/2018/11/19/kai-fa-gong-ju/markdown/vue-wen-dang-feng-ge-de-typora-zhu-ti/</a>
            </span>
        </div>
        <div class="reprint__notice">
            <span class="reprint-meta" style="font-weight: bold;">
                <i class="fas fa-copyright">
                    版权声明:
                </i>
            </span>
            <span class="reprint-info">
                本博客所有文章除特別声明外,均采用
                <a href="https://creativecommons.org/licenses/by/4.0/deed.zh" rel="external nofollow noreferrer" target="_blank">CC BY 4.0</a>
                许可协议。转载请注明来源
                <a href="/" target="_blank">Winstonsky</a>
                !
            </span>
        </div>
    
</div>

<script async defer>
  document.addEventListener("copy", function (e) {
    let toastHTML = '<span>复制成功,请遵循本文的转载规则</span><button class="btn-flat toast-action" onclick="navToReprintStatement()" style="font-size: smaller">查看</a>';
    M.toast({html: toastHTML})
  });

  function navToReprintStatement() {
    $("html, body").animate({scrollTop: $("#reprint-statement").offset().top - 80}, 800);
  }
</script>

  目录