fk标记语言文档
- 左侧是文本编辑框哦,为fk语言的纯文本,右侧为fk语言渲染之后的结果
- 你可以直接在左侧输入文本,右侧会即时看到渲染之后的页面哦
fk标记语言示例:https://prain.cn/fk-doc
fk说明
fk(方块的首字母简写)是一种可以使用普通文本编写的标记语言,通过简单的标记语法,使内容具有丰富的格式样式,主要用来编写文章、技术文档、产品手册……等等。
初衷
我的一些项目上线之前,需要编写大量的文档说明,这需要放在官网上供他人查阅,除了借助第三方平台写作之外,自己只能通过html静态页来做,内容少还好些,当类目众多的时候,编写起来十分不方便,这让我开始考虑要不要做一套文档写作系统,经过一段时间的思考,我还是认为文档的编写使用Markdown比较方便,内容直观,易于维护,但是,我不喜欢Markdown的编写方式,并且Markdown支持的样式有限,所以我不得不考虑搞一套纯属文档编写的标记语言。
目标
文档的格式以及所用的样式需要高度自由化,并且目录分类必须明确,使用简单,也就是说一个文档的形成最起码需要有一个目录树,或者说章节名称,例如看云平台创建目录需要依靠平台来做,首先你必须要使用鼠标操作,输入文字,一个一个来创建,如果目录也可以使用纯文本建立呢?那么大大的提高了文档编辑操作,并且也与正文的编辑方式统一了,所有的文件都是统一的fk文本文档,易于任何编辑器编写,包括手机。
过程
我在使用Markdown的过程中,有些使用方式比较繁琐,甚至混淆,例如斜体用到一个*,粗体用到两个*,粗斜体用到三个*,如果直接浏览源文本的话就容易混淆,为什么就不能分开?必须都使用星号*?还有最常用的#,H1用一个#,H2用两个#,如果是H6那么你就需要写六个#,先不说这很让人心烦,写这么多也累啊,还不直观,所以从格式上来看,至少我个人是认为不够完美的,影响美观,增加了字符,我的理想目标是整个文档就像是一个纯文本,尽量不要出现过多的符号。
不仅如此,在使用一些特别的样式时,需要使用HTML的标签才能支持,最后就会感觉这一切很混乱,更让我无法忍受的是添加图片时,一眼过去我已经对链接和图片混淆了,所以最终我编写了fk。
标识符说明
- 为了说明文档,以下的语法演示中,
CMD
表示标识符 - 标识符出现在正文的初始位置时,作用于整行
- 标识符出现在局部标识符
[ ]
中初始位置时,作用于局部 - 一般标识符后面紧跟一个空格,用于区分标识符和正文,而多个标识符之间用点
.
分割 - 如果想要在正文中显示标识符,使用反斜杠
来转义
- 整行语法:
CMD 正文
,或[CMD] 正文
- 局部语法:
[CMD 正文]
以下标识符列表说明中,带星号 * 的表示仅作用于整行,可以使用中括号[],也可以不使用。
标识符 | 说明 |
---|---|
[ ] | 局部标识符,成对出现 |
<> | html代码,成对出现 |
` ` | 单行code代码展示,成对出现,语法为: |
`` `` | 多行code代码展示,成对出现,两个反引号或以上,语法为: |
( ) | A链接跳转,成对出现 |
- | * 无序列表 |
* | * 有序列表 |
# | * H标题 |
#1 | * H1标题 |
#2 | * H2标题 |
#3 | * H3标题 |
#4 | * H4标题 |
#5 | * H5标题 |
#6 | * H6标题 |
@ | 邮箱 |
/ | 斜体 |
% | 粗体 |
_ | 下划线 |
i | 斜体(italic的小写首字母),同 |
b | 粗体(bold的小写首字母),同 |
u | 下划线(underline的小写首字母),同 |
s | 删除线(strikethrough的小写首字母) |
R | 红色(Red的大写首字母) |
O | 橙色(Orange的大写首字母) |
Y | 黄色(Yellow的大写首字母) |
G | 绿色(Green的大写首字母) |
C | 青色(Cyan的大写首字母) |
B | 蓝色(Blue的大写首字母) |
P | 紫色(Purple的大写首字母) |
D | 默认色(Default的大写首字母) |
== | * hr水平线,两个等号或以上 |
> | * 引用 |
| | * 表格,多列使用 |
-- | * 表格中用于分割表头和正文,两个减号或以上 |
t | 普通标题 |
ts | 删除线类型标题 |
tu | 下划线类型标题 |
tl | 居左类型标题 |
tc | 居中类型标题 |
tr | 居右类型标题 |
sup | 上标 |
sub | 下标 |
img | 图片展示 |
file | 文件下载 |
icon | 徽章图标 |
left | * 文本左对齐 |
center | * 文本居中对齐 |
right | * 文本右对齐badge |
#525D76 | * 十六进制颜色,设置文本颜色 |
~20 | * 文本大小 |
$ | * 定义变量 |
. | 使用变量 |
CONF配置项
conf中的$
符前缀用于定义正文的属性样式,属性样式请参考CSS,例如:$font-size = 14px
$color = #353535
配置项 | 说明 |
---|---|
wrap | 渲染文本中的换行 |
$style | 设置正文的样式 |
// conf的几种写法,看个人习惯 // 第一种:每行一条配置 [conf wrap = true] [conf $font-size = 14px] // 第二种:合并配置,用逗号隔开 [conf wrap = true, $font-size = 14px] // 第三种:合并配置,换行隔开 [conf wrap=true font-size=14px ]
TABLE表格
对齐标识符为减号-
,如果在左边为左对齐,如果在左右两边为居中对齐,如果在右边为右对齐,默认左对齐
表头的正文左侧如果为数字,则表示列宽,数字后面应紧跟一个空格或者-
表头的正文左侧颜色标识符,则可设置当前表格的前景色和背景色,背景色语法为:[#F08080]
,背景色与前景色用点.
隔开,语法为:[#F08080.#FFFFFF]
,
姓名 | 年龄 |
---|---|
霍尘 | 29 |
沉秋 | 27 |
百里名兰 | 31 |
云千尤 | 22 |
冬梅 | 23 |
姓名 | 年龄 | 购买 | 金额 |
---|---|---|---|
霍尘 | 29 | 笔记本 | 3988 |
沉秋 | 27 | 手机 | 3988 |
百里名兰 | 31 | 电脑 | 3988 |
云千尤 | 22 | 平板 | 3988 |
冬梅 | 23 | 手机 | 3988 |
高级表格使用示例,支持多行文本
标题 | 说明 |
---|---|
支持情况 | 支持标题表格内的内容支持所有标记符 fk标记语言支持任何浏览器,因为她最终会生成标准的HTML代码,比起Markdown,fk更加灵活多变,支持的样式更加丰富,为了使排版更加方便,fk不仅仅是单纯的标记语言,她正在向编程语言方向扩展,就像HTML中的JS脚本能力。 文字引用 |
浏览器支持 | IE Firefox Chrome Safari Opera 所有浏览器都支持 fk标记语言支持任何浏览器,因为她最终会生成标准的HTML代码,比起Markdown,fk更加灵活多变,支持的样式更加丰富,为了使排版更加方便,fk不仅仅是单纯的标记语言,她正在向编程语言方向扩展,就像HTML中的JS脚本能力。 |
浏览器支持 | IE Firefox Chrome Safari Opera 所有浏览器都支持 fk标记语言支持任何浏览器,因为她最终会生成标准的HTML代码,比起Markdown,fk更加灵活多变,支持的样式更加丰富,为了使排版更加方便,fk不仅仅是单纯的标记语言,她正在向编程语言方向扩展,就像HTML中的JS脚本能力。 |
- 标记符使用table
- 表头列使用
|
分割,如果第一行出现|
,则为表头 - 正文列之间使用两个横杠
-
或两个以上分割 - 如果存在表头,例如表头的列数量为3,那么正文行数应为3的倍数,将依次按照九宫格的顺序依次渲染
[table 180 标题 | 说明 -- 浏览器支持 -- IE Firefox Chrome Safari Opera 所有浏览器都支持 fk标记语言支持任何浏览器,因为她最终会生成标准的HTML代码,比起Markdown,fk更加灵活多变,支持的样式更加丰富,为了使排版更加方便,fk不仅仅是单纯的标记语言,她正在向编程语言方向扩展,就像HTML中的JS脚本能力。 -- 浏览器支持 -- IE Firefox Chrome Safari Opera 所有浏览器都支持 fk标记语言支持任何浏览器,因为她最终会生成标准的HTML代码,比起Markdown,fk更加灵活多变,支持的样式更加丰富,为了使排版更加方便,fk不仅仅是单纯的标记语言,她正在向编程语言方向扩展,就像HTML中的JS脚本能力。 ]
自定义变量使用前缀$
,使用变量使用前缀.
标题:晚霞的笼罩
内容:此时淡蓝的天中飘着几团淡火,粉红粉红的,如一个个温柔而含情脉脉的少女。
变量可以重复定义,定义的内容可以使用变量
title变量内容已改为:夕阳西下-晚霞的笼罩
变量还可以放在局部标识符中
非常美丽。
字体:作用整行,每行的开头使用标识符
斜体
粗体
下划线
斜体
粗体
删除线
下划线
字体:作用局部,使用中括号,里面使用标识符
斜体:唯美青丝
粗体:唯美青丝
下划线:唯美青丝
斜体:唯美青丝
粗体:唯美青丝
删除线:唯美青丝
下划线:唯美青丝
自定义颜色:唯美青丝
我是自定义的颜色
红色
颜色
所有颜色标识符为大写字母,并为颜色单词的首字母,如下表示:
R:红色Red
O:橙色Orange
Y:黄色Yellow
G:绿色Green
C:青色Cyan
B:蓝色Blue
P:紫色Purple
引用
普通的引用
以下为添加颜色标识符的引用
红色的
橙色的
黄色的
绿色的
青色的
蓝色的
紫色的
标识符组合使用
标识符可以组合使用,用小点.
分割,例如:
我加粗并为红色
我倾斜、加粗并为绿色
也可以局部使用啦
徽章图标
语法:[icon 标题|内容 颜色](链接)
,内容、颜色和链接都是选填
颜色 | 说明 |
---|---|
red | 红色 |
orange | 橙色 |
yellow | 黄色 |
green | 绿色 |
cyan | 青色 |
blue | 蓝色 |
purple | 紫色 |
gray | 灰色 |
black | 黑色 |
default | 默认色:红色,不填写为默认色 |
rgb(0,0,0) | RGB色值 |
默认
版本
更新
gitee
github
build
访问量
时间
禁用
issues
水平线
两个等号或以上为水平线
上标和下标
上标
下标
上标:X4,下标:O2
文字颜色
彩色文字: 红色 橙色 黄色 绿色 青色 蓝色 紫色
标签
普通标签: 唯美青丝 倾国倾城
彩色标签(淡色): 红色 橙色 黄色 绿色 青色 蓝色 紫色 默认
彩色标签(深色): 红色 橙色 黄色 绿色 青色 蓝色 紫色 默认
% 淡色与深色使用说明:
淡色:颜色标识符前面为L,Light的首字母
深色:颜色标识符前面为D,Dark的首字母
H标题
H标题
H标题
H标题
H标题
H标题
H标题
默认使用#即可,为H2,带下划线,如果不想使用下划线请使用#2,如果想要使#1到#6都有下划线的话,只需要后面添加一个减号“-”就行,例如:“#3-”;
样式标题
普通标题
删除线类型标题
下划线类型标题
居左类型标题
居中类型标题
居右类型标题
A链接
可以点击的网址:https://xueluo.cn
可以点击的网址,带title:https://xueluo.cn
无序列表
无序列表使用减号 -
标识符,子级的减号 -
前面为两个空格,减号 -
后面可以为颜色标识符
+R 我是列表1
- 进入百度
- 我是列表3
- 我是子列表1
- 我是子列表2
- 我是子列表3
- 我是子列表1
- 我是子列表2
- 我是列表4
有序列表
有序列表使用星号 *
标识符,子级的星号 *
前面为两个空格,星号 *
后面可以为颜色标识符
- 我是列表1
- 我是列表2
- 我是列表3
- 我是子列表
- 我是子列表
- 我是子列表
图片
这是普通的图片:
这是带alt和title的图片:
文件下载
链接
这是普通的A连接:进入百度
这是带title的A链接:进入百度
水平线
代码展示-局部
使用一对反引号,例如class
,data-name="Tali"
,var a = 1+1;
代码展示
- 这种方式书写比较美观,建议使用,代码段的开头和结尾最少使用三个相连的反引号 “`”
- 代码语言标识需要写在开头反引号的后面,注意:是最少三个相连的反引号后面哦
$a = 1; if($a){ echo 1; }else{ echo '2'; }
这种方式与md使用一样,也支持,但是与正文容易混淆,
//右下角弹出 function popup_p_rb(){ iceui.popup({ title:'这是标题', content:'这是标准弹窗', position:'rb' }); } //导航菜单锚点平滑滚动 iceui.scrollAnchor('.menu',200); //树形菜单 iceui.tree({div:'tree'}); //轮播图 iceui.slider({id:'slider-none'});