博客园markdown语法扩展

分手后的思念是犯贱 2023-08-17 16:12 125阅读 0赞

![coded28868a308312a26.png][]

## 从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脚本 ###

注意：上面的脚本一定要写成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%; }

## 展望 ##

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

转载于:https://www.cnblogs.com/gshang/p/11505646.html

[coded28868a308312a26.png]: https://www.kanjiantu.com/images/2019/07/05/coded28868a308312a26.png