Markdown here plugin download (Chrome extension installation tutorial)

Markdown herePlugin download (Chrome extension installation tutorial)

Markdown is an "email" style "markup language".Chen Weilianghighly recommended for allInternet marketingPractitioners, learn and master the language.

If you participate inIntercept Collegecourses to learn to doWeb Promotion, need to writeE-commerceMarketingCopywritingArticle, I have heard of Markdown, but I haven't learned it, it must be because you think Markdown will be difficult to learn.

But in fact, doingWechat marketingAny editor of , as long as it takes ten minutes, can learn it.

At that time, you may sigh "Why didn't I learn Markdwon to write online marketing copy earlier"?

In fact, there are only 5 types of commonly used Markdown syntax:

• Use # to mark this text as a first-level title, and N # to mark this as an N-level title.
• Adding * or 1. "2. "3. before the text can be realized as a list.
• Add > before the paragraph to mark it as a reference
• Add a * before and after the text to display italic, and two * to display it in bold
• Use [text](link address) to insert hyperlinks

Plugin download

Markdown here Official download address:
http://markdown-here.com/get.html

Markdown here is a browser plugin (Chrome/Firefox/Safari) that converts Markdown text in the editor in the browser into rendered HTML.You can also customize CSS, which is really cool for those who often use the Markdown format. You use Markdown to write emails, documents, etc.

To install and set up Markdown Here, just follow the steps below:

1. Install the Markdown Here plugin in Google Chrome
2. Configure Markdown Here Option, customize some CSS

Public account quick typesetting method

• Write an article in Markdown format, please refer to this article for details: "How to quickly typeset the WeChat public account?Billionaire Li Xiaolai's layout takes only 1 second"

WP+ official account writing process

• use WordPress do wechatPublic account promotion?See this article for details:'WordPress pastes into the WeChat official account editor, how to make the article typesetting style correct? 》

custom CSS

The main modifications are as follows:

1. font (size, color)
2. Line spacing
3. word spacing

The summary principles are as follows:

• The font size of the body of the article is preferably between 14-18px, with 16px being the most suitable.
• The line spacing is 1.5-1.75 times the line spacing, which will look more comfortable.
• Articles on mobile terminals do not need to be indented on the first line.
• Between paragraphs, a blank line is best.

Markdown here plugin CSS

copy以下Chen WeiliangUse the Markdown here plugin CSS code to Chrome → Settings → Extensions → markdown.here → Options→ Basic Rendering CSS

/*
CSS Name: Markdown here插件CSS
Version: 3.0
Description: Designed by <a href="https://www.chenweiliang.com/">陈沩亮博客</a>
Author: 陈沩亮
Author URI: https://www.chenweiliang.com/
License: GNU General Public License
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Copyright: (c) 2017 陈沩亮.
*/

.markdown-here-wrapper {
 font-size: 16px;
 line-height: 1.75em;
 letter-spacing: 2px;
 padding-left: 1em;
 padding-right: 1em;
 margin: 1.5em 5px !important; 
}



div p {
 font-size: 16px;
 line-height: 1.75em;
 letter-spacing: 2px;
 padding-left: 1em;
 padding-right: 1em;
 margin: 1.5em 5px !important; 
}

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 {
 font-size: 16px;
 line-height: 1.75em;
 letter-spacing: 2px;
 padding-left: 1em;
 padding-right: 1em;
 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;
}

share 2 morenew mediaCustom styles for Markdown here for people:

Yang Zhiping:

https://github.com/veganshe/CodeBlock/blob/master/Markdown-here/markdown-here-yzp.css

Li Xiaolai:

https://gist.github.com/xiaolai/aa190255b7dde302d10208ae247fc9f2