TSBBLOG

独立观察及记录

本站作者写作进阶指南

使用报告 0 评 字数:3152

# Markdown # HTML

该文章旨为协助本站作者在后台写作,对使用 Typecho 搭建的博客亦通用。

Markdown 基础指南请阅读庭说博客的 Markdown 入门教程及书写风格指南 。如若无法翻墙,请点击这里阅读 转载版本

本站作者写作进阶指南
后台登录界面


前言

不同于 WordPress 博客系统默认使用 Gutenberg(古德堡)编辑器,使用区 / 块的编辑器,涵盖了较为全面的功能。Typecho 博客系统使用一种简洁的语法 Markdown,近年来一种被程序员推崇的语言,一种纯文本编辑器。

我们在写作的过程难免会在排版上下功夫,事实上,以排版的角度看待 Markdown 的排版(语法),它是残缺的。对于这些缺憾,目前我能找到的最优解是利用 Markdown 支持 HTML 语法的特性,来补充排版的不足。同样这些解决方案你在中文互联网可以找到相同或类似的,在这里,我等于做了个集合。

在个人常用的几个功能中,我遇到以下几个问题,希望可以帮助到本博客的作者。

本站作者写作进阶指南
Typecho 后台界面


图片居中 / 文字居中

由于 Markdown 是纯文本编辑,即便可以插入图片但也无法使其居中。这个时候,我们可以借助 HTML 语法中的 div 标签来完成这一排版。

通常情况下,Markdown 默认插入图片是靠左的。Markdown 常见的插入图片格式:

![alt 属性](图片地址)

图片居中的方案之一是使用 div 标签设置 align 属性,使用语法如下,其中 align 属性可以改动。

<div align=center><img src="图片地址"></div>

该语法同样适用于文字居中效果。使用语法如下,效果如下。

<div align=center>文字居中</div>
文字居中

注:如果插入图片尺寸过大的话无需使用 div 标签,页面会自动填充图片形成居中效果。


下划线

Markdown 语法中无下划线语法,因为 Markdown 外部链接的默认样式就是下划线,为避免混淆,所以官方没有下划线语法。

下划线的方案是使用 HTML 语法中的 u 标签或 span 标签,u 标签的使用语法如下,效果如下。

<u>下划线效果</u>

下划线效果

使用 u 标签可能会让读者误以为是外部链接,为了避免这种情况。我个人建议使用 span 标签,设置 css 属性来实现下划线。其中 2px 数值可改;dashed 和 red 属性可改,dashed(圆点虚线) 可以改成 solid(圆滑实线)、dotted(方块虚线),red 可以改任意颜色(英文)。语法使用如下。具体效果如下。

<span style="border-bottom:2px dashed red;">下划线效果</span>

下划线效果

下划线效果

下划线效果


设置锚点

在页面内实现跳转,这种跳转一般叫锚点。Markdown 语法仅支持目录跳转,文本内容无法设置页内跳转。

页内方案是使用 span 标签,设置 jump 属性,使用语法如下,其中 jump1 属性 / 数值可改,且与指定跳转的位置对应,否则无法跳转。

[指定跳转内容](#jump1) 
<span id="jump1"> 指定跳转的位置</span>

具体效果如下:

点击这里跳转

设置锚点是用于注释或者参考资料,建议不在其它情况下使用,避免锚点造成页面错乱。


颜色块 / 字体更换

同样使用 HTML 语法可以更换字体(需要浏览器或系统支持)和字体颜色,通常使用 font 标签即可实现效果。使用 face 属性可以更换字体,属性值支持中文和英文;color 属性用于更换字体颜色,属性支持颜色指令(英文)和颜色的十六进制码,具体语法使用如下,效果如下。

<font face="黑体">我是黑体字</font>
<font color=#008000>我是绿色</font>

我是黑体字
我是绿色

注:颜色的十六进制码通过谷歌搜索即可。


简繁按钮

该功能是实验性功能,后续可能移除。由于存在一简对多繁和多简对一繁,所以目前无法精准转换,故转化会导致错别字的出现。使用代码如下,效果如下。

<a id="translateLink">简/繁</a>

简/繁

注:在文章任意处插入该代码即可生效,建议放在文章头部。


字体大小

Markdown 字体大小仅支持标题的大小,即,H1(使用 #)、H2(使用 ##),由此类推。标题外的字体大小可使用 font 标签来实现,语法使用如下,效果如下。

<font size=1>小号字体</font>
<font size=2>中号字体</font>
<font size=3>大号字体</font>

小号字体
中号字体
大号字体

注:size 属性值仅支持整数,小数点后数值无效。


持续更新中


你正在测试页内跳转功能,点击这里 返回继续阅读)

什么是 W-8BEN 表格?