typecho文章设置字体颜色，及更多玩法

很早就有人询问过，在typecho这种Markdown编辑器下，文字的颜色该怎样定义，而且就像我初次接触typecho的时候，也觉得它的编辑器实在是太不友好，因为功能太简单了。结果用了这么久，才觉得，简单才是最优雅的策略，至少帮助我成功的专注于文字，舍弃了各种花哨的东西。不过在有的时候，花哨还是必要的。
这篇文章不止是说明文字颜色和样式的定义，还包括了Markdown代码嵌入的标签可以做到的全部实用功能，而且我从来都觉得，typecho在功能上，不逊色其它任何的内容管理程序。

你比如像这段基佬紫的颜色，是不是充满了视觉压迫力？我甚至还可以让它变绿，再粗壮一点!

又或者是，像下面这个黑家伙一样，带点黄。

上面那些效果，实现起来特别简单，如果是用过typecho的老手，基本都可以猜到，这就是Markdown支持html代码嵌入的标签实现的。具体的代码如下，为了防止被解析，我加上了@符号，实际使用可以去掉。

紫色文字：

@!!!
<font color="#a416af">你比如像这段基佬紫的颜色，是不是充满了视觉压迫力？</font>
@!!!

绿色加粗文字：

@!!!
<font color="#117113" style="font-weight:600;">我甚至还可以让它变绿，再粗壮一点!</font>
@!!!

黑中带黄区块：

@!!!
<div style="width:100px;height:100px;background:#000;text-align:center;line-height:100px;">
<p><font color="#e6de22">黄</font></p>
</div>
@!!!

只要懂点html加css，什么花样都可以变出来，当然我们不可能把typecho的文章发布变成什么代码编辑器，上述的案例就是为了实现一些重要信息的标注，或者是一些前端教程案例的具体实现。其实代码嵌入标签的玩法不局限于此，比如外部音乐，视频嵌套播放代码，一些需要让它生效的js和css远程文件，都可以通过这个标签来让它在页面生效。
那么还可以继续玩一下。
加个bilibili的鸡你太美(我用js处理了一下自适应，都可以按照我的格式进行视频插入)：

代码是啥呢？其实不算太复杂：

@!!!
<script>
$(function () {
var iw = $(".iframe-box").width();
var ih = iw*0.7;
$(".iframe-box").height(ih);
});
</script>
<iframe src="//player.bilibili.com/player.html?aid=47992618&cid=84068462&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" width="100%" class="iframe-box"> </iframe>
@!!!

以上代码我插入了一个完整的视频外部嵌套，通过js处理自适应的效果，比如把高度计算为宽度的70%。那个js可以写在网站的全局js里面，这样所有的外部引入视频都可以在后面加上width="100%" class="iframe-box"让它直接生效，当然，尽量还是得避免css冲突。

再来个网易云音乐的鸡你太美：

这种比较简单，官网生成的代码已经定义好的宽高，而且本身就比较小的缘故，在手机上也不是什么大问题，代码如下。

@!!!
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=1361144868&auto=0&height=66"></iframe>
@!!!

以上就是通过Markdown代码嵌入的标签实现的基本玩法，更多牛逼的操作我太懒不想写了，要是花点时间都可以把typecho变成菜鸟教程那种代码执行，或者就是各种统计图啊，表单之类的呈现，那样的就以后再说吧。其实我写完的时候，因为博客是typecho1.1的稳定版本，没有直接页面预览的功能，我并不知道自己的代码是否会成功（滑稽）。
结尾丢个妖王镇场！

规则之树版权所有，转载请注明来源，标明作者及原文链接