博客园markdown语法扩展

Posted 2022-10-14 gshang

从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 video_str1 = '<div class="video"><iframe src="';
var video_str2 = '" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe></div>';
// 音乐
var music_str1 = '<div class="music"><iframe src="';
var music_str2 = '" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe></div>';


function mymd() 
    // 视频语法：video(不带http:或https:的链接)
    document.body.innerHTML = document.body.innerHTML.replace(/\<p\>\video\\(([^()]+)\)\<\/p\>/g, function(match, $1) 
        return video_str1 + $1 + video_str2
    );
    // 音乐语法：music(不带http:或https:的链接)
    document.body.innerHTML = document.body.innerHTML.replace(/\<p\>\music\\(([^()]+)\)\<\/p\>/g, function(match, $1) 
        return music_str1 + $1 + music_str2
    );

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

<!-- 自定义渲染语法-->
<script src="https://gitee.com/j-x/home/raw/master/md.js"> </script>
<script> mymd() </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%;

展望

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