0.原生Markdown实现注音的方式

原生的Markdown没有注音语法，如果想在Markdown中实现注音的话只能借助HTML的<ruby>标签。

1	<ruby>被注音文字<rt>注音内容</rt></ruby>

实现效果如下：

被注音文字注音内容

但是这种表示方式不仅麻烦，也不符合Markdown“所见即所得”的风格。所以下面借由JavaScript来实现Markdown风格的注音语法。

1.定义注音语法格式

可以模仿Markdown的超链接语法定义注音语法如下：

1	\{被注音文字\}\(注音内容\)

2.JavaScript模拟语法实现

语法定义好了，下面只需要通过JavaScript来规定从语法到最终显示结果（HTML）之间的正则表达匹配与映射就可以了。

function markdownRubyExtension(str) {
    return str.replace(/\{([^{}()]+)\}\(([^{}()]+)\)/g, function(match, $1, $2) {
        return '<ruby>' + $1 + '<rt>' + $2 + '</rt></ruby>'
    });
}

其中str用于指定需要执行语法映射的文字，此处对所有正文适用。

let posts = document.getElementsByClassName('post-content');

for(let post of posts) {
  post.innerHTML = markdownRubyExtension(post.innerHTML);
}

3.结果示例

{吃}(chī){葡萄}(pú táo){不}(bù){吐}(tǔ){葡萄}(pú táo){皮}(pí)，{不}(bù){吃}(chī){葡萄}(pú táo){倒}(dào){吐}(tǔ){葡萄}(pú táo){皮}(pí)。（Markdown原文）

{東京}(とうきょう){特許}(とっきょ){許可}(きょか){局長}(きょくちょう){今日}(きょう){急遽}(きゅうきょ){休暇}(きゅうか){許可}(きょか){拒否}(きょひ)。（Markdown原文）

간장 {공장}(工場) {공장장}(工場長)은 {강}(薑) {공장장}(工場長)이고 된장 {공장}(工場) {공장장}(工場長)은 {장}(張) {공장장}(工場長)이다.（Markdown原文）

Links:

JavaScript实现Markdown风格注音语法

Contents

0.原生Markdown实现注音的方式

1.定义注音语法格式

2.JavaScript模拟语法实现

3.结果示例