逆玄 - 极术社区 - 连接开发者与智能计算生态

<section class="layout" style="font-size: 16px; color: black; padding: 10px; line-height: 1.6; word-spacing: 0px; letter-spacing: 0px; word-break: break-word; word-wrap: break-word; text-align: left; font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, 'PingFang SC', Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;"><p style="font-size: 16px; padding-top: 5px; padding-bottom: 5px; margin: 0; line-height: 26px; color: black;">使用时请将内容替换为自己的内容。</p>
<p style="font-size: 16px; padding-top: 5px; padding-bottom: 5px; margin: 0; line-height: 26px; color: black;">请阅读下方文本熟悉工具使用方法。</p>
<img style="display: block; margin: 0 auto; width: 120px;" src="https://draw-wechat.oss-cn-hangzhou.aliyuncs.com/mdnice%20logo_20190823192027.png">
<h2 style="margin-top: 40px; margin-bottom: 20px; font-weight: bold; color: black; font-size: 24px;">1. Markdown Nice 简介</h2>
<ul style="margin-top: 5px; margin-bottom: 5px; padding-left: 20px; color: black; list-style-type: disc;">
<li style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: black;">支持自定义样式的 Markdown 编辑器</li>
<li style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: black;">支持微信公众号排版</li>
<li style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: black;">支持知乎、掘金、博客园和CSDN等平台</li>
<li style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: black;">内容和自定义样式浏览器中实时保存</li>
<li style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: black;">欢迎登录 GitHub 账号，提交自定义主题</li>
</ul>
<h2 style="margin-top: 40px; margin-bottom: 20px; font-weight: bold; color: black; font-size: 24px;">2. 示例文章</h2>
<ul style="margin-top: 5px; margin-bottom: 5px; padding-left: 20px; color: black; list-style-type: disc;">
<li style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: black;">橙心：终于等到你，公众号排版神器</li>
<li style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: black;">姹紫：JavaScript 数据结构与算法之美</li>
<li style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: black;">绿意：前端硬核面试专题之 CSS 55 问</li>
<li style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: black;">红绯：日常 | 我用什么工具写作？</li>
<li style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: black;">Wechat-Format：Markdown Nice新特性：阿里云图床</li>
</ul>
<h2 style="margin-top: 40px; margin-bottom: 20px; font-weight: bold; color: black; font-size: 24px;">3. 标题</h2>
<p style="font-size: 16px; padding-top: 5px; padding-bottom: 5px; margin: 0; line-height: 26px; color: black;">在文字写书写不同数量的#可以完成不同的标题，如下：</p>
<h1 style="margin-top: 40px; margin-bottom: 20px; font-weight: bold; color: black; font-size: 28px;">一级标题</h1>
<h2 style="margin-top: 40px; margin-bottom: 20px; font-weight: bold; color: black; font-size: 24px;">二级标题</h2>
<h3 style="margin-top: 40px; margin-bottom: 20px; font-weight: bold; color: black; font-size: 20px;">三级标题</h3>
<h2 style="margin-top: 40px; margin-bottom: 20px; font-weight: bold; color: black; font-size: 24px;">4. 无序列表</h2>
<p style="font-size: 16px; padding-top: 5px; padding-bottom: 5px; margin: 0; line-height: 26px; color: black;">无序列表的使用，在符号-后加空格使用。如下：</p>
<ul style="margin-top: 5px; margin-bottom: 5px; padding-left: 20px; color: black; list-style-type: disc;">
<li style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: black;">无序列表1</li>
<li style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: black;">无序列表2</li>
<li style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: black;">无序列表</li>
</ul>
<p style="font-size: 16px; padding-top: 5px; padding-bottom: 5px; margin: 0; line-height: 26px; color: black;">如果要控制列表的层级，则需要在符号-前使用空格。如下：</p>
<ul style="margin-top: 5px; margin-bottom: 5px; padding-left: 20px; color: black; list-style-type: disc;">
<li style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: black;">无序列表1</li>
<li style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: black;">无序列表2
<ul style="margin-top: 5px; margin-bottom: 5px; padding-left: 20px; color: black; list-style-type: disc;">
<li style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: black;">无序列表2.1</li>
<li style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: black;">无序列表2.2</li>
</ul>
</li>
</ul>
<p style="font-size: 16px; padding-top: 5px; padding-bottom: 5px; margin: 0; line-height: 26px; color: black;">最多支持到二级列表，粘贴到微信编辑器后后无序列表整体样式与微信一致。</p>
<h2 style="margin-top: 40px; margin-bottom: 20px; font-weight: bold; color: black; font-size: 24px;">5. 有序列表</h2>
<p style="font-size: 16px; padding-top: 5px; padding-bottom: 5px; margin: 0; line-height: 26px; color: black;">有序列表的使用，在数字及符号.后加空格后输入内容，如下：</p>
<ol style="margin-top: 5px; margin-bottom: 5px; padding-left: 20px; color: black; list-style-type: decimal;">
<li style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: black;">有序列表1</li>
<li style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: black;">有序列表2</li>
<li style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: black;">有序列表3</li>
</ol>
<p style="font-size: 16px; padding-top: 5px; padding-bottom: 5px; margin: 0; line-height: 26px; color: black;">粘贴到微信编辑器后后有序列表整体样式与微信一致。</p>
<h2 style="margin-top: 40px; margin-bottom: 20px; font-weight: bold; color: black; font-size: 24px;">6. 引用</h2>
<p style="font-size: 16px; padding-top: 5px; padding-bottom: 5px; margin: 0; line-height: 26px; color: black;">引用的格式是使用符号>后面书写文字，及可以使用引用。如下：</p>
<blockquote style="display: block; font-size: 0.9em; overflow: auto; overflow-scrolling: touch; border-left: 3px solid rgba(0, 0, 0, 0.4); background: rgba(0, 0, 0, 0.05); color: #6a737d; padding-top: 10px; padding-bottom: 10px; padding-left: 20px; padding-right: 10px; margin-bottom: 20px; margin-top: 20px;">
<p style="font-size: 16px; padding-top: 5px; padding-bottom: 5px; margin: 0px; color: black; line-height: 26px;">读一本好书，就是在和高尚的人谈话。 ——歌德</p>
</blockquote>
<blockquote style="display: block; font-size: 0.9em; overflow: auto; overflow-scrolling: touch; border-left: 3px solid rgba(0, 0, 0, 0.4); background: rgba(0, 0, 0, 0.05); color: #6a737d; padding-top: 10px; padding-bottom: 10px; padding-left: 20px; padding-right: 10px; margin-bottom: 20px; margin-top: 20px;">
<p style="font-size: 16px; padding-top: 5px; padding-bottom: 5px; margin: 0px; color: black; line-height: 26px;">雇用制度对工人不利，但工人根本无力摆脱这个制度。 ——阮一峰</p>
</blockquote>
<h2 style="margin-top: 40px; margin-bottom: 20px; font-weight: bold; color: black; font-size: 24px;">7. 粗体和斜体</h2>
<p style="font-size: 16px; padding-top: 5px; padding-bottom: 5px; margin: 0; line-height: 26px; color: black;">粗体的使用是在需要加粗的文字前后各加两个*。</p>
<p style="font-size: 16px; padding-top: 5px; padding-bottom: 5px; margin: 0; line-height: 26px; color: black;">而斜体的使用则是在需要斜体的文字前后各加一个*。</p>
<p style="font-size: 16px; padding-top: 5px; padding-bottom: 5px; margin: 0; line-height: 26px; color: black;">如果要使用粗体和斜体，那么就是在需要操作的文字前后各加三个*。如下：</p>
<p style="font-size: 16px; padding-top: 5px; padding-bottom: 5px; margin: 0; line-height: 26px; color: black;">这个是粗体</p>
<p style="font-size: 16px; padding-top: 5px; padding-bottom: 5px; margin: 0; line-height: 26px; color: black;">这个是斜体</p>
<p style="font-size: 16px; padding-top: 5px; padding-bottom: 5px; margin: 0; line-height: 26px; color: black;">这个是粗体加斜体</p>
<h2 style="margin-top: 40px; margin-bottom: 20px; font-weight: bold; color: black; font-size: 24px;">8. 链接</h2>
<p style="font-size: 16px; padding-top: 5px; padding-bottom: 5px; margin: 0; line-height: 26px; color: black;">微信公众号仅支持公众号文章链接，即域名为https://mp.weixin.qq.com/的合法链接。使用方法如下所示：</p>
<p style="font-size: 16px; padding-top: 5px; padding-bottom: 5px; margin: 0; line-height: 26px; color: black;">对于该论述，欢迎读者查阅之前发过的文章，你是《未来世界的幸存者》么？</p>
<h2 style="margin-top: 40px; margin-bottom: 20px; font-weight: bold; color: black; font-size: 24px;">9. 脚注</h2>
<p style="font-size: 16px; padding-top: 5px; padding-bottom: 5px; margin: 0; line-height: 26px; color: black;">脚注与链接的区别如下所示：</p>
<pre class="custom" style="overflow-x: scroll;">链接：文字脚注：文字</pre>
<p style="font-size: 16px; padding-top: 5px; padding-bottom: 5px; margin: 0; line-height: 26px; color: black;">有人认为在大前端时代^[1]的背景下，移动端开发（Android、IOS）将逐步退出历史舞台。</p>
<p style="font-size: 16px; padding-top: 5px; padding-bottom: 5px; margin: 0; line-height: 26px; color: black;">全栈工程师^[2]在业务开发流程中起到了至关重要的作用。</p>
<p style="font-size: 16px; padding-top: 5px; padding-bottom: 5px; margin: 0; line-height: 26px; color: black;">脚注内容请拉到最下面观看。</p>
<h2 style="margin-top: 40px; margin-bottom: 20px; font-weight: bold; color: black; font-size: 24px;">10. 图片</h2>
<p style="font-size: 16px; padding-top: 5px; padding-bottom: 5px; margin: 0; line-height: 26px; color: black;">插入图片，如果是行内图片则无图例，否则有图例，格式如下：</p>

