概述
将代码段内的文字转换成 img 标签
远程图片语法用于显示那些支持动态生成图片的服务在小书匠编辑器上显示这些动态图片，比如 Gravizo。该语法不是标准的 commonmark， 目前只有小书匠提供了对该语法的支持。
使用
元数据标识: grammar_xsjimg
想要使用该语法，需要在设置>扩展语法 里把xsjimg选项打开。或者在每篇文章的元数据里通过 grammar_xsjimg 进行控制。系统默认关闭xsjimg语法功能。
参数设置
服务器地址 (url)
支持的变量为 xsjimg,
示例
服务器地址为: https://g.gravizo.com/svg?{{xsjimg}}
参数编码方式 (encode)
支持的类型有: default, base64, zip
- default
- 使用 encodeURIComponent(正文内容) 方法对正文进行编码，并将编码后的内容替换到服务器地址里的
xsjimg变量里 - base64
- 使用 btoa(encodeURIComponent(正文内容)) 方法对正文进行编码，并将编码后的内容替换到服务器地址里的
xsjimg变量里 - zip
- 使用 压缩算法对正文进行压缩，并将编码后的内容替换到服务器地址里的
xsjimg变量里
代码块参数
xsjimg 支持修改参数，比如修改 url 参数或者 encode 参数， 需要注意的是参数值必须进行 encodeURIComponent 编码，例如
- 1```xsjimg!url=https%3A%2F%2Fg.gravizo.com%2Fsvg%3F%7B%7Bxsjimg%7D%7D
这样的话，就会替换掉全局的url,而仅对该代码块使用指定的 url 参数
支持 xsjimg 语法的相关网站服务
Gravizo
url 变量 https://g.gravizo.com/svg?{{xsjimg}} ,
编码后的变量 https%3A%2F%2Fg.gravizo.com%2Fsvg%3F%7B%7Bxsjimg%7D%7D
texs2cms
url 变量 https://tex.s2cms.ru/svg/{{xsjimg}},
编码后的变量 https%3A%2F%2Ftex.s2cms.ru%2Fsvg%2F%7B%7Bxsjimg%7D%7D
gravizo
示例
- 1``` xsjimg!?url=https%3A%2F%2Fg.gravizo.com%2Fsvg%3F%7B%7Bxsjimg%7D%7D
- 2/**
- 3*Structural Things
- 4*@opt commentname
- 5*@note Notes can
- 6*be extended to
- 7*span multiple lines
- 8*/
- 9class Structural{}
- 10
- 11/**
- 12*@opt all
- 13*@note Class
- 14*/
- 15class Counters extends Structural {
- 16 static public int counter;
- 17 public int getCounter();
- 18}
- 19
- 20/**
- 21*@opt shape activeclass
- 22*@opt all
- 23*@note Active Class
- 24*/
- 25class RunningCounter extends Counter{}
- 26```
预览效果
texs2cms
示例
- 1``` xsjimg!?url=https%3A%2F%2Ftex.s2cms.ru%2Fsvg%2F%7B%7Bxsjimg%7D%7D
- 2\begin{tikzpicture}[scale=1.0544]\small
- 3\begin{axis}[axis line style=gray,
- 4 samples=120,
- 5 width=9.0cm,height=16.4cm,
- 6 xmin=-1.5, xmax=1.5,
- 7 ymin=0, ymax=1.8,
- 8 restrict y to domain=-0.2:2,
- 9 ytick={1},
- 10 xtick={-1,1},
- 11 axis equal,
- 12 axis x line=center,
- 13 axis y line=center,
- 14 xlabel=$x$,ylabel=$y$]
- 15\addplot[red,domain=-2:1,semithick]{exp(x)};
- 16\addplot[black]{x+3};
- 17\addplot[] coordinates {(1,1.5)} node{$y=x+1$};
- 18\addplot[red] coordinates {(-1,0.6)} node{$y=e^x$};
- 19\path (axis cs:0,0) node [anchor=north west,yshift=-0.07cm] {0};
- 20\end{axis}
- 21\end{tikzpicture}
- 22```
预览效果图
注
目前小书匠不提供相关的解析服务器，使用前需要自己指定一个服务器