解决 Ghost 博文内嵌 JS 代码中全等号 === 引起的错误

在 Ghost 中编辑文章,如果用到如下内嵌 js 脚本:

<script>  
var num = 0;  
if(num === 0) {  
  console.log(num)
}else if(num === 1){
  alert(num)
}
</script>  

我们当然是希望他按规矩打印出 num。但 Ghost 在将编辑器中内容转成 html 时上面 js 被干扰成这个鬼东西,还会引起报错。

<script>  
var num = 0;  
if(num <mark>= 0) {  
  console.log(num)
}else if(num </mark>= 1){
  alert(num)
}
</script>  

这是因为 Ghost 的 markdown 转 html 工具用了个插件 highlight.js,它会将介于两个 ==之间的内容用<mark>标签包起来,并且将双等替换为 mark 标签。然而<pre><code>内部的==并不会被转义。前面在介绍另一种Ghost添加代码高亮方式时就修改过这个插件。这里还是修改这个插件,给<script>标签写一个类似<pre>的排除方法。

首先找到这个文件/node_modules/showdown-ghost/src/extensions/highlight.js看看它是怎么保护 pre 和 code 标签的。

var highlightRegex = /(=){2}([\s\S]+?)(=){2}/gim,  
    preExtractions = {},
    codeExtractions = {},
    scriptExtractions = {},
    hashID = 0;

function hashId() {  
    return hashID += 1;
}

// Extract pre blocks
text = text.replace(/<pre>[\s\S]*?<\/pre>/gim, function (x) {  
    var hash = hashId();
    preExtractions[hash] = x;
    return '{gfm-js-extract-pre-' + hash + '}';
}, 'm');

// Extract code blocks
text = text.replace(/<code>[\s\S]*?<\/code>/gim, function (x) {  
    var hash = hashId();
    codeExtractions[hash] = x;
    return '{gfm-js-extract-code-' + hash + '}';
}, 'm');

照葫芦画瓢来一个 script 的,将他添加到上面代码后面。注意别忘了第四行scriptExtractions = {}

text = text.replace(/<script\s*.*>[\s\S]*?<\/script>/gim, function (x) {  
    var hash = hashId();
    scriptExtractions[hash] = x;
    return '{gfm-js-extract-code-' + hash + '}';
}, 'm');        

保存后重启 Ghost,再编辑带==的内嵌js就不回出错了。