这里写图片描述

<p style="font-size: 16px; padding-top: 5px; padding-bottom: 5px; margin: 0; line-height: 26px; color: black;">可使用上方工具上传本地图片，感谢 SM.MS 图床助力，该图床不够稳定，会经常存在粘贴失败的现象。</p>
<p style="font-size: 16px; padding-top: 5px; padding-bottom: 5px; margin: 0; line-height: 26px; color: black;">所以可以使用自定义图床，目前支持阿里云OSS，配置相关文档如下：</p>
<p style="font-size: 16px; padding-top: 5px; padding-bottom: 5px; margin: 0; line-height: 26px; color: black;">Markdown Nice新特性：阿里云图床</p>
<p style="font-size: 16px; padding-top: 5px; padding-bottom: 5px; margin: 0; line-height: 26px; color: black;">使用自定义图床后基本不存在粘贴失败的现象，效果十分赞。</p>
<h2 style="margin-top: 40px; margin-bottom: 20px; font-weight: bold; color: black; font-size: 24px;">11. 代码块</h2>
<p style="font-size: 16px; padding-top: 5px; padding-bottom: 5px; margin: 0; line-height: 26px; color: black;">如果在一个行内需要引用代码，只要用反引号引起来就好，如下：</p>
<p style="font-size: 16px; padding-top: 5px; padding-bottom: 5px; margin: 0; line-height: 26px; color: black;">Use the printf() function.</p>
<p style="font-size: 16px; padding-top: 5px; padding-bottom: 5px; margin: 0; line-height: 26px; color: black;">在需要高亮的代码块的前一行及后一行使用三个反引号，同时第一行反引号后面表面代码块所使用的语言，如下：</p>
<pre class="custom" style="overflow-x: scroll;">

