Typora的引用使用多种样式
<div class="parsedown-markdown"><h1 id="39899536_设置引用多样式">设置引用多样式</h1><h2 id="39899536_1.-引用多种样式">1. 引用多种样式</h2>
<p>我想将<strong>引用</strong>设置为多种样式，但是Typora仅仅支持一种，可以采用VLOOK插件实现，但是VLOOK仅支持导出之后生成。我想要的是实时那种，所以我对Typora进行了修改，最终实现的效果如下图所示。<br />
</p>
<h2 id="39899536_2.-缺陷（事前提前说）">2. 缺陷（事前提前说）</h2>
<p>此种方式在 <strong>Typora version 0.10.10（beta）</strong>下修改，其他版本是否有效未知，修改之前先备份</p>
<p>此种方式有两个缺陷，如果比较见意，那么就不用做。</p>
<h3 id="39899536_2.1.-缺陷一">2.1. 缺陷一</h3>
<p>自定义样式前面必须显式声明，有<strong>警告、注意、说明</strong>，这个内容可以按自己要求来设置，在【<strong>3. 修改操作</strong>】可以自己设置。</p>
<h3 id="39899536_2.2.-缺陷二">2.2. 缺陷二</h3>
<p>在添加引用时，要注意（具体内容如第一张动图所示）</p>
<ol>
<li>默认/原来的引用，还是按之前的来 <code>> 这是需要引用的内容</code></li>
<li>自己定义的 <strong>警告、注意、说明</strong>的引用样式需要如下操作，两种操作任选一种
<ul>
<li>方式一：先输入<code>【警告】</code>，再在它的前面添加<code>></code>符号（注意：“>”与“【警告】”之间不要有空格），就会出现想要的效果（<em>先输入<code>></code>后，Typora就会渲染出默认样式，后面就不会渲染了，除非重启Typora</em>）</li>
<li>方式二：直接输入<code>>【警告】</code>，但是颜色不会变（是默认引用），需要重启Typora之后才会渲染。建议第一种</li>
</ul></li>
</ol>
<p></p>
<h2 id="39899536_3.-修改操作">3. 修改操作</h2>
<p><strong>修改内容有点多，要成品，直接去最下面</strong></p>
<p>步骤简单，主要修改两个文件（css和js两个文件），具体步骤如下：<strong>修改前注意先备份文件</strong></p>
<h3 id="39899536_3.1.-修改css主题文件">3.1. 修改CSS主题文件</h3>
<p>在主题css文件添加想要的样式。<em>这个样式自己想怎么改就怎么改</em></p>
<pre><code class="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;
}</code></pre>
<p>下图为上面样式的最终展示<br />
</p>
<h3 id="39899536_3.2.-修改js渲染操作">3.2. 修改js渲染操作</h3>
<blockquote>
<p>【说明】（csdn无法渲染）<br />
①、Markdown在解析为HTML的时候，会将<strong>引用</strong><code>>符号</code>转换为<code><blockquote>标签</code>。由于没有<code>class、id选择器</code>，所以不能直接在<strong>css</strong>中设置自动渲染，这就需要在转换过程中进行设置，通过js动态绑定。</p>
<p>②、Typora的MarkDown解析<strong>js</strong>文件在安装路径下，这是我的安装路径：<code>D:\Program Files\Typora\resources\appsrc\window\frame.js</code>（<code>D:\Program Files\Typora</code>为我的Typora安装位置）。通过编辑器打开后，进行修改（js是压缩过的，修改建议用开发工具格式化一下代码）。</p>
</blockquote>
<p>一共有三处需要修改</p>
<h4 id="39899536_3.2.1.-实时渲染处">3.2.1. 实时渲染处</h4>
<p>修改实时渲染处：通过工具查询 <code>case o.blockquote:</code>，这个js文件中仅为此句</p>
<ul>
<li>
<p>原来为：</p>
<pre><code>```javascript
case o.blockquote:
return "<blockquote " + f(this) + " >" + h(this) + "</blockquote>";
```</code></pre>
</li>
<li>
<p>修改为：如果不想设置为【警告】、【注意】、【说明】，则需要在下面代码中自己修改</p>
<pre><code>```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>";
}
```</code></pre>
</li>
</ul>
<h4 id="39899536_3.2.2.-导出">3.2.2. 导出</h4>
<p>修改导出时的渲染：通过工具查询 <code>case a.blockquote:</code>，这个js文件中有两句，主要是修改下面这句</p>
<ul>
<li>
<p>原来为：</p>
<pre><code>```javascript
case a.blockquote:
return "<blockquote class='test'>" + T(e, n) + "</blockquote>";
``` </code></pre>
</li>
<li>
<p>修改为：如果不想设置为【警告】、【注意】、【说明】，则需要在下面代码中自己修改</p>
<pre><code>```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>";
}
```</code></pre>
</li>
</ul>
<h4 id="39899536_3.2.3.-前置小图标">3.2.3. 前置小图标</h4>
<p><strong>注意：如果文件大于3M，不推荐加，加上后可能打开文件要很久</strong><br />
修改导出时的渲染：通过工具查询 <code>case o.paragraph</code>，这个js文件中有两句，主要是修改下面这句</p>
<ul>
<li>原来为：忘记了弄了，反正大致位置在【3.2.1. 实时渲染处】的代码前4行</li>
<li>
<p>修改为：如果不想设置为【警告】、【注意】、【说明】，则需要在下面代码中自己修改</p>
<pre><code>```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>";
}
```</code></pre>
</li>
</ul>
<h2 id="39899536_4-成品">4 成品</h2>
<p>链接：<a rel="nofollow noopener" href="https://pan.baidu.com/s/1Z2KlrEZHn0tM8vjy5IeIag">https://pan.baidu.com/s/1Z2KlrEZHn0tM8vjy5IeIag</a><br />
提取码：nhee </p>
<h3 id="39899536_4.1.-链接内容说明">4.1. 链接内容说明</h3>
<ol>
<li>fluent-test.css：基于typora官方fluent主题进行改造。如果需要自定义改造（到时候出一个自定义改造主题文件的博文）</li>
<li>frame.js：替换的js文件的成品</li>
<li>Typora.rar：Typora version 0.10.10（beta）的修改后的压缩文件。这个是带emoji图标，也就是动态演示的</li>
</ol>
<h3 id="39899536_4.2.-具体操作">4.2. 具体操作</h3>
<p>将<strong>css文件</strong>放置到主题文件夹（typora→文件→偏好设置→外观→打开主题文件夹 即可）<br />
将<strong>js文件</strong>放置到安装路径下的<code>D:\Program Files\Typora\resources\appsrc\window\frame.js</code>，替换一下，记得备份（D:\Program Files\Typora是我的安装位置）</p>
<p>如果文件过期，在评价通知一声</p>
<h1 id="39899536_**原创不易，望各位大佬点赞评论**"><strong>原创不易，望各位大佬点赞评论</strong></h1>
<h1 id="39899536_**这个是我好久之前在某论坛上发布的，原创！原创！原创！不是搬运。**"><strong>这个是我好久之前在某论坛上发布的，原创！原创！原创！不是搬运。</strong></h1></div>
<div class="parsedown-markdown-end_FLAG_ZXSQ" style="display:none"></div> <div class="quote"><blockquote><font size="2"><a href="https://www.52pojie.org/forum.php?mod=redirect&goto=findpost&pid=39900307&ptid=1505532" target="_blank"><font color="#999999">z9595265 发表于 2021-9-3 16:31</font></a></font><br />
很好，挺好看的，试了0.11.2不能用</blockquote></div><br />
可以下载那个Typora包，那个是完整应用。Typora每次更新感觉没多大变化 <div class="quote"><blockquote><font size="2"><a href="https://www.52pojie.org/forum.php?mod=redirect&goto=findpost&pid=39902797&ptid=1505532" target="_blank"><font color="#999999">angle肠 发表于 2021-9-3 20:56</font></a></font><br />
typora有没有文本高亮的渲染，像word那样给字体染色</blockquote></div><br />
目前没有，高亮只有一种颜色。如果用多种颜色，需要在js中自己设置。有时间我来研究研究 刚发现原来52也支持md,在页面左侧....... 很好，挺好看的，试了0.11.2不能用 感谢分享！！！<img src="https://www.52pojie.org/static/image/smiley/default/42.gif" smilieid="921" border="0" alt="" /> 谢谢楼主分享~！ 学习了，感谢分享 很不错，支持原创，感谢分享。 虽然用不上，但是还是要友情支持一下。
页:
[1]
2