用Markdown写微信公众号文章
时间:2022-07-23
本文章向大家介绍用Markdown写微信公众号文章,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
目前微信公众号的编辑器是不支持Markdown语法的,那怎么办呢?
有一款叫Markdown Here的插件可以解决这个问题(支持Chrome、Firefox、Safari)。
官方网站:
http://markdown-here.com/
Markdown here插件下载地址(需翻墙)
Markdown Here 的用法非常简单,直接在编辑器中用Markdown语法写完文章或粘贴进去写好的文章,然后鼠标右键选择「Markdown转换」,或者点击 Markdown Here 插件图标转换。(键盘默认快捷键是Ctrl + Alt + M)
这时候你会发现文章排版全好了,amazing!
Markdown Here默认使用的是Github风格的排版,如果你懂CSS的话甚至可以自己定义。
那么工作步骤是什么样的:
- 设置 Markdown 编辑器;
- 在 Markdown 编辑器上码字,顺便练习 Markdown 语法;
- 在 Chrome 浏览器中安装 Markdown Here 插件;
- 自定义 Markdown Here 的 CSS;
- 把 Markdown 编辑器上码好的文章复制粘帖到微信公众帐号的编辑器中;
- 使用 Markdown Here 一键渲染,完成排版;
- 插入图片,审核,修订;
- 保存并群发。
一般的文章写作主要用到语法就是以下这些符号(英文状态输入):
- 一级标题:标题内容前加 #
- 二级标题:标题内容前加 ##
- 三级标题:标题内容前加 ###
- 加粗:加粗内容两端加 **
- 斜体:斜体内容两端加 *
- 引用:引用内容前加 >
- 列表:列表内容前加 * 或 -
- 加框:加框内容两端加 `
- 图片:!加 [图片名称] 加 (图片网址)
- 链接:[文字] 加 (链接网址)
- 邮箱:<邮箱地址>
- 删除:删除内容两端加 ~~
- 分割线:三个或以上的 * 或 -
如果你不喜欢这种效果,可以自定义 Markdown Here 的 CSS,来实现自己想要的效果。当然,前提是你必须懂得 CSS 语法。
右键插件
.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;
}
@pinwen
给你贴心的安排了一份CSS
复制我上面的东西,到这个地方
做个示范,这个是我本地预览的
md的文档
打开简书的写作后台
未处理
- Lake Counting(POJ-2386)
- Vue快速入门
- 04-树6. Huffman Codes--优先队列(堆)在哈夫曼树与哈夫曼编码上的应用
- SpringAOP实战应用
- 04-树5. File Transfer--并查集
- React快速入门
- 04-树4. Root of AVL Tree-平衡查找树AVL树的实现
- Java并发编程快速学习
- Stanford机器学习笔记-7. Machine Learning System Design
- 小程序也有“home”键盘了!
- 深度学习在文本分类中的应用
- 《大型网站技术架构》学习笔记-03案例篇
- 记一次排查DB死锁的分析
- Linux系统常用命令总结
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法