让写作省心一点——Markdown和CSS实践

1 弁言

今天这篇推送和以往不太一样,乍一看就能发现花样有了转变。没错,这是我专门设计的品牌模板,也就是本民众号以后创作的文章可直接套用,获得一致的气概样式。

除此以外,文章里的所有元素(包罗题目、表格、图片、列表、引用等)都能直接复制到其它博客平台(如wordpress、CSDN、博客园、知乎等)公布,且无需重新排版或上传图片。

本文中,我会先简要地先容两个观点——Markdown和CSS——然后先容一个通过编辑器软件Typora把它们连系起来使用,从而提升撰写和公布文章效率的方式。写文章的历程,对微信民众号平台来说,有近似“所见即所得”的体验。连内容带花样,写完直接复制粘贴到编辑器就可以公布了。

话不多说,我们最先吧。

2 保留花样的Markdown

当我们辛辛苦苦写完一篇图文后,若是想到差别的网站公布,用传统方式会很贫苦——花样需要重新调整,图也需要重新上传——而Markdown语言可以解决这个问题。

2.1 MarkDown语言

Markdown是一种可以使用通俗文本编辑器编写的符号语言。通过简朴的符号语法,它可以使通俗文本内容具有一定的花样。

——百度百科

假设我们在A网站的Markdown编辑器中,使用Markdown语法把一段文字符号为“一级题目”,那么当我们把这段内容复制到B、C、D网站,它同样也会被识别为一级题目,而不会被误认为通俗正文、引用或链接等其它元素,也就是说,花样可以保留。下面是一个例子。

让写作省心一点——Markdown和CSS实践

上图中彩色符号即为Markdown符号

把文字和Markdown符号全选复制,粘贴到各个网站或平台的Markdown编辑器中,就能在预览界面看到准确花样了,如下图所示:

让写作省心一点——Markdown和CSS实践

右图展示了现实泛起效果

至此,文本的一次誊写、多次使用,就实现了。

可能人人会疑惑:岂非写文章时,还需要分外影象和输入种种符号?不用忧郁,在电脑和手机端,划分通过快捷键和点击屏幕就行了,无需手打,各种Markdown编辑器通常都支持。

让写作省心一点——Markdown和CSS实践

除了上述便于复制的优点以外,Markdown同样改变了写作体验。它可以使得我们在手不脱离键盘的情况下,既能输出内容,又能排版,从而提高效率。

2.2 Markdown支持的常见花样

Markdown所能符号的文字花样,对于通俗写民众号或博客的需求已经基本够用,以下列出一部门常用的:

  • 题目,从H1到H6,字体巨细递减
  • 有序/无序列表
  • 引用
  • 代码块
  • 公式块
  • 分割线、脚注、链接
  • 简朴表格

本文就完全是用Markdown来写的。到现在为止,已经泛起了题目、引用、无序列表,在下文会有更多花样泛起。

2.3 图床

之前的叙述都是关于文字,下面说图片。图片对于内容表达的重要性不言而喻,一篇文章中可能含有多达数十张图片。当统一篇文章在差别平台要公布时,按原始方式,需要把图片划分在差别地方一张张重新上传并插入至准确位置,异常繁琐。要解决这个问题,需要使用图床。

图床就是专门用来存放图片,同时允许你把图片对外毗邻的网上空间。

——百度百科

图床是专门存放图片的地方,其中每张图片都市获得一个URL地址(在网络上的唯一地址,类似于网站地址),写文章时填写该地址就找到对应的图片并插入。由于图片的URL是唯一的,以是我们在Markdown代码中对图片的引用,无论复制到哪个Markdown编辑器都起效(除非该网站克制图片外部链接)。

本文用到的所有图片都存放在七牛云图床的10GB免费工具存储空间中,但七牛云仅提供一个月的暂且域名供测试,若是想长期使用,就需要绑定中国大陆已立案的域名。域名立案需要有域名和服务器,有一定成本发生,我会把相关履历放在本文的附录部门。也有免费图床方案,但研究它们的时间成本过高,我没有接纳。

搞懂js中小数运算精度问题缘故原由及解决办法

3 决议排版样式的CSS

Markdown可以界说文章中内容属性——这句话是正文,那句话是题目——整篇文章都安排得明明白白,但它不能界说它们的外观,好比一号题目的巨细,是什么颜色,有没有边框等。这些是由CSS完成的。

3.1 CSS语言

