我一直都会向朋友们推荐使用 Markdown 的方式来写文章，这样的方式有几个特点：
- 不再局限于编辑器的版本，任何时候不再考虑对方软件的问题。
- 不同平台不用反复调整格式，极大提升效率。
可是，就是会有战友们（一同战斗提升自我）会说：我不会 Markdown 这种语言啊？
其实这种语言的语法极其简单，就是一些特殊符号组成，例如 * 号，> 号，# 号之类的符号，把他们嵌入到文本中就好。
如果连这些都不想记，但又想享受 Markdown 的好处，该在怎么办？
树哥提供给你一个简单的方法，来实现这一点。这需要你有两个工具存在：
- Markdown 编辑器，推荐使用 印象笔记。
- Markdown 插件，推荐使用 Markdown Here插件。
一、Markdown 编辑器
有很多，例如typora之类的也非常好用，我推荐使用 印象笔记，安装完全新的版本后，会在 新建文件那里显示为一个大写的** “M”**， 如下图所示。
image.png
不会 Markdown 语言也没有关系，只要使用印象笔记上方提供的工具栏就可以了。
image.png
其实，看上去这些工具栏上的菜单和我们普通的编辑器没有什么不同，使用起来也会比较便利。
可能有些人会说了，使用 Markdown 的原因就是不想来回切换鼠标和输入，这样还是使用菜单，和原来有什么区别呢？
区别其实还是挺大的，
- 第一，虽然这样的方式还是通过工具栏使用的 Markdown ，最重要的是现在我们已经具备了 Markdwon 的文档了，也就能为下一步的便利打下基础了。
- 第二，当我们在不同的平台编辑文章的时候，例如简书、公众号、今日头条、百家号或者币乎之类的网站发布相同的内容时，就可以使用 Markdown 这种工具，方便快捷一键调整格式。
如何才能“一键调整格式呢？”
这还需要下面的一个工具， Markdown Here 插件。
二、 Markdown Here 插件
我们千辛万苦写出来的带有 Markdown Here的文字内容，里面没有我们平时看到的格式，只有一些标记符号，如下图所示：
image.png
我们如何才能让他们有比较好的呈现呢？
-
在编辑器里，往往有展示的方案，在下图中的用红色框子框了一些内容，左侧部分就是使用 Markdown 的标记语言，而右侧就是呈现效果。：
image.png
- 在网页浏览器中，使用 Markdown Here 插件。
其实这个插件也有什么可以说的，只要从百度搜索一下下载安装就好。
安装完成后，在网页的有上角会有一个如下的图标，
image.png
以后把 Markdown 的文本粘贴到网页中，一点一下这个图标就可以一键转换了。
是不是效率极高，看起来很爽？
不过，你可能会说，我想要一些特别的效果。
这就需要了 Mardkown Here 的配置中，修改CSS配置了。如下图所示:
image.png
里面就是规定了一些格式定义，字体啊，颜色啊，大小等等。如果看不懂，也没有关系。
找一份自己喜欢的格式定义，粘贴进去就好。
而且这个事情只需要做一次，以后再也不用管了。
下面，我提供一份我比较喜欢的格式，是李笑来老师做的，有需要的人可以直接使用。
.markdown-here-wrapper {
font-size: 16px;
line-height: 1.8em;
letter-spacing: 0.1em;
}
pre, code {
font-size: 14px;
font-family: Roboto, 'Courier New', Consolas, Inconsolata, Courier, monospace;
margin: auto 5px;
}
code {
white-space: pre-wrap;
border-radius: 2px;
display: inline;
}
pre {
font-size: 15px;
line-height: 1.4em;
display: block; !important;
}
pre code {
white-space: pre;
overflow: auto;
border-radius: 3px;
padding: 1px 1px;
display: block !important;
}
strong, b{
color: #BF360C;
}
em, i {
color: #009688;
}
hr {
border: 1px solid #BF360C;
margin: 1.5em auto;
}
p {
margin: 1.5em 5px !important;
}
table, pre, dl, blockquote, q, ul, ol {
margin: 10px 5px;
}
ul, ol {
padding-left: 15px;
}
li {
margin: 10px;
}
li p {
margin: 10px 0 !important;
}
ul ul, ul ol, ol ul, ol ol {
margin: 0;
padding-left: 10px;
}
ul {
list-style-type: circle;
}
dl {
padding: 0;
}
dl dt {
font-size: 1em;
font-weight: bold;
font-style: italic;
}
dl dd {
margin: 0 0 10px;
padding: 0 10px;
}
blockquote, q {
border-left: 2px solid #009688;
padding: 0 10px;
color: #777;
quotes: none;
margin-left: 1em;
}
blockquote::before, blockquote::after, q::before, q::after {
content: none;
}
h1, h2, h3, h4, h5, h6 {
margin: 20px 0 10px;
padding: 0;
font-style: bold !important;
color: #009688 !important;
text-align: center !important;
margin: 1.5em 5px !important;
padding: 0.5em 1em !important;
}
h1 {
font-size: 24px !important;
border-bottom: 1px solid #ddd !important;
}
h2 {
font-size: 20px !important;
border-bottom: 1px solid #eee !important;
}
h3 {
font-size: 18px;
}
h4 {
font-size: 16px;
}
table {
padding: 0;
border-collapse: collapse;
border-spacing: 0;
font-size: 1em;
font: inherit;
border: 0;
margin: 0 auto;
}
tbody {
margin: 0;
padding: 0;
border: 0;
}
table tr {
border: 0;
border-top: 1px solid #CCC;
background-color: white;
margin: 0;
padding: 0;
}
table tr:nth-child(2n) {
background-color: #F8F8F8;
}
table tr th, table tr td {
font-size: 16px;
border: 1px solid #CCC;
margin: 0;
padding: 5px 10px;
}
table tr th {
font-weight: bold;
color: #eee;
border: 1px solid #009688;
background-color: #009688;
}
网友评论