hexo 博客如何写出彩色字体,能实时预览的那种?

Typora编辑器

博主没学过啥web语言,偶尔在博客上写几篇文章当笔记,之前米板刷了ubuntu为了学C/C++,在ubuntu的Bash里一顿傻瓜操作,本地部署了hexo,再用gedit写博客,上传至Git Hub😄,后来嫌屏幕太小,又在win10上用GitBash重新搭了一次,发现Typora这个文本编辑器十分上手,除了实时支持MarkDown语法的渲染结果,还支持在文本编辑模式下同时显示图片,那么,还有没有更多的功能呢?有的,还支持实时预览html标签的渲染结果😆

Typora官网

一些实用的标签

span - - - style | 设置字体属性

杂烩用法:

1
<span style='color:文字颜色;background:背景颜色;font-size:文字大小;font-family:字体;'>文字</span>

style后传入的参数以分号隔开,参数数量可裁剪

其中color:支持三种格式 颜色名,十六进制颜色值,RGB取色器

示例:

  1. 三种color格式显示同样的红色字体:
1
<span style="color:red;">红不红?</span>

红不红?

1
<span style="color:rgb(255, 0, 0);">红不红?</span>

红不红?

1
<span style="color:#FF0000;">红不红?</span>

红不红?

  1. 黑底白字仿宋50px:黑白配
1
<span style='color:white;background:black;font-size:50px;font-family:仿宋;'>黑白配</span>

b & strong | 加粗字体

用法:

1
2
<b>我被B标签加粗</b>
<strong>我被Strong标签加粗</strong>

示例:

  1. 加粗字体:加粗
1
<b>加粗</b>
  1. 紫色加粗:骚紫色加粗
1
<b><span style="color:rgb(255, 0, 255);">骚紫色加粗</span></b>

sup & sub | 上标 & 下标

用法:

1
2
上标:<sup>内容</sup>
下标:<sub>内容</sub>

示例:

1
mm<sup>2</sup>

平方毫米: mm2

1
y = log<sub></sub>x

对数: y = logx

div - - align | 各种对齐

示例:

1
<div align="center">奇怪的知识增加了!</div>
奇怪的知识增加了!
1
<div align="center"><span style='color:white;background:black;font-size:20px;'>&#12288“事情总会朝着意想不到的方向发展”&#12288</span></div>
 “事情总会朝着意想不到的方向发展” 
| 参数 | 功能 | | :-----: | :------------: | | left | 左对齐 | | right | 右对齐 | | center | 居中对齐 | | justify | 伸展行文字间隔 |

后记

👉这几天就整理了这几个,如果有新的实用标签后续再补充哈~

湖蓝色:#138DE9

参考文献

Typora 完全使用详解

新手理解HTML、CSS、javascript之间的关系

WEB编程语言

CSS文本居中问题

颜色名列表

html上标与下标注标签元素

字符编码及空白汉字占位符