Typora的引用使用多种样式

xi9972

设置引用多样式

1. 引用多种样式

我想将引用设置为多种样式，但是Typora仅仅支持一种，可以采用VLOOK插件实现，但是VLOOK仅支持导出之后生成。我想要的是实时那种，所以我对Typora进行了修改，最终实现的效果如下图所示。

2. 缺陷（事前提前说）

此种方式在 Typora version 0.10.10（beta）下修改，其他版本是否有效未知，修改之前先备份

此种方式有两个缺陷，如果比较见意，那么就不用做。

2.1. 缺陷一

自定义样式前面必须显式声明，有警告、注意、说明，这个内容可以按自己要求来设置，在【3. 修改操作】可以自己设置。  

2.2. 缺陷二

在添加引用时，要注意（具体内容如第一张动图所示）

1. 默认/原来的引用，还是按之前的来 > 这是需要引用的内容
2. 自己定义的 警告、注意、说明的引用样式需要如下操作，两种操作任选一种
   • 方式一：先输入【警告】，再在它的前面添加>符号（注意：“>”与“【警告】”之间不要有空格），就会出现想要的效果（先输入>后，Typora就会渲染出默认样式，后面就不会渲染了，除非重启Typora）
   • 方式二：直接输入>【警告】，但是颜色不会变（是默认引用），需要重启Typora之后才会渲染。建议第一种

3. 修改操作

修改内容有点多，要成品，直接去最下面

步骤简单，主要修改两个文件（css和js两个文件），具体步骤如下：修改前注意先备份文件

3.1. 修改CSS主题文件

在主题css文件添加想要的样式。这个样式自己想怎么改就怎么改

   .blockquote-shuoming {
       /* 【说明】  蓝色*/
       border-left-color: #5bc0de;
       color: #5bc0de;
       background-color: #f4f8fa;
    }
   .blockquote-jinggao {
       /* 【警告】  黄色*/
       background-color: #fcf8f2;
       border-color: #f0ad4e;
       color: #f0ad4e;
    }
   .blockquote-zhuyi {
       /* 【危险】  红色*/
       color: #d9534f;
       background-color: #fdf7f7;
       border-color: #d9534f;
    }

下图为上面样式的最终展示

3.2. 修改js渲染操作

【说明】（csdn无法渲染）
①、Markdown在解析为HTML的时候，会将引用>符号转换为<blockquote>标签。由于没有class、id选择器，所以不能直接在css中设置自动渲染，这就需要在转换过程中进行设置，通过js动态绑定。

②、Typora的MarkDown解析js文件在安装路径下，这是我的安装路径：D:\Program Files\Typora\resources\appsrc\window\frame.js（D:\Program Files\Typora为我的Typora安装位置）。通过编辑器打开后，进行修改（js是压缩过的，修改建议用开发工具格式化一下代码）。

一共有三处需要修改

3.2.1. 实时渲染处

修改实时渲染处：通过工具查询 case o.blockquote:，这个js文件中仅为此句

• 原来为：

  ```javascript
  case o.blockquote:
          return "<blockquote " + f(this) + " >" + h(this) + "</blockquote>";
  ```

• 修改为：如果不想设置为【警告】、【注意】、【说明】，则需要在下面代码中自己修改

  ```javascript
  case o.blockquote:
          // 转换开始
          if (h(this).indexOf("【警告】") != -1 ) {
              // 警告
              return "<blockquote " + f(this) + " class='blockquote-jinggao' >" + h(this) + "</blockquote>";
          } else if (h(this).indexOf("【说明】") != -1 ) {
              // 说明
              return "<blockquote " + f(this) + " class='blockquote-tuijian' >" + h(this) + "</blockquote>";
          } else if (h(this).indexOf("【注意】") != -1 ) {
              // 危险
              return "<blockquote " + f(this) + " class='blockquote-weixian' >" + h(this) + "</blockquote>";
          } else { // info 默认格式
              return "<blockquote " + f(this) + " >" + h(this) + "</blockquote>";
          }
  ```

3.2.2. 导出

