Skip to main content

小书匠语法说明之html属性配置decorate

小书匠语法说明之html属性配置decorate相关疑问使用HTML 片段效果示例概述

概述

html属性配置(decorate) 语法属于修饰性语法,可以对生成的 html 片段添加属性 ,比如给 html 标签添加 class, id, style 等属性,方便用户对该 html 片段进行个性化的定义。使用该语法需要用户对 html, css 有一定的基础。

该语法在不同的编辑器或者解析器支持不一样,小书匠使用 markdown-it 的扩展 markdown-it-decorate 实现对html属性修改的支持。。

使用

元数据标识: grammar_decorate

想要使用该语法,需要在设置>扩展语法 里把 html属性配置(decorate) 选项打开。或者在每篇文章的元数据里通过 grammar_decorate 进行控制。系统默认关闭 html属性配置(decorate) 语法功能

该语法与 attrs 语法, class 语法冲突,使用 html属性配置(decorate) 时,自动禁用 grammar_attrsgrammar_classy 语法。

该语法需要开启 grammar_html 功能

只要在想要特殊处理的块级语法或者行内语法结尾添加以符号 <!-- {}--> 包裹的内容即可。被包裹的内容里 class 名称可以以 . 符号开头, id名称可以以 # 符号开头, 其他 html 属性,以键值对的方式填写,键值对之间以 = 符号做标记,多个键值对以空格区分

详细使用规则也可以参考这里 https://github.com/rstacruz/markdown-it-decorate

  1. 1<!-- {...} --> 
  2. 2...里的内容可以是 .class, #id, key=attr,或者它们之间的组合 

示例

  1. 1Hello, from *Markdown*! 
  2. 2<!-- {.red style="color:red;"} --> 

效果

Hello, from Markdown

HTML 片段

  1. 1<p>Hello, from <em class="red" style="color:red;">Markdown</em><br> 
  2. 2</p> 

疑问

相关

  1. markdown-it github官网
  2. markdown-it 语法测试
  3. class 语法
  4. attrs 语法