// FileName: HelloWorld.java
public class HelloWorld {
  // Java 入口程序，程序从此入口
  public static void main(String[] args) {
System.out.println(<span class="hljs-string" style="line-height: 26px; color: #a6e22e;">"Hello,World!"</span>); <span class="hljs-comment" style="line-height: 26px; color: #75715e;">// 向控制台打印一条语句</span>

} }</pre>
<p style="font-size: 16px; padding-top: 5px; padding-bottom: 5px; margin: 0; line-height: 26px; color: black;">如果想要更换代码主题，可在上方挑选，不支持代码主题自定义。</p>
<p style="font-size: 16px; padding-top: 5px; padding-bottom: 5px; margin: 0; line-height: 26px; color: black;">其中微信代码主题与微信官方一致，有以下注意事项：</p>
<ul style="margin-top: 5px; margin-bottom: 5px; padding-left: 20px; color: black; list-style-type: disc;">
<li style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: black;">带行号且不换行，代码大小与官方一致</li>
<li style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: black;">需要在代码块处标志语言，否则无法高亮</li>
<li style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: black;">粘贴到公众号后，用鼠标点代码块内外一次，完成高亮</li>
</ul>
<p style="font-size: 16px; padding-top: 5px; padding-bottom: 5px; margin: 0; line-height: 26px; color: black;">其他主题不带行号，可自定义是否换行，代码大小与当前编辑器一致</p>
<h2 style="margin-top: 40px; margin-bottom: 20px; font-weight: bold; color: black; font-size: 24px;">12. 分割线</h2>
<p style="font-size: 16px; padding-top: 5px; padding-bottom: 5px; margin: 0; line-height: 26px; color: black;">可以在一行中用三个以上的星号、减号、底线来建立一个分隔线，同时需要在分隔线的上面空一行。如下：</p>

