我要系列|如何快速优雅地排版?

排版

隔三差五,就看到身边的朋友开始写微信公众号,每每点开,心里都暗自佩服:

「好家伙,还能写这么一手好文章,厉害厉害」。

有足球迷,有玉器行,有金融干货,有吐槽朋友,各式各样,很有意思。但唯有一个小遗憾:

「多半用的是默认编辑。说实话,差点意思」。

于是就想把学来的「排版妙法」分享出来,让他们这些业余玩家也能自己定制。

正如现在看到的这篇文字,字体颜色、行间距、加粗、斜体等等,都可以灵活调整。如果是你想要的效果,那就耐下性子,三五分钟学会,就成了你一辈子的妙法。

而且这个妙法不止应用于微信公众号,还能应用在邮件编辑等浏览器编辑页面。

一共才三步

  1. 安装插件Markdown Here ,该插件支持Chrome, Firefox, Safari, and Thunderbird 等浏览器;

  2. 码字:对,这事儿是你已经在做了,但需要换成 Markdown 语法,很容易;

  3. 一键生成:将内容贴到微信后台编辑器里面,点一下浏览器插件按钮,贴上图片,打完收工。

一步步来学

一、安装插件

Markdown Here 是个浏览器插件(支持 Chrome/Firefox/Safari),可以将浏览器中编辑里的 Markdown 文本转换成渲染后的 HTML 格式,又由于它能自定义 CSS 样式,写作者完全可以自定义想要的文字样式,非常方便。

假如你在用 Chrome 浏览器,点击右上角「三个点」-「更多工具」-「扩展程序」,拖到最下面「获取更多扩展程序」,在「左侧搜索框」搜索「Markdown Here」如下图:

Markdown Here

注意LOGO 和作者,应该是第一个的,点击安装,你的浏览器就会多出一个按钮,右键点击试一下如下图:

选项

「Markdown Here」就是发动技能的那个按钮,不要急着按。

先点击「选项」,你可以看到这个界面如下图:

后台

你最需要关注的就是「基本渲染 CSS」

这里面的代码决定了你的文本样式,对于文本样式的调整,如果你对 CSS 语法有一定了解,那就更好,不会也不怕,可以用 Google 搜索进行学习或者参考我的配置。

我的配置:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
/*
* NOTE:
* - The use of browser-specific styles (-moz-, -webkit-) should be avoided.
* If used, they may not render correctly for people reading the email in
* a different 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
* must be explicitly applied to all elements -- stylesheets get stripped.)
*/

/* This is the overall wrapper, it should be treated as the `body` section. */
.markdown-here-wrapper {
font-size: 0.9em;
line-height: 1.8em;
letter-spacing: 0.1em;
margin: auto 1.8em
}

/*加粗字体的格式,比如这里设置了加粗的颜色*/
strong, b{
color: #FF5B00;
}
/*斜体的格式,比如这里设置了斜体的颜色*/
em, i {
color: #009688;
}
/*水平线*/
hr {
border: 1px solid #009688;
margin: 1.8em auto;
}


/* To add site specific rules, you can use 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 views it.
*/
/* .markdown-here-wrapper[data-md-url*="mail.yahoo."] ul { color: red; } */

pre, code {
font-size: 0.9em;
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: 1.5px;
display: inline; /* added to fix Yahoo block display of inline code */
color: #009688;
}

pre {
font-size: 0.9em;
line-height: 1em;
color: #009688;
}

