[bug]时序图代码块内输入<tag>时会自动在尾部增加</tag>

[geek5nan]

在 sequence 代码块内输入标签时，会自动在尾部闭合代码快内出现过的标签，如下所示。

Alice->Bob: 1. sendMessage(message:Message<T>)
Bob->Coco: 2. sendMessage(message:Message<T>)

看了下 render.js 的源码，应该是 hexo 中标签插件 {% raw %}的默认行为。

data.content += sequences.map(function (code, index) {
  var seqId = getId(index);
  var codeId = seqId + '-code';
  var optionsId = seqId + '-options';
  return '' +
    '{% raw %}' +
    '<textarea id="' + codeId + '" style="display: none">' + code + '</textarea>' +
    '<textarea id="' + optionsId + '" style="display: none">' + JSON.stringify(config.options) + '</textarea>' +
    '<script>' +
    '  var code = document.getElementById("' + codeId + '").value;' +
    '  var options = JSON.parse(decodeURIComponent(document.getElementById("' + optionsId + '").value));' +
    '  var diagram = Diagram.parse(code);' +
    '  diagram.drawSVG("' + seqId + '", options);' +
    '</script>' +
    '{% endraw %}';
}).join('');

解决思路：提前将sequence 代码块中的 < >符号替换为 &lt和 &gt，代码如下。

 data.content += sequences.map(function (code, index) {
   var seqId = getId(index);
   var codeId = seqId + '-code';
   var optionsId = seqId + '-options';
+ code = code.replace(/</g,'&lt').replace(/>/g,'&gt');
   return '' +
     '{% raw %}' +
     '<textarea id="' + codeId + '" style="display: none">' + code + '</textarea>' +
     '<textarea id="' + optionsId + '" style="display: none">' + JSON.stringify(config.options) + '</textarea>' +
     '<script>' +
     '  var code = document.getElementById("' + codeId + '").value;' +
     '  var options = JSON.parse(decodeURIComponent(document.getElementById("' + optionsId + '").value));' +
     '  var diagram = Diagram.parse(code);' +
     '  diagram.drawSVG("' + seqId + '", options);' +
     '</script>' +
     '{% endraw %}';
 }).join('');

解决后的效果：