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

开始折腾

直接插入

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 没有成功……。

把 css 放到行内

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

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

使用 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
和 中都生成了很多’
‘标签。

所以要在 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 都是很不错的选择。

正文

菜鸟教程(runoob.com)
mini-vscode.html
<!-- HTML File -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Mini VSCode</title>
</head>
<body>
  <h1>Mini VSCode Widget</h1>
</body>
</html>
/* CSS file */
body {
  background: #1e1e1e;
  color: #d4d4d4;
}
// JS file
function helloWorld() {
  console.log("Hi VSCode!");
}