markdown从入门到放弃word和PDF

2019/04/10 10:10
阅读数 28

<section id="nice" data-tool="mdnice编辑器" data-website="https://www.mdnice.com" style="font-size: 16px; padding: 10px; word-spacing: 0px; word-break: break-word; word-wrap: break-word; text-align: left; line-height: 1.75; color: #595959; font-family: Optima-Regular, Optima, PingFangTC-Light, PingFangSC-light, PingFangTC-light; letter-spacing: 2px; background-image: linear-gradient(90deg, rgba(50, 0, 0, 0.05) 3%, rgba(0, 0, 0, 0) 3%), linear-gradient(360deg, rgba(50, 0, 0, 0.05) 3%, rgba(0, 0, 0, 0) 3%); background-size: 20px 20px; background-position: center center;"><p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: #595959; margin: 10px 0px; letter-spacing: 2px; font-size: 14px; word-spacing: 2px;">Markdown是一个<strong style="color: #595959; font-weight: bold;"><span>「</span>轻量级<span>」</span></strong>的<strong style="color: #595959; font-weight: bold;"><span>「</span>标记语言<span>」</span></strong>。 淡定!!!我知道很多“编外人员”看到这句话之后已经没有兴趣再看下去了。</p> <p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: #595959; margin: 10px 0px; letter-spacing: 2px; font-size: 14px; word-spacing: 2px;">但是请不要关掉这个页面!!!</p> <p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: #595959; margin: 10px 0px; letter-spacing: 2px; font-size: 14px; word-spacing: 2px;">Markdown很简单!!!</p> <p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: #595959; margin: 10px 0px; letter-spacing: 2px; font-size: 14px; word-spacing: 2px;">你只需要记住不超过10个符号就可以完成一篇文章的优雅排版!!!</p> <h2 data-tool="mdnice编辑器" style="margin-top: 40px; margin-bottom: 20px; font-weight: bold; color: black; font-size: 24px; text-align: left; margin: 20px 10px 0px 0px;"><span style="font-size: 18px; font-weight: bold; display: inline-block; padding-left: 10px; border-left: 5px solid #DEC6FB; color: #595959;">Markdown的前世</span></h2> <p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: #595959; margin: 10px 0px; letter-spacing: 2px; font-size: 14px; word-spacing: 2px;">说到排版的话,首先就要说一下<strong style="color: #595959; font-weight: bold;"><span>「</span>富文本编辑器<span>」</span></strong>。最常见的富文本编辑器就是我们常用的Office Word了。Word是一个典型的富文本编辑器。</p> <p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: #595959; margin: 10px 0px; letter-spacing: 2px; font-size: 14px; word-spacing: 2px;">它的主要优势在于:</p> <ul data-tool="mdnice编辑器" style="margin-top: 8px; margin-bottom: 8px; padding-left: 25px; font-size: 15px; color: #595959; list-style-type: circle;"> <li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; font-size: 14px; font-weight: normal; color: #595959;">简单,直观</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; font-size: 14px; font-weight: normal; color: #595959;">所见即所得</section></li></ul> <p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: #595959; margin: 10px 0px; letter-spacing: 2px; font-size: 14px; word-spacing: 2px;">回想一下,我们在使用word的时候,是不是需要一边<strong style="color: #595959; font-weight: bold;"><span>「</span>输入文字<span>」</span></strong>,一边用鼠标点击对应的样式:加粗,列表,颜色,对其等等。</p> <p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: #595959; margin: 10px 0px; letter-spacing: 2px; font-size: 14px; word-spacing: 2px;">即便完成了内容编辑,还经常出现各种奇葩的<strong style="color: #595959; font-weight: bold;"><span>「</span>样式不一致<span>」</span></strong>的诡异问题。比如各种字体的行间距和字间距不一致的问题。。。</p> <p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: #595959; margin: 10px 0px; letter-spacing: 2px; font-size: 14px; word-spacing: 2px;">除了以上问题之外,word这种富文本编辑器还有一个巨大的问题,不同平台的兼容性有差异。 比如你用微软Office编辑的word,等你再用WPS打开的时候,有可能就出现格式不一致的问题。(Tips:所以为了避免这个问题。。。一般情况下,如果不需要再次改动的话,建议将word文件另存为PDF。。。)</p> <h2 data-tool="mdnice编辑器" style="margin-top: 40px; margin-bottom: 20px; font-weight: bold; color: black; font-size: 24px; text-align: left; margin: 20px 10px 0px 0px;"><span style="font-size: 18px; font-weight: bold; display: inline-block; padding-left: 10px; border-left: 5px solid #DEC6FB; color: #595959;">Markdown今生</span></h2> <blockquote data-tool="mdnice编辑器" style="display: block; font-size: 0.9em; overflow: auto; overflow-scrolling: touch; padding-top: 10px; padding-bottom: 10px; padding-left: 20px; padding-right: 10px; margin-bottom: 20px; margin-top: 20px; text-size-adjust: 100%; line-height: 1.55em; font-weight: 400; border-radius: 6px; color: #595959; font-style: normal; text-align: left; box-sizing: inherit; border-left: none; border: 1px solid #DEC6FB; background: #F6EEFF;"><span style="color: #DEC6FB; font-size: 34px; line-height: 1; font-weight: 700;">❝</span> <p style="padding-top: 8px; padding-bottom: 8px; letter-spacing: 2px; font-size: 14px; word-spacing: 2px; margin: 0px; line-height: 26px; color: #595959;">Markdown是一种轻量级标记语言,创始人为约翰·格鲁伯(英语:John Gruber)。它允许人们使用易读易写的纯文本格式编写文档,然后转换成有效的XHTML(或者HTML)文档。[4]这种语言吸收了很多在电子邮件中已有的纯文本标记的特性。</p> <p style="padding-top: 8px; padding-bottom: 8px; letter-spacing: 2px; font-size: 14px; word-spacing: 2px; margin: 0px; line-height: 26px; color: #595959;">-----维基百科</p> <span style="float: right; color: #DEC6FB;">❞</span></blockquote> <p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: #595959; margin: 10px 0px; letter-spacing: 2px; font-size: 14px; word-spacing: 2px;">(这段如果看不懂可以跳过,写着一段完全是为了体现本文的专业性(装X)...)</p> <p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: #595959; margin: 10px 0px; letter-spacing: 2px; font-size: 14px; word-spacing: 2px;">Markdown语言最早在2004年被开发,目的是希望大家通过"易于阅读、易于撰写的纯文字格式,并选择性的转换成有效的XHTML(或是HTML)"</p> <p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: #595959; margin: 10px 0px; letter-spacing: 2px; font-size: 14px; word-spacing: 2px;">说人话就是,希望通过人可以一眼就看懂的一些简单标记来进行高效率的排版.</p> <p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: #595959; margin: 10px 0px; letter-spacing: 2px; font-size: 14px; word-spacing: 2px;">目前Markdown并没有严格的官方标准. 2016年3月发布了RFC7763和RFC7764 两个文档讨论并注册了一些包含Github Flavored Markdown(GFM)在内的一些Markdown语法.换句话说markdown并不是一个严禁的官方标准,而算是一个习惯性的约定.目前常用的markdown"约定"有一下几种:</p> <ul data-tool="mdnice编辑器" style="margin-top: 8px; margin-bottom: 8px; padding-left: 25px; font-size: 15px; color: #595959; list-style-type: circle;"> <li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; font-size: 14px; font-weight: normal; color: #595959;">CommonMark</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; font-size: 14px; font-weight: normal; color: #595959;">GFM</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; font-size: 14px; font-weight: normal; color: #595959;">Markdown Extra</section></li></ul> <p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: #595959; margin: 10px 0px; letter-spacing: 2px; font-size: 14px; word-spacing: 2px;">Markdown的工作原理很简单:</p> <ol data-tool="mdnice编辑器" style="margin-top: 8px; margin-bottom: 8px; padding-left: 25px; list-style-type: decimal; font-size: 15px; color: #595959;"> <li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; font-size: 14px; font-weight: normal; color: #595959;">用户只需要输入一些简单的样式标记</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; font-size: 14px; font-weight: normal; color: #595959;">由Markdown编辑器将其转换为html元素</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; font-size: 14px; font-weight: normal; color: #595959;">再由浏览器进行渲染最终得到带有样式的文档.</section></li></ol> <p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: #595959; margin: 10px 0px; letter-spacing: 2px; font-size: 14px; word-spacing: 2px;">比如下表的例子(来自于维基百科)</p> <figure data-tool="mdnice编辑器" style="margin: 0; margin-top: 10px; margin-bottom: 10px;"><img src="https://wmcoding.oss-cn-hangzhou.aliyuncs.com/wmcoding/20200318144231.png" alt="Markdown工作原理" style="width: auto; max-width: 100%; border-radius: 6px; display: block; margin: 20px auto; object-fit: contain;"><figcaption style="margin-top: 5px; text-align: center; display: block; font-size: 13px; color: #595959;">Markdown工作原理</figcaption></figure> <h2 data-tool="mdnice编辑器" style="margin-top: 40px; margin-bottom: 20px; font-weight: bold; color: black; font-size: 24px; text-align: left; margin: 20px 10px 0px 0px;"><span style="font-size: 18px; font-weight: bold; display: inline-block; padding-left: 10px; border-left: 5px solid #DEC6FB; color: #595959;">Markdown基本使用</span></h2> <p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: #595959; margin: 10px 0px; letter-spacing: 2px; font-size: 14px; word-spacing: 2px;">俗话说,工欲善其事必先利其器,那么怎么用markdown进行排版呢?</p> <p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: #595959; margin: 10px 0px; letter-spacing: 2px; font-size: 14px; word-spacing: 2px;">这个问题问的好?</p> <p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: #595959; margin: 10px 0px; letter-spacing: 2px; font-size: 14px; word-spacing: 2px;">这里首先向大家推荐一个书写工具:<a href="https://typora.io/" style="text-decoration: none; word-wrap: break-word; color: #664D9D; font-weight: normal; border-bottom: 1px solid #664D9D;">Typora(官网地址点这里)</a></p> <p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: #595959; margin: 10px 0px; letter-spacing: 2px; font-size: 14px; word-spacing: 2px;">关于这个工具我会在后面的文章中详细介绍.</p> <p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: #595959; margin: 10px 0px; letter-spacing: 2px; font-size: 14px; word-spacing: 2px;">如果想立即体验的话,有很多在线的编辑器可以使用:</p> <ul data-tool="mdnice编辑器" style="margin-top: 8px; margin-bottom: 8px; padding-left: 25px; font-size: 15px; color: #595959; list-style-type: circle;"> <li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; font-size: 14px; font-weight: normal; color: #595959;"><a href="https://www.mdeditor.com/" style="text-decoration: none; word-wrap: break-word; color: #664D9D; font-weight: normal; border-bottom: 1px solid #664D9D;">MdEditor</a>:这个编辑器集成了很多可视化的按钮,建议对语法不熟悉的初学者使用,可以到处点点看看,当做学习练习之用.</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; font-size: 14px; font-weight: normal; color: #595959;"><a href="https://www.madoko.net/editor.html" style="text-decoration: none; word-wrap: break-word; color: #664D9D; font-weight: normal; border-bottom: 1px solid #664D9D;">madoko</a>:确切来说没发现啥优点,可用</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; font-size: 14px; font-weight: normal; color: #595959;"><a href="https://mdnice.com/" style="text-decoration: none; word-wrap: break-word; color: #664D9D; font-weight: normal; border-bottom: 1px solid #664D9D;">mdnice</a>:强烈推荐!!!微信公众号排版神器!!!</section></li></ul> <p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: #595959; margin: 10px 0px; letter-spacing: 2px; font-size: 14px; word-spacing: 2px;">这里要强烈的推荐mdnice!!! 原作者人帅心善,技术过硬,而且非常T恤民情. 本来该大神开发了更便捷的微信公众号写作插件之后有意停止网页版编辑器的维护.在我们这些忠实拥趸的撒泼打滚,万人血书,威逼利诱之下,大神勉强同意继续对网页版提供支持.</p> <p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: #595959; margin: 10px 0px; letter-spacing: 2px; font-size: 14px; word-spacing: 2px;">这里就以mdnice为工具,简单介绍如何在1分钟内完成一个简约又优雅的文章排版.在开始之前只要求大家记住几个标记:</p> <figure data-tool="mdnice编辑器" style="margin: 0; margin-top: 10px; margin-bottom: 10px;"><img src="https://wmcoding.oss-cn-hangzhou.aliyuncs.com/wmcoding/20200318151857.png" alt="常用标记" style="width: auto; max-width: 100%; border-radius: 6px; display: block; margin: 20px auto; object-fit: contain;"><figcaption style="margin-top: 5px; text-align: center; display: block; font-size: 13px; color: #595959;">常用标记</figcaption></figure> <p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: #595959; margin: 10px 0px; letter-spacing: 2px; font-size: 14px; word-spacing: 2px;">P.S.严格遵守博客园规定,不在正文对微信公众号做过度宣传.</p> <figure data-tool="mdnice编辑器" style="margin: 0; margin-top: 10px; margin-bottom: 10px;"><img src="https://wmcoding.oss-cn-hangzhou.aliyuncs.com/wmcoding/20200318153032.png" alt="mdnice的渲染效果" style="width: auto; max-width: 100%; border-radius: 6px; display: block; margin: 20px auto; object-fit: contain;"><figcaption style="margin-top: 5px; text-align: center; display: block; font-size: 13px; color: #595959;">mdnice的渲染效果</figcaption></figure> <p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: #595959; margin: 10px 0px; letter-spacing: 2px; font-size: 14px; word-spacing: 2px;">除了上面提到的语法之外,这里给一个更详细的语法说明. 如果有需要可以参考这个文档. <a href="https://raw.githubusercontent.com/timothyzhw/evernote-markdown-vue/master/Markdown.md" style="text-decoration: none; word-wrap: break-word; color: #664D9D; font-weight: normal; border-bottom: 1px solid #664D9D;">markdown常用语法说明</a></p> <h2 data-tool="mdnice编辑器" style="margin-top: 40px; margin-bottom: 20px; font-weight: bold; color: black; font-size: 24px; text-align: left; margin: 20px 10px 0px 0px;"><span style="font-size: 18px; font-weight: bold; display: inline-block; padding-left: 10px; border-left: 5px solid #DEC6FB; color: #595959;">markdown 30秒上手</span></h2> <p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: #595959; margin: 10px 0px; letter-spacing: 2px; font-size: 14px; word-spacing: 2px;">可能刚开始使用markdown的话,会有点不习惯,毕竟需要记住的标记还是有点多的.</p> <p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: #595959; margin: 10px 0px; letter-spacing: 2px; font-size: 14px; word-spacing: 2px;">这里教大家一个30秒上手的最好办法,只需要记住三个标记符号和一个快捷键就可以完成大部分操作.</p> <ol data-tool="mdnice编辑器" style="margin-top: 8px; margin-bottom: 8px; padding-left: 25px; list-style-type: decimal; font-size: 15px; color: #595959;"> <li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; font-size: 14px; font-weight: normal; color: #595959;">记住标题所需要的标记 <strong style="color: #595959; font-weight: bold;"><span>「</span>#<span>」</span></strong></section></li><li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; font-size: 14px; font-weight: normal; color: #595959;">记住无序列表的标记 <strong style="color: #595959; font-weight: bold;"><span>「</span>-<span>」</span></strong></section></li><li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; font-size: 14px; font-weight: normal; color: #595959;">记住引用的标记 <strong style="color: #595959; font-weight: bold;"><span>「</span>&gt;<span>」</span></strong></section></li><li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; font-size: 14px; font-weight: normal; color: #595959;">记住加粗的快捷键 ctrl+b</section></li></ol> <p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: #595959; margin: 10px 0px; letter-spacing: 2px; font-size: 14px; word-spacing: 2px;">然后使用mdnice开始你的编辑吧. 对了mdnice内置了很多不错的主题样式,可以选择你喜欢的主题,让排版后的文字更漂亮一些. 其他的排版需求可以直接在功能菜单中查看.</p> <figure data-tool="mdnice编辑器" style="margin: 0; margin-top: 10px; margin-bottom: 10px;"><img src="https://wmcoding.oss-cn-hangzhou.aliyuncs.com/wmcoding/20200318153645.png" alt="mdnice的菜单" style="width: auto; max-width: 100%; border-radius: 6px; display: block; margin: 20px auto; object-fit: contain;"><figcaption style="margin-top: 5px; text-align: center; display: block; font-size: 13px; color: #595959;">mdnice的菜单</figcaption></figure> <p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: #595959; margin: 10px 0px; letter-spacing: 2px; font-size: 14px; word-spacing: 2px;">但是咨询过管理员,在签名中放公众号二维码是可以的.嘿嘿~~</p> <p id="nice-suffix-juejin-container" class="nice-suffix-juejin-container" data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: #595959; margin: 10px 0px; letter-spacing: 2px; font-size: 14px; word-spacing: 2px; margin-top: 20px !important;">本文使用 <a href="https://mdnice.com" style="text-decoration: none; word-wrap: break-word; color: #664D9D; font-weight: normal; border-bottom: 1px solid #664D9D;">mdnice</a> 排版</p></section>

原文出处:https://www.cnblogs.com/thecatcher/p/12517780.html

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部