hexo的md文件中使用html、css、javascript

发表于 分类于 阅读次数： 本文字数： 1.5k 阅读时长 ≈ 1 分钟
默认

有时候想写点前端小demo，因为代码量实在是太少了，几行css、几行javascript；不想放在codepen作为引用，也不想单独做一个页面放到主题的source文件夹下，于是就有了在md文件里直接写的想法。

开始折腾

1、直接插入

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# 正文
<style>
.styled-div{
	width: 100px;
	height: 100px;
	background: yellow;
}
</style>
<div class="styled-div">我是div</div>
<script>
	(function(){
		console.log('我是md是的javascript');
	})();
</script>

我是div

html和javascript成功了，但是style没有成功……。

2、把css放到行内

1
2
# 正文
<div style="width: 100px;height: 100px;background: yellow;"></div>

我是div

样式放在行内是可以的。怎么让放在style里的样式也有效呢？

3、使用raw:

1
2
3
4
5
6
7
8
9
10
11
# 正文
{% raw %}
<style>
.styled-div1{
	width: 100px;
	height: 100px;
	background: yellow;
}
</style>
<div class="styled-div-other">我是div</div>
{% endraw %}

我是div

style里的样式有效了

结论

html，js，css 都应该写在raw标签里。

方法一、二中，好像是直接在md里写html和javascript都行，但当这篇文章写到第三种方法的时候，js报错了，并且页面布局也有点乱。用web开发都工具看了下，<div class="styled-div">我是div</div>和<script></script>中都生成了很多’
‘标签。

所以要在md中杂点其它东西。放在raw标签里才是正确的：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# 正文
{% raw %}
<style>
.styled-div-right{
	width: 100px;
	height: 100px;
	background: yellow;
}
</style>
<div class="styled-div-right">我是div</div>
<script>
	(function(){
		console.log('我才是正确的md里的javascript');
	})();
</script>
{% endraw %}

我是正确的

补充

在markdown里写html的东西有点不合理，取决于各自吧。介绍下另外两种方式：

  • 在source文件下创建单独html页面
  • 内嵌第三方的演示平台代码，jsfiddle、codepen都是很不错的选择。