Hexo嵌入codepen代码

先看效果

方式一

  • 直接在markdown文章中插入codepen的HTML代码
  1. 在codepen中新建pen
  2. 保存后生成一个URL地址
  3. 点击页面右下角的Embed按钮
  4. 选择iframe插入方式
  5. 复制代码插入markdown文章中即可

方式二

各位以下内容别看了,hexo插件市场已有codepen的插件了,(自己研究写完文章才发现, ¯_(ツ)_/¯ )
插件市场:https://hexo.io/plugins/
插件地址:https://github.com/maliMirkec/hexo-tag-codepen

  1. 定义一个语法:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    [code]url height themeId defaultTab result[pen]

    以[code]开始
    以[pen]开始

    中间为自定义属性,以空格分割
    url: codepen 的pen公开地址
    height: 高度
    themeId: 主题
    defaultTab: 默认显示的代码块
    result: 是否显示渲染结果
字段 限定值 默认值 空值 示例 备注
url //codepen.io/用户名/embed/penID null //codepen.io/mecono/embed/PMyxLm codepen 的pen公开地址
height > 0 265 null 265 高度,不要太大
themeId 0或dark或light dark null dark 主题
defaultTab html或css或js js null js 默认显示代码块
result result或 result null result 是否显示渲染结果
  1. 自定义语法处理

    还是codeblock.js,参阅Hexo添加在线运行html/css/js代码插件-添加运行代码的按钮

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79

...
...
...


/**
* 判断变量是否为 null undefined
* @param data
* @returns {*|boolean}
*/
function isNull(data) {
if (data === undefined) {
return true;
}
if (data === null) {
return true;
}
if (data === "") {
return true;
}
return data === "null";

}

/**
* 判断变量是否为 null undefined
* 如果为null undefined,则返回空字符串,
* 如果不为null undefined,返回原值,
* 一般用于判断字符串
* @param data
* @returns {string}
*/
function isNullStr(data,defaultValue) {
return isNull(data) ? defaultValue : data;
}

// hexo 渲染引擎 https://hexo.io/zh-cn/api/renderer
hexo.extend.filter.register('after_post_render', function (data) {

while (/<figure class="highlight ([a-zA-Z]+)">.*?<\/figure>/.test(data.content)) {
data.content = data.content.replace(/<figure class="highlight ([a-zA-Z]+)">.*?<\/figure>/, function () {
...
...
...
...
})
}

//处理codepen
while (/<p>\[code\]\S.*\[pen\]<\/p>/.test(data.content)) {
data.content = data.content.replace(/<p>\[code\]\S.*\[pen\]<\/p>/, function () {
//匹配的字符串
var lastMatch = RegExp.lastMatch
//去除标识符
var codepenInfos = lastMatch.replace("<p>[code]","").replace("[pen]</p>","").split(" ");

if (codepenInfos.length >= 1) {
//地址
var url = isNullStr(codepenInfos[0],"")
//高度 默认265
var height = isNullStr(codepenInfos[1],265)
//主题 默认黑色
var themeId = isNullStr(codepenInfos[2],'dark')
//html css js 默认显示js
var defaultTab = isNullStr(codepenInfos[3],'js')
//是否显示渲染结果
var result = isNullStr(codepenInfos[4],'result')

return '<iframe height='+height+' style="width: 100%;" scrolling="no" src="'+url+'/?height='+height+'&theme-id='+themeId+'&default-tab='+defaultTab+','+result+'" frameborder="no" allowtransparency="true" allowfullscreen="true"></iframe>';
}

return lastMatch;

})
}

return data
})

使用示例

  1. 最简单方式,只传url
1
[code]//codepen.io/mecono/embed/MNPdme[pen]
  1. 自定义高度 height:150, 且默认显示html
1
[code]//codepen.io/mecono/embed/QeZRMw 150 null html[pen]
--- 青山不改 绿水长流,日后江湖相见,自当杯酒言欢,咱们就此别过。---

本文标题:Hexo嵌入codepen代码

文章作者:mecono

发布时间:2019年08月12日 - 09:08

最后更新:2019年12月19日 - 09:12

原始链接:https://mecono.cn/4053656815.html

版权声明:本博客所有文章除特别声明外,均采用 BY-NC-ND 4.0许可协议。转载请注明出处!