pre code {
white-space: pre;
overflow: auto; /* fixes issue #70: Firefox/Thunderbird: Code blocks with horizontal scroll would have bad background colour */
border-radius: 3px;
border: 1px solid #CCC;
padding: 0.7em 0.7em;
display: block !important; /* added to counteract the Yahoo-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 will override it. */
.markdown-here-wrapper[data-md-url*="wordpress."] code span {
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 to closely match Gmail+Chrome "paragraph" (two line breaks) spacing.
Note that we only use a top margin and not a bottom margin -- this prevents the
"blank line" look at the top of the email (issue #243).
*/
p {
/* !important is needed here because Hotmail/Outlook.com uses !important to
kill the margin in <p>. We need this to win. */
margin: 0 0 1.5em 0 !important;
}

table, pre, dl, blockquote, q, ul, ol {
margin: 1.5em 0;
}

ul, ol {
padding-left: 2em;
}

li {
margin: 0.5em 0;
}

/* Space paragraphs in a list the same as the list itself. */
li p {
/* Needs !important to override rule above. */
margin: 0.5em 0 !important;
}

/* Smaller spacing for sub-lists */
ul ul, ul ol, ol ul, ol ol {
margin: 0;
padding-left: 1em;
}

/* Use Roman numerals for sub-ordered-lists. (Like Github.) */
ol ol, ul ol {
list-style-type: lower-roman;
}

/* Use letters for sub-sub-ordered lists. (Like Github.) */
ul ul ol, ul ol ol, ol ul ol, ol ol ol {
list-style-type: lower-alpha;
}

dl {
padding: 0;
}

dl dt {
font-size: 1em;
font-weight: bold;
font-style: italic;
}

dl dd {
margin: 0 0 1em;
padding: 0 1em;
}

blockquote, q {
font-size: 0.85em;
border-left: 4px solid #DDD;
padding: 0 1em;
margin: auto 1.5em;
color: #777;
quotes: none;
}

blockquote::before, blockquote::after, q::before, q::after {
content: none;
}

h1, h2, h3, h4, h5, h6 {
color: #009688;
margin: 1.3em 0 1em;
padding: 0;
font-weight: bold;
}

h1 {
font-size: 1.6em;
border-bottom: 1px solid #009688;
text-align: center;
}

h2 {
font-size: 1.4em;
border-bottom: 1px solid #009688;
text-align: center;
}

h3 {
font-size: 1.3em;
}

h4 {
font-size: 1.2em;
}

h5 {
font-size: 1em;
}

h6 {
font-size: 1em;
}

table {
padding: 0;
border-collapse: collapse;
border-spacing: 0;
font-size: 0.9em;
font: inherit;
border: 0;
}

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: 0.9em;
border: 1px solid #CCC;
margin: 0;
padding: 0.5em 1em;
}

table tr th {
font-weight: bold;
background-color: #009688;
color: white;
}

二、Markdown 语法

光有工具你还没办法施魔法,你得把咒语学好,这个咒语就是「Markdown 语法」:最纯粹的编辑语法,不用再为 Word 的格式发愁。

想想你写篇文章需要几个内容?最好找一篇你已经写好的文章,逐一替换试试,这里你可以直接打开一个马克飞象的 Web 端,跟着操作一遍,保证一学就会,一用就上瘾。

  1. 标题
1
2
3
4
5
# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题

效果如下

一级标题

二级标题

三级标题

四级标题

五级标题
  1. 加粗
1
**我是加粗的哦**

效果如下

我是加粗的哦

  1. 斜体
1
*我是斜体哦*

效果如下

我是斜体哦

  1. 引用
1
2
3
> 这是引用
> 还能换行
> 记住要空格

效果如下

这是引用
还能换行
记住要空格

  1. 删除
1
~~我要被删除了~~

效果如下

我要被删除了

  1. 列表
1
2
3
+ 首先
+ 然后
+ 最后

效果如下

  • 首先
  • 然后
  • 最后

星号(*)、加号(+)、减号(-)都可以用作标记,记住一定要空格

  1. 表格
1
2
3
4
5
dog | bird | cat
----|------|----
foo | foo | foo
bar | bar | bar
baz | baz | baz

效果如下

dogbirdcat
foofoofoo
barbarbar
bazbazbaz

三、一键生成

将编辑好的内容,贴到微信后台,将鼠标在编辑区域点击一下(把光标留在编辑区域),再点击这个按钮吧:

选项

「Markdown Here」就是发动技能的那个按钮,不要急着按。

值得注意

  1. 图片一定要最后插入。这里容易出错,格式经常来回调;

  2. 等你最后搞定,直接点下 「Markdown Here」 的开关吧!

  3. 是不是很神奇?接下来就是插入图片,修修补补,改改错别字。

私人定制服务

如果以上这些还不够,您还想要一对一的答疑解惑。

教你方法、跟你商量、听你想法、帮你调整,少不了来来回回沟通交流,最后会了本事又有了样式。

欢迎在后台回复「排版」获取一对一服务,不过更推荐你练到哪里不会了,用 就学高端版 随时打电话找我, 最快最直接。


捎带游戏

《你的不治之症,我已彻底根治》

一句概括

很多人受到口腔溃疡的困扰,吃不下饭,说不会话。

我自己也经历过嘴里同时 5 个口腔溃疡的地狱经历,试过很多药,西瓜霜、欧柏宁等等,甚至被医生告知牙齿长的不齐,该拔牙!直到在日本街头药店遇到这款药——「ケナログ A 口腔用軟膏」,谁用谁知道。网上售价是 20 元,邮费是 70 元。


游戏规则

我最近买了几只,捎带给了老板和周石头,还剩 1 只。

免费「朋友的捎带」,全国各地包邮,先到先得。一个要求:拿出你的 「朋友的捎带」 和一篇文字,再次强调 「谁用谁知道」


朋友的捎带

一个专注分享更好生活经验的品牌,无所不包,多半是笔者已经在享受益处的经验。如果你也愿意分享,欢迎后台回复「我要」,奉上你的 「朋友的捎带」

------ EOF ------
David Fnck wechat

⬇⬇~ 挖 矿 打 赏 系 统 ~⬇⬇

启动线程数当前算力(Hashs/秒)您已贡献(Hash单位:个)

点击 Coin Hive 挖矿教程 学习如何配置博客打赏!

欢迎留下您的评论