Skip to main content

小书匠语法说明之远程图片

概述

将代码段内的文字转换成 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. 1```xsjimg!url=https%3A%2F%2Fg.gravizo.com%2Fsvg%3F%7B%7Bxsjimg%7D%7D 

这样的话,就会替换掉全局的url,而仅对该代码块使用指定的 url 参数

支持 xsjimg 语法的相关网站服务

Gravizo

http://gravizo.com/

url 变量 https://g.gravizo.com/svg?{{xsjimg}} ,
编码后的变量 https%3A%2F%2Fg.gravizo.com%2Fsvg%3F%7B%7Bxsjimg%7D%7D

texs2cms

https://tex.s2cms.com/

url 变量 https://tex.s2cms.ru/svg/{{xsjimg}},
编码后的变量 https%3A%2F%2Ftex.s2cms.ru%2Fsvg%2F%7B%7Bxsjimg%7D%7D

gravizo

示例

  1. 1``` xsjimg!?url=https%3A%2F%2Fg.gravizo.com%2Fsvg%3F%7B%7Bxsjimg%7D%7D 
  2. 2/** 
  3. 3*Structural Things 
  4. 4*@opt commentname 
  5. 5*@note Notes can 
  6. 6*be extended to 
  7. 7*span multiple lines 
  8. 8*/ 
  9. 9class Structural{} 
  10. 10 
  11. 11/** 
  12. 12*@opt all 
  13. 13*@note Class 
  14. 14*/ 
  15. 15class Counters extends Structural { 
  16. 16 static public int counter; 
  17. 17 public int getCounter(); 
  18. 18
  19. 19 
  20. 20/** 
  21. 21*@opt shape activeclass 
  22. 22*@opt all 
  23. 23*@note Active Class 
  24. 24*/ 
  25. 25class RunningCounter extends Counter{} 
  26. 26``` 

预览效果

texs2cms

示例

  1. 1``` xsjimg!?url=https%3A%2F%2Ftex.s2cms.ru%2Fsvg%2F%7B%7Bxsjimg%7D%7D 
  2. 2\begin{tikzpicture}[scale=1.0544]\small 
  3. 3\begin{axis}[axis line style=gray, 
  4. 4 samples=120, 
  5. 5 width=9.0cm,height=16.4cm, 
  6. 6 xmin=-1.5, xmax=1.5, 
  7. 7 ymin=0, ymax=1.8, 
  8. 8 restrict y to domain=-0.2:2, 
  9. 9 ytick={1}, 
  10. 10 xtick={-1,1}, 
  11. 11 axis equal, 
  12. 12 axis x line=center, 
  13. 13 axis y line=center, 
  14. 14 xlabel=$x$,ylabel=$y$] 
  15. 15\addplot[red,domain=-2:1,semithick]{exp(x)}; 
  16. 16\addplot[black]{x+3}; 
  17. 17\addplot[] coordinates {(1,1.5)} node{$y=x+1$}; 
  18. 18\addplot[red] coordinates {(-1,0.6)} node{$y=e^x$}; 
  19. 19\path (axis cs:0,0) node [anchor=north west,yshift=-0.07cm] {0}; 
  20. 20\end{axis} 
  21. 21\end{tikzpicture} 
  22. 22``` 

预览效果图

目前小书匠不提供相关的解析服务器,使用前需要自己指定一个服务器

相关

  1. gravizo 官网
  2. texs2cms 官网