从Markdown语法解析说起

Markdown作为一种非常轻便的标记语言，非常适合博客的写作。其语法十分简单，一般都是一些特殊的字符组合来实现特定的语法，比如一级标题、二级标题，插图、插表等等。这些语法和HTML之间存在一种转换关系，或者说映射。其中担当这个转化工作的就是 js 脚本文件，其术语称之为解析 。

查阅相关资料后得知，目前来说，对于Markdown这门语言，标准语法很有限，所以后面不断发展出了许多扩展语法，但是仍然十分有限，并且不太好自定义扩展语法（教程太复杂，不适合新手），为此我折腾了许久，摸索出了自定义语法的实现方式。

自定义语法

在这里我自己自定义了如下语法：

{video}(//player.bilibili.com/player.html?aid=54874176&cid=95969626&page=1)插入视频
{music}(//music.163.com/outchain/player?type=2&id=32102187&auto=0) 插入网易云音乐

其中url是去除 http: 和 https: 这样的前缀后的网址。

调用后效果

插入音乐

{music}(//music.163.com/outchain/player?type=2&id=32102187&auto=0)

插入视频

{video}(//player.bilibili.com/player.html?aid=54874176&cid=95969626&page=1)

实现方法

实现上述自定义Markdown语法功能，需要引入js脚本和对应的CSS样式

JS脚本

var d = document;
var html = d.getElementById('cnblogs_post_body').innerHTML;
html = md2video(html);
html = md2music(html);
d.getElementById('cnblogs_post_body').innerHTML = html;function md2video(str) {var video_str1 = '<div class="video"><iframe src="';var video_str2 ='" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe></div>';return str.replace(/\<p\>\{video\}\(([^{}()]+)\)\<\/p\>/g, function(match, $1) {return video_str1 + $1 + video_str2});
}function md2music(str) {var music_str1 = '<div class="music"><iframe src="';var music_str2 ='" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe></div>';return str.replace(/\<p\>\{music\}\(([^{}()]+)\)\<\/p\>/g, function(match, $1) {return music_str1 + $1 + music_str2});
}

注意：上面的脚本一定要写成js脚本文件，在后台调用，否则有些标签会被原来的网页解析成其他的，或者直接解析没了。
调用方法如下：

<!-- 自定义渲染语法-->
<script src="https://blog-static.cnblogs.com/files/gshang/mymd4.js"></script>

CSS样式

/****视频*****/
#cnblogs_post_body .video {height: 0;padding-bottom: 56.25%;/* 16:9 */position: relative;width: 100%;
}#cnblogs_post_body .video iframe {position: absolute;left: 0;top: 0;width: 100%;height: 100%;
}/****音乐*****/
#cnblogs_post_body .music {height: 140px;/*padding-bottom: 14.39%;*//* 16:9 */position: relative;width: 100%;
}#cnblogs_post_body .music iframe {position: absolute;left: 0;top: 0;width: 100%;height: 100%;
}

展望

其实基于上面的实现过程，后续可以自行开发出更多的自定义语法，这样写作时，就非常方便了。