修改导出时的渲染：通过工具查询 case a.blockquote:，这个js文件中有两句，主要是修改下面这句

• 原来为：

  ```javascript
  case a.blockquote:
      return "<blockquote class='test'>" + T(e, n) + "</blockquote>";
  ``` 

• 修改为：如果不想设置为【警告】、【注意】、【说明】，则需要在下面代码中自己修改

  ```javascript
  case a.blockquote:
  // 转换开始
    if (T(e, n).indexOf("【警告】") != -1 ) {
            // 警告
            return "<blockquote class='blockquote-jinggao'>" + T(e, n) + "</blockquote>";
        } else if (T(e, n).indexOf("【说明】") != -1 ) {
            // 推荐
            return "<blockquote class='blockquote-tuijian'>" + T(e, n) + "</blockquote>";
        } else if (T(e, n).indexOf("【注意】") != -1 ) {
            // 危险
            return "<blockquote class='blockquote-weixian'>" + T(e, n) + "</blockquote>";
        } else { // info 默认格式
            return "<blockquote class='test'>" + T(e, n) + "</blockquote>";
        }
  ```

3.2.3. 前置小图标

注意：如果文件大于3M，不推荐加，加上后可能打开文件要很久
修改导出时的渲染：通过工具查询 case o.paragraph，这个js文件中有两句，主要是修改下面这句

• 原来为：忘记了弄了，反正大致位置在【3.2.1. 实时渲染处】的代码前4行

• 修改为：如果不想设置为【警告】、【注意】、【说明】，则需要在下面代码中自己修改

  ```javascript
  case o.paragraph:
          // p 标签转换
          if (h(this).indexOf("【警告】") != -1 ) {
              // 警告
              return "<p " + f(this) + " class='md-end-block md-p'>" + "<span data-emoji=\"⚡\" class=\"md-emoji-span\"></span>" + h(this) + "</p>";
          } else if (h(this).indexOf("【说明】") != -1 ) {
              // 说明
              return "<p " + f(this) + " class='md-end-block md-p'>" + "<span data-emoji=\"🔎\" class=\"md-emoji-span\"></span>" + h(this) + "</p>";
          } else if (h(this).indexOf("【注意】") != -1 ) {
              // 危险
              return "<p " + f(this) + " class='md-end-block md-p'>" + "<span data-emoji=\"👻\" class=\"md-emoji-span\"></span>" + h(this) + "</p>";
          } else { // info 默认格式
              return "<p " + f(this) + " class='md-end-block md-p'>" + h(this) + "</p>";
          }
  ```

4 成品

链接：https://pan.baidu.com/s/1Z2KlrEZHn0tM8vjy5IeIag
提取码：nhee

4.1. 链接内容说明

1. fluent-test.css：基于typora官方fluent主题进行改造。如果需要自定义改造（到时候出一个自定义改造主题文件的博文）
2. frame.js：替换的js文件的成品
3. Typora.rar：Typora version 0.10.10（beta）的修改后的压缩文件。这个是带emoji图标，也就是动态演示的

4.2. 具体操作

将css文件放置到主题文件夹（typora→文件→偏好设置→外观→打开主题文件夹 即可）
将js文件放置到安装路径下的D:\Program Files\Typora\resources\appsrc\window\frame.js，替换一下，记得备份（D:\Program Files\Typora是我的安装位置）

如果文件过期，在评价通知一声

原创不易，望各位大佬点赞评论

这个是我好久之前在某论坛上发布的，原创！原创！原创！不是搬运。

xi9972

z9595265 发表于 2021-9-3 16:31
很好，挺好看的，试了0.11.2不能用

可以下载那个Typora包，那个是完整应用。Typora每次更新感觉没多大变化

krankheit2010

刚发现原来52也支持md,在页面左侧.......

z9595265

很好，挺好看的，试了0.11.2不能用

魔煞奇缘

谢谢楼主分享~！

indiou

学习了，感谢分享

konglingpo

很不错，支持原创，感谢分享。

rainstyle

get到了，已mark，谢谢博主