美文网首页简书活动汇总
《简书攻略》:妙用简书Markdown彩色文字,提升文章阅读体验

《简书攻略》:妙用简书Markdown彩色文字,提升文章阅读体验

作者: AT阿宝哥 | 来源:发表于2020-01-28 21:13 被阅读0次
世界应该是五彩斑斓的

简书Markdown编辑器默认使用黑色的文字,但是有时候我们想使用更多颜色来表达某种语义,或者是为了增强文字的视觉冲击力,或者为了区分某种层次关系等等。那么,仅仅用黑色就显得相当单调乏味。但是,我们也可以使用Markdown编辑器中的特殊语法让文字变成彩色,大幅度提升文章的阅读体验。在人脑每天接受的信息中,文字占比只有11%,而图像却高达75%以上,所以文章视觉美化的重要性,你懂得!正所谓耳目一新,或是一见钟情。

语法: $\color{ 颜色表示法 } { 文字 }$

比如,我想让自己的名字变成彩色:

\color{ red } { AT阿宝哥 } ,用到的颜色代码为$\color{ red } { AT阿宝哥 }$

\color{ #00FF00 } { AT阿宝哥 } ,用到的颜色代码为$\color{ #00FF00 } { AT阿宝哥 }$

\color{ rgb(0 , 0 , 255 ) } { AT阿宝哥 } ,用到的颜色代码为$\color{ rgb(0 , 0 , 255 ) } { AT阿宝哥 }$

在网页中,按照W3C标准,有如下几种颜色表示法:

  • 颜色名
  • 十六进制颜色值
  • RGB( R , G , B)表示法
  • RGBA(R,G,B,A)表示法
  • HSL(H,S,L)表示法
  • HSLA(H,S,L,A)表示法

本文中重点演示颜色名、十六进制颜色值和RGB表示法这三种。RGBA、HSL和HSLA表示法对于非专业人士,可能不易理解和使用。

1、颜色名

W3C的 html 4.0 标准仅支持 16 种颜色名,它们是:aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、purple、red、silver、teal、white、yellow。

当然,大多数浏览器支持更多的颜色名。更多具体颜色名,请参考《阿宝哥的HTML5笔记》之06:颜色名 ,此处不做赘述了。

\color{Red} {红色}

$\color{Red}{红色}$

\color{Green}{绿色}

$\color{Green}{绿色}$ 

\color{Blue}{蓝色}

$\color{Blue}{蓝色}$ 

2、十六进制颜色值

颜色由一个十六进制符号来定义,这个符号由红色、绿色和蓝色的值组成(RGB)。每种颜色的最小值是0(十六进制:#00)。最大值是255(十六进制:#FF),这样就能表示16581375中颜色。

语法:#RRGGBB

  • RR为红色值。十六进制正整数
  • GG为绿色值。十六进制正整数
  • BB为蓝色值。十六进制正整数

\color{#FF0000}{红色}

$\color{#FF0000}{红色}$

\color{#00FF00}{绿色}

$\color{#00FF00}{绿色}$

\color{#0000FF}{蓝色}

$\color{#0000FF}{蓝色}$

更多具体十六进制颜色值,请参考《阿宝哥的HTML5笔记》之06:颜色名 ,此处不做赘述了。

3、RGB( R , G , B)表示法

颜色由RGB( R , G , B)函数来定义,RGB()为函数名称,R、G、B三个参数分别代表红色、绿色和蓝色分量。每种颜色的最小值是0(十进制),最大值是255(十进制),这样就能表示16581375中颜色。

语法:RGB( R , G , B)

  • R为红色值。十进制正整数
  • G为绿色值。十进制正整数
  • B为蓝色值。十进制正整数

\color{ rgb( 255 , 0 , 0) }{红色}

$\color{  rgb(  255  ,  0  ,  0)  }{红色}$

\color{ rgb( 0, 255 , 0) }{绿色}

$\color{  rgb(  0,  255  ,  0)  }{绿色}$

\color{ rgb( 0, 0 , 255) }{蓝色}

$\color{  rgb(  0,  0  ,  255)  }{蓝色}$

4、配色表

划重点,计算机中的颜色是根据红、绿和蓝三个颜色分量混合而成,具体合成为哪种颜色,关键看红绿蓝三基色的数值大小,颜色表示法只是书写形式而已。所以,颜色表示法是不是特别像个数字调色板呢?

更多具体颜色名和十六进制颜色值,请参考《阿宝哥的HTML5笔记》之06:颜色名 ,此处不做赘述了。

5、深入研究

我们打开浏览器的开发者模式后,跟踪变色的文字,发现其实质上是简书根据颜色代码将修饰的文字自动转换成彩色图片。这意味着我们将无法改变被修饰文字的大小,以及当一篇文章中有多张彩色文字图片时将会影响加载的性能。如果读者是用手机在阅读文章,那么,这些图片势必会额外消耗手机流量。当然,当下的手机流量,土豪的您都是G级别的套餐,碎碎个事!

变色文字的本质

6、防盗攻略

经常看到简村很多才华横溢的作者辛辛苦苦写了一篇美文,却被一些千夫指的盗者擅自署名发表了,令人真是气愤!究其原因,这些盗者都是利欲熏心、好吃懒做之流,毫无道德和法律底线。此处AT阿宝哥分享下个人的防盗攻略,当然,这只是防范,但是不能杜绝。好比我们只能给家门装锁,但是不能杜绝盗者暴力撬门。

敲黑板,划重点。比如,我写了一段文字,使用简书Markdown彩色文字效果修饰:

\color{black}{|---------------|}
\color{red}{|作者:AT阿宝哥}
\color{green}{|婀娜衣,青石水,翠柳相挽醉不归。|}
\color{blue}{|玲珑月,萤虫追,华灯自谢梦又催。|}
\color{black}{|---------------|}

因为上面我们已经讲过,被修饰的文字都被简书自动转换成了图片,这意味着盗者只能拷贝图片。另外,您还可以在被修饰的文字中加入署名或者特殊字符等,对文章内容进行混淆。这样,盗者想在别的地方发表,会增加其编辑的难度和时间成本。

当然,对于内容较长的文章,一定程度上确实给盗者增加了复制难度,但也增加了作者的编辑难度。这种情况下,建议您使用手机简书的“文章生成图片”功能,将文章转换成图片再发表。

如果,您有更好的建议和方法,请不吝评论分享,我们一起让自己变得更棒,让简村变得更好。

7、操作指南

7.1、电脑操作

  1. 确保您的编辑器是MarkDown编辑器,而非富文本编辑器。在PC上的简书编辑器左下角,依此点击设置--默认编辑器--MarkDown编辑器
MarkDown编辑器

2.新建一篇文章,在编辑器中输入彩色文字相关内容,并单击红色圆圈处切换到预览模式查看效果。

编辑器中输入文字内容

实例内容,可以直接鼠标选中复制:

$\color{  red  } {  AT阿宝哥  }$ 

$\color{  #00FF00  } {  AT阿宝哥  }$

$\color{  rgb(0 ,  0 ,  255 )  } {  AT阿宝哥  }$
  1. 预览效果。
预览模式

7.2、手机操作

  1. 确保您的手机简书的编辑器是MarkDown编辑器,而非富文本编辑器。依此点击我的--设置--默认编辑器--MarkDown编辑器
MarkDown编辑器
  1. 新建一篇文章,在编辑器中输入彩色文字相关内容,并单击“预览”切换到预览模式查看效果。
输入彩色文字相关内容
  1. 预览效果。
预览效果

愿本文对你有所帮助,祝您梦想成真!

🤗🤗🤗🤗🤗🤗🤗🤗🤗🤗🤗🤗🤗🤗🤗🤗

相关文章

  • 《简书攻略》:妙用简书Markdown彩色文字,提升文章阅读体验

    简书Markdown编辑器默认使用黑色的文字,但是有时候我们想使用更多颜色来表达某种语义,或者是为了增强文字的视觉...

  • 简书文章被锁后完成解锁23个常见问题

    最有效最大价值阅读使用安心攻略文章的几个建议简书文章被锁解锁 · 攻略大全 内容提要 简书为什么锁文章? 简书怎么...

  • 2019-03-26简书markdown教材自我总结

    简书MD语法大全】—— ?解锁简书markdown语法# 简书markdown教程 他人的案例 看了不少简书的文章...

  • 28个简书冻结封号和解封常见问题

    最有效最大价值阅读使用安心攻略文章的几个建议简书冻结封号和解封 · 攻略大全 内容提要 简书封号的流程简书怎么发现...

  • 简书上写文章创作 · 攻略大全

    最有效最大价值阅读使用安心攻略文章的几个建议 简书Markdown 4种分段排版方式 几个技巧 [献给写作者的 M...

  • 简书第一文

    # MarkDown简书使用练习 ## 第一篇简书文章 今天从网上发现了简书这个MarkDown Web客户端,现...

  • 吐槽简书的 MarkDown 渲染,@简叔

    我试过不少文字发布网站,但简书的体验最好。于是,得寸进尺的心就开始作祟,我开始对简书的 MarkDown 渲染挑三...

  • 一些反思

    两年前开始接触简书,因为简书的markdown体验还不错,那时候就想纯粹的写一点文字,等老了再来品味自己的文字,后...

  • 搬离简书指南!

    简书是一个简洁、高效的文字创作、分享和阅读平台.简书的编辑器支持Markdown,让你可以专心进行文字创作而不用考...

  • 简书Markdown体验

    这是一级标题 这是二级标题 这是三级标题 这是四级标题 这是五级标题 这是六级标题 这是加粗的文字这是倾斜的文字这...

网友评论

    本文标题:《简书攻略》:妙用简书Markdown彩色文字,提升文章阅读体验

    本文链接:https://www.haomeiwen.com/subject/oyumthtx.html