在 Blogger 文章中加入程序代码框

写了两篇Blogger教学，觉得写代码没有代码框实在不行。我开始对此很头痛，只能直接将文本代码转换html代码，然后贴上。现在弄明白了，其实很简单，就是要先在模板中加入一段CSS代码。

第一步：进入到 控制台－模板－修改HTML ，不用打勾“扩展窗口小部件模板”。在模板内容里找到下面这段代码，你可以通过按Ctrl+F搜索“skin”两次找到 ]]></b:skin></head>

然后将以下的代码段拷贝加到上面代码的前面，就是那两个中括号前面。

CODE {
display: block; /* fixes a strange ie margin bug */
font-family: Courier New;
font-size: 8pt;
color:#33f;
overflow:auto;
background: #f0f0f0 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjifY7K7FAZpkglc1vaminDZM7cI_bquySV6sJJOa_lgfX1qTihNYGq68Yn5n4es3qqzve8YmcSsKc0v0X8XuJ80fGWkrVMm2BlDe6B6O1pZqH1hfcaQzNz-OhZXIR0EdpZY9WQ5nuWrfE/) left top repeat-y;
border: 1px solid #ccc;
padding: 10px 10px 10px 21px;
max-height:200px;
line-height: 1.2em;
}

第二步：在Html模式下，把文章中将要引用的代码前后分别用《code》和《/code》 包起来，这样就可以显示成代码框了。

注：请用HTML转换工具来转换您的代码，然后才将代码贴在Blogger里。不然< >里头的内容就会被Blogger的编辑器当成代码执行而不显示。