「一键排版」有可能吗？
职场
学术
新媒体
设计
极客
当然有两篇文章建议提前阅读一下《微信文案「颜值」如何系统性提升（1）？》和《微信文案「颜值」如何系统性提升（2）？》
理论上，我们可以只按一次组合快捷键 Ctrl+Alt+M，就直接完成任何微信/微博的排版。
仅需完成一次精心的配置，从此 1 秒排版。本文底部提供一个基础模版可供复制，欢迎转发使用。
排出来的水平取决于配置的态度。比如 JZ 朋友阿禅的公众号，在圈里是出了名的美观，他也在自己的文章里透露使用到了 markdown 语法实现，不过暂时没用「一键」的形式；但同样是科技圈的爱范儿曾经一度用可能是外包的软件做 markdown 自动排版，丑到辣眼，后来被我们骂过之后可算知道订正了。
想知道怎么实现「一键排版」吗？你只需要准备 Chrome 浏览器，和在浏览器中安装好 Markdown.here 插件。当然，插件来自谷歌的应用商店，如果你不知道如何进入谷歌商店，可以回复我们公众号「翻墙」了解一下。接下去，重点来了：
1. 明确自己微信/微博图文的大纲、模块关系
看起来是一句废话，但是真的有很多人不知道。
比如顶部引导、正文大纲、配图、配字、说明、超链接区、二维码、阅读原文等……有些运营人连自己的微信/微博图文有几个模块都搞不清楚，那活该排版丑。
2. 确定每个大纲和模块的样式（HTML5 的 CSS3 渲染样式）
刚才提到的这些，组合起来基本就是微信/微博的 VI 样式。举个例子，知名金融公众平台「真格基金」的图文整体 VI 样式是由我们 JZ 定制的▼
微信/微博 VI 是正规企业规范性和专业性的体现。而这种 VI 不仅关乎设计，更关乎代码实现，因为微信/微博图文的样式本质上都是 HTML5 的 CSS3 样式。
JZ 给其他企业定制完成的 VI 很多最终都是专业代码包（看看就行，新上手的运营人不至于做这么正式规格的）▼
3.在 Markdown.here 中录入准备好的全部大纲与模块的样式代码规范。
饭要一口一口吃。你可以参考网友@吴隐隐的学习经历，看一看基本配置的具体方法▼
1）为什么要用 markdown 语法？
因为 markdown 大法好。现代职场中很多人都使用它排版电子文稿包括简历、邮件和普通的 Word 文档。
2）如何设置？
安装好 Markdown.here 插件后，其实你已经可以完成 「一键排版」，只不过使用的是插件的默认样式。
如果想做个性化配置，请进入：Chrome → 设置 → 扩展程序 → markdown.here → 选项 → 基本渲染 CSS。
比如字体问题，我们可以先规范主标题的基本样式。比如把一级标题改为 20 px，二级标题改为 18 px▼
h1, h2, h3, h4, h5, h6{
margin: 1.3em 0 1em;
padding:0;
font-weight: bold;
}
h1 {
font-size:20px;
border-bottom:1px solid #ddd;
}
h2 {
font-size:18px;
border-bottom: 1px solid #eee;
}
h3 {
font-size:16px;
}
h4 {
font-size:16px;
}
h5 {
font-size:16px;
}
h6 {
font-size:16px;
color:#777;
}考虑到很多账号的正文现在使用 14 号字，你可能会想再加一段渲染规则▼
p {
font-size:14px;
}；不过不见得生效，最好的解决方案是在 li 后面加入 font-size ▼
li {
margin: 0.5em 0;
font-size:14px;
}；这样一来，你就配置好了正文的渲染规则。是不是会让你想到锤子便签的 markdown 模式？没错，原理一致。从此你只需要写纯文本内容，并在不同模块前加好 markdown 的规范标记，就可以在写完文本后转换格式了。
4.按下组合键 Ctrl+Alt+M 即可，你在浏览器里一切支持 CSS 渲染的文本内容都支持这种转换，不仅是微信/微博图文编辑界面，还包括你的邮箱草稿。
当然，程序员读者会注意到，就这篇 JZ 的文章当中，还出现了语法的 CSS 高亮，这对于在微信/微博里说明代码简直赛高。
其实实现方法也很简单，只要在代码的开头加“ ``` ”之后加上 「javascript」或者「ruby」或者「其他语言」即可，在代码结束为止再用“ ``` ” 封闭，原本黑色的代码就可以切换成本文中带有高亮的代码视觉样式。
但是默认情况下，「值的类型 type 」中的 type 无法被红色标记出，所以你需要补一段渲染规则▼
p code {
color: rgb(217, 33, 66);
};至于其它语法的高亮形式，程序员也可以自定义，或者复制 Sublime TEXT 的一些模版就也不错。
最后，给大家提供一下插件里渲染规则的默认模版。如果插件里写渲染时候不当心写坏了方便你重置▼
/*
*NOTE:
*- The use of browser-specific styles (-moz-, -webkit-) should be avoided.
* Ifused, they may not render correctly for people reading the email in
* adifferent browser than the one from which the email was sent.
*- The use of state-dependent styles (like a:hover) don't work because they
* don't match at the time the styles are made explicit. (In email, styles
* mustbe explicitly applied to all elements -- stylesheets get stripped.)
*/
/* This is the overall wrapper, itshould be treated as the `body` section. */
.markdown-here-wrapper {
}
/* To add site specific rules, you canuse the `data-md-url` attribute that we
add to the wrapper element. Note that rules like this are used depending
on the URL you're *sending* from, not the URL where the recipient viewsit.
*/
/* .markdown-here-wrapper[data-md-url*="mail.yahoo."]ul { color: red; } */
pre, code {
font-size:0.85em;
font-family: Consolas, Inconsolata, Courier, monospace;
}
code {
margin: 0 0.15em;
padding: 0 0.3em;
white-space: pre-wrap;
border: 1px solid #EAEAEA;
background-color:#F8F8F8;
border-radius:3px;
display: inline; /* added to fixYahoo block display of inline code */
}
pre {
font-size:1em;
line-height:1.2em;
}
precode {
white-space: pre;
overflow: auto; /* fixes issue#70: Firefox/Thunderbird: Code blocks with horizontal scroll would have badbackground colour */
border-radius:3px;
border: 1px solid #CCC;
padding: 0.5em 0.7em;
display: block; /* added to counteract theYahoo-specific `code` rule; without this, code blocks in Blogger are broken */ }
/* In edit mode, Wordpress uses a `* {font: ...;} rule+style that makes highlighted
code look non-monospace. This rule willoverride it. */
.markdown-here-wrapper[data-md-url*="wordpress."]codespan {
font: inherit;
}
/* Wordpress adds a grey background to`pre` elements that doesn't go well with
our syntax highlighting. */
.markdown-here-wrapper[data-md-url*="wordpress."]pre {
background-color: transparent;
}
/* This spacing has been tweaked toclosely match Gmail+Chrome "paragraph" (two line breaks) spacing.
Note that we only use a top margin andnot a bottom margin -- this prevents the
"blank line" look at the topof the email (issue #243).
*/
p {
/* is needed here becauseHotmail/Outlook.com uses to
kill the margin in <p>. We need this to win. */
margin: 0 0 1.2em 0 ;
}
table, pre, dl, blockquote, q, ul, ol {
margin: 1.2em 0;
}
ul, ol {
padding-left:2em;
}
li {
margin: 0.5em 0;
}
/* Space paragraphs in a list the sameas the list itself. */
lip {
/* Needs to override ruleabove. */
margin: 0.5em 0 ;
}
/* Smaller spacing for sub-lists */
ulul, ulol, olul, olol {
margin:0;
padding-left:1em;
}
/* Use Roman numerals forsub-ordered-lists. (Like Github.) */
olol, ulol {
list-style-type: lower-roman;
}
/* Use letters for sub-sub-orderedlists. (Like Github.) */
ululol, ulolol, olulol, ololol {
list-style-type: lower-alpha;
}
dl {
padding:0;
}
dldt {
font-size:1em;
font-weight: bold;
font-style: italic;
}
dldd {
margin: 0 0 1em;
padding: 0 1em;
}
blockquote, q {
border-left:4px solid #DDD;
padding: 0 1em;
color:#777;
quotes: none; }
blockquote::before, blockquote::after, q::before, q::after { content: none;
}
h1, h2, h3, h4, h5, h6 {
margin: 1.3em 0 1em;
padding:0;
font-weight: bold;
}
h1 {
font-size:1.6em;
border-bottom:1px solid #ddd;
}
h2 {
font-size:1.4em;
border-bottom:1px solid #eee;
}
h3 {
font-size:1.3em;
}
h4 {
font-size:1.2em;
}
h5 {
font-size:1em;
}
h6 {
font-size:1em;
color:#777;
}
table {
padding:0;
border-collapse: collapse; border-spacing:0;
font-size:1em;
font: inherit;
border:0;
}
tbody {
margin:0;
padding:0;
border:0;
}
tabletr {
border:0;
border-top:1px solid #CCC;
background-color: white;
margin:0;
padding:0;
}
tabletr:nth-child(2n) {
background-color:#F8F8F8;
}
tabletrth, tabletrtd {
font-size:1em;
border:1px solid #CCC;
margin:0;
padding: 0.5em 1em;
}
tabletrth {
font-weight: bold;
background-color:#F0F0F0;
}如果了解这个插件的基本工作原理，各位读者不妨设定自己偏好的渲染样式。如果你设计了优质的图文渲染样式，不妨投稿给我们，可以展示给更多用户甚至出售给商业公司。
回复排版微信样式从入门到大神
回复电商入门微信营销变现平台
回复标题学习网络文案标题写作
| JZ 往期商业伙伴 |
APEC 峰会 | 中国航天集团 | 浙江省人民广播电台 | 湖北省电视台
河南卫视 | 交通银行 | 建设银行 | 平安银行 | 民生银行 | 真格基金
南方周末 | 上海闵行教育学院 | 上海创智云课堂 | 新东方集团
伟巴斯特 | 雪佛兰汽车 | 雷诺汽车 | 观致汽车 | TNS新华信
高力国际｜第一太平戴维斯｜德国莱茵｜盖茨基金会｜追星集团
H5／平面／视频／多媒体服务与定制
（021）3721 8818