Blog Park markdown syntax extensions

Speaking from Markdown syntax analysis

Markdown as a very lightweight markup language, is very suitable for writing the blog. The syntax is very simple, usually some special character combinations to achieve specific syntax, such as a title, subheadings, illustrations, insert tables, and so on. There is a relationship between the syntax conversion and HTML, or maps. Which take on this conversion work is js script file, which is termed 解析.

After a review of relevant information that, at present, this Markdown for language, standard syntax is limited, so a lot of behind the development of extended syntax, but still very limited and not very good custom extended syntax (the tutorial is too complex, not suitable for novice), and I toss a long time, worked out a way to implement a custom syntax.

Custom Syntax

Here I customized the following syntax:

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

Which is to remove the url http:and the https:URL of this prefix.

Call after effect

Insert music

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

Insert Video

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

Implementation

Custom Markdown syntax to achieve the above functions, it is necessary to introduce corresponding js script and CSS styles

JS script

// 视频
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
    });
}

NOTE: The above script must be written js script file, called in the background, or some of the original label will be parsed into other web pages, or directly resolved gone.
Call as follows:

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

CSS Styles

/****视频*****/
#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%;
}

Outlook

In fact, based on the above implementation, follow-up can develop more of their own custom grammar, as I write, it is very convenient.