<h2 style="margin-top: 40px; margin-bottom: 20px; font-weight: bold; color: black; font-size: 24px;">13. 删除线</h2>
<p style="font-size: 16px; padding-top: 5px; padding-bottom: 5px; margin: 0; line-height: 26px; color: black;">删除线的使用，在需要删除的文字前后各使用两个~，如下：</p>
<p style="font-size: 16px; padding-top: 5px; padding-bottom: 5px; margin: 0; line-height: 26px; color: black;"><s>这是要被删除的内容。</s></p>
<h2 style="margin-top: 40px; margin-bottom: 20px; font-weight: bold; color: black; font-size: 24px;">14. 表格</h2>
<p style="font-size: 16px; padding-top: 5px; padding-bottom: 5px; margin: 0; line-height: 26px; color: black;">可以使用冒号来定义表格的对齐方式，如下：</p>

姓名	年龄	工作
小可爱	18	吃可爱多
小勇敢	20	爬勇敢树
小机智	22	看机智书

<h2 style="margin-top: 40px; margin-bottom: 20px; font-weight: bold; color: black; font-size: 24px;">15. 上标和下标</h2>
<p style="font-size: 16px; padding-top: 5px; padding-bottom: 5px; margin: 0; line-height: 26px; color: black;">使用两个^包围可作为上标，如下：19^th</p>
<p style="font-size: 16px; padding-top: 5px; padding-bottom: 5px; margin: 0; line-height: 26px; color: black;">使用两个~包围可作为下标，如下：H₂O</p>
<h2 style="margin-top: 40px; margin-bottom: 20px; font-weight: bold; color: black; font-size: 24px;">16. 数学公式</h2>
<p style="font-size: 16px; padding-top: 5px; padding-bottom: 5px; margin: 0; line-height: 26px; color: black;">行内公式使用方法，比如这个著名的公式： $<img src="https://mdnice-tem.oss-cn-hangzhou.aliyuncs.com/math/math_113-69-147-227_1567230198056.png" class="math-img-inline" style="margin: 0 auto; display: inline-block; line-height: inherit; height: 18px; width: auto; max-width: 100%; vertical-align: middle;">$ ，源于爱因斯坦</p>
<p style="font-size: 16px; padding-top: 5px; padding-bottom: 5px; margin: 0; line-height: 26px; color: black;">块公式使用方法如下：</p>
<p style="font-size: 16px; padding-top: 5px; padding-bottom: 5px; margin: 0; line-height: 26px; color: black;"> $<img src="https://mdnice-tem.oss-cn-hangzhou.aliyuncs.com/math/math_113-69-147-227_1567230197714.png" class="math-img-block" style="display: block; margin: 0 auto; max-width: 100%; width: auto;">$ </p>
<p style="font-size: 16px; padding-top: 5px; padding-bottom: 5px; margin: 0; line-height: 26px; color: black;">矩阵：</p>
<p style="font-size: 16px; padding-top: 5px; padding-bottom: 5px; margin: 0; line-height: 26px; color: black;"> $<img src="https://mdnice-tem.oss-cn-hangzhou.aliyuncs.com/math/math_113-69-147-227_1567230197729.png" class="math-img-block" style="display: block; margin: 0 auto; max-width: 100%; width: auto;">$ </p>
<p style="font-size: 16px; padding-top: 5px; padding-bottom: 5px; margin: 0; line-height: 26px; color: black;">公式由于微信不支持，目前的解决方案就是转成图片放到微信中，公式图片目前存于工具作者的阿里云图床中，一天后自动删除，无法二次使用。</p>
<p style="font-size: 16px; padding-top: 5px; padding-bottom: 5px; margin: 0; line-height: 26px; color: black;">由于图片大小不固定，目前没有办法强制添加公式图片长度和宽度，所以拷贝过后需要在微信中调整公式大小。</p>
<p style="font-size: 16px; padding-top: 5px; padding-bottom: 5px; margin: 0; line-height: 26px; color: black;">如果遇到第一次复制没有提示复制成功的现象，请再点击一次即可。</p>
<h2 style="margin-top: 40px; margin-bottom: 20px; font-weight: bold; color: black; font-size: 24px;">17. TOC</h2>
<p style="font-size: 16px; padding-top: 5px; padding-bottom: 5px; margin: 0; line-height: 26px; color: black;">TOC全称为Table of Content，列出全部标题。由于示例标题过多，需要使用将下方代码段去除即可。</p>
<pre class="custom" style="overflow-x: scroll;">[[TOC]]</pre>
<p style="font-size: 16px; padding-top: 5px; padding-bottom: 5px; margin: 0; line-height: 26px; color: black;">由于微信只支持到二级列表，本工具仅支持二级标题和三级标题的显示。</p>
<h2 style="margin-top: 40px; margin-bottom: 20px; font-weight: bold; color: black; font-size: 24px;">18. HTML</h2>
<p style="font-size: 16px; padding-top: 5px; padding-bottom: 5px; margin: 0; line-height: 26px; color: black;">支持原生 HTML 语法，除个别情况外，建议尽少使用，如下：</p>
<p style="font-size: 16px; padding-top: 5px; padding-bottom: 5px; margin: 0; line-height: 26px; color: black;">橙色居右
橙色居中</p>
<h2 style="margin-top: 40px; margin-bottom: 20px; font-weight: bold; color: black; font-size: 24px;">19. UML</h2>
<p style="font-size: 16px; padding-top: 5px; padding-bottom: 5px; margin: 0; line-height: 26px; color: black;">不支持，推荐使用https://www.draw.io/ 或 https://www.processon.com/ 制作后再导入图片</p>
<h3 class="footnotes-sep" style="margin-top: 40px; margin-bottom: 20px; font-weight: bold; color: black; font-size: 20px;">参考资料</h3>
<section class="footnotes">
[1] <p style="padding-top: 5px; padding-bottom: 5px; display: inline; font-size: 14px; width: 90%; padding: 0px; margin: 0; line-height: 26px; color: black; word-break: break-all; width: calc(100%-50);">Front-end web development: https://en.wikipedia.org/wiki...</p>

[2] <p style="padding-top: 5px; padding-bottom: 5px; display: inline; font-size: 14px; width: 90%; padding: 0px; margin: 0; line-height: 26px; color: black; word-break: break-all; width: calc(100%-50);">什么是全栈工程师: 是指掌握多种技能，并能利用多种技能独立完成产品的人。</p>

</section>
</section>

逆玄

推荐阅读

悟能之能

目录