CSS层叠样式表(英文全称:Cascading Style Sheets)是一种用来显示HTML(尺度通用符号语言)的一个应用或XML(尺度通用符号语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合种种脚本语言动态地对网页各元素举行花样化。

——百度百科

听起来,CSS是计算机语言,对通俗人来说太庞大,但实在它很容易上手,用记事本就能写,把后缀名改为.css就可以。下面举个例子。

h3 {
    font-size: 1em;      
    /*字号*/
    
    line-height: 1.43;   
    /*行高*/
    
    text-shadow: 0.08em 0em rgb(144,174,176);   
    /*字体阴影粗细、偏向、颜色*/
    
    padding-left:3px;    
    /* 左缩进 */
}

这就是本文中3号题目的css代码。我们把字号,行高的数字改改,颜色换一个rgb值或16进制值,再保留,就能改变响应样式。以是,在现成的CSS模板上稍加修改,是效率最高的方式。

3.2 我的CSS规范

我用下面两个“表格”列出本文的CSS规范,你们可以很容易地看出它们的“身份”不是图片。另外,样式上有一些瑕疵,不够雅观。实在,这一方面是由于Markdown自己对于表格的编辑功效有限,另一方面是由于受到了微信民众号的默认CSS规范的影响。

颜色规范如下:

主题 内容 备注
主品牌色 红色 H2题目
副品牌色 青色1 引用
字体色 深灰
辅助色 淡灰 分割线、表格
备注色 青色2 备注、文字阴影
模块色 青色3 H1题目

HTML元素规范如下:

元素 属性 用途
H1 斜体+阴影
H2 主题色边框+粗体
H3 字体阴影
H5 备注色,缩小字符间距 图片注解
H6 引用色、斜体、右对齐 作者、出处等
有序列表 第一层数字、第二层小写字母
引用 引用色、斜体

4 连系Markdown与CSS

4.1 Typora

至此,好戏终于即将上演。给人人先容一款软件——Typora,它有Mac版和Windows版,现在还在测试阶段,是免费的。

首先,它是一个写作体验优越的Markdown编辑器。其次,它可以挪用CSS文件来更改显示效果——我们可以自界说CSS文件来确立个人气概。最后,图文写完后可以直接全选复制,粘贴到各种支持Markdown的编辑器中。对于微信民众号来说, 最后展现效果绝大部门和Typora中写作时相同。

4.2 Typora的主题选项

让写作省心一点——Markdown和CSS实践

主题实质为挪用css文件

下面,通过动图来感受一下,同样的内容在差别主题下的效果。

让写作省心一点——Markdown和CSS实践

如图,选择差别主题可马上改变全文排版

4.3 写作体验

下面是我录制的一段Demo动画。可以看到,通过简朴的快捷键,就可以实时地调整花样+样式。写文章真正有了行云流水的感受。

让写作省心一点——Markdown和CSS实践

主要内容到这里就竣事了,希望对人人有用。若是有更多内容想探讨,可以给我号内留言,我知道的都可以分享。下面是附录,分外弥补一些技术信息。

附录

关于域名立案

为了使用图床,我接纳的是阿里云的域名+服务器+域名立案服务。步骤如下:

  1. 阿里云购置ecs云服务器:新人第一次购置有优惠(3年不到200),到期后替换最廉价的即可。(分钟级)
  2. 阿里云购置域名:按需选择,廉价的贵的都有,越短越贵。(秒级)
  3. 阿里云立案产物服务,提交立案:历程中如遇到域名曾经立案过持有人,须解决域名过户。(小时级)
  4. 阿里云立案初审。(1天内客服会打电话确认信息)
  5. 管局审核,约莫10天开通乐成,收到通知短信提醒将已立案标识放置在网页中。

文章多发的其它方式

我试过在Word内里编写图文,通过插件导入的方式上传到民众号或者Wordpress博客,这种方式使用场景有限制,大多数网站都没有这样的插件,而且操作究竟繁琐,不推荐。

参考资料推荐

https://zhuanlan.zhihu.com/p/97868759

  • 先容markdown多平台公布及七牛图床使用

https://sspai.com/post/59091

  • 关于民众号的排版规范和CSS

https://www.colorhexa.com/

  • 颜色16进制和RGB转换

让写作省心一点——Markdown和CSS实践

原创文章,作者:dddof新闻网,如若转载,请注明出处:https://www.dddof.com/archives/11273.html