Site Network: Home | Blog'1998-2002 | Blog' 2005-2010 | MANAGE

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> lang="en" xml:lang="en">

1 原模板总是出现不了引用的那个框,今天搜了下运气很好,就找到了解决办法。

2 这是原文地址。

内容如下:

新手遇到的难题,我开始也对此很头痛,直接拷贝别人的代码框却不成功。现在弄明白了,其实很简单,就是先要在你的模板中加入一个CSS代码。
Step1:进入到 控制台-模板-修改HTML ,“扩展窗口小部件模板” 前不用打勾。在模板内容里找到下面这段代码,你可以通过按Ctrl+F搜索“skin”两次找到
]]></b:skin>
</head>


然后将下面的代码段拷贝加到上面代码的前面,就是那两个中括号前面
CODE {
display: block; * fixes a strange ie margin bug *
font-family: Courier New;
font-size: 8pt;
overflow:auto;
background: #f0f0f0 url(
) left top repeat-y;
border: 1px solid #ccc;
padding: 10px 10px 10px 21px;
max-height:200px;
line-height: 1.2em;
}
Step2:在Html模式下,把文章中将要引用的代码前后分别用<code> 和 </code> 包起来,这样就可以显示成代码框了。


需要注意的是如果引用的程序中含有<> 括号,要把"<"用“<”代替,“>”用">"代替,不然<>的内容就会被Blogger的编辑器当成代码执行而不显示。


提问者评价


太谢谢了,找了很久,现在终于明白了!追加50分


通过细看,我发现引用的图片可以自己设计。于是我修改了它原来引用的部分,改成我自己设计的。


3 我修改的部分是:

3.1 改code

把code改成pre,因为我使用的org-mode中的<e按tab键生成的example,前缀是pre

3.2 改下拉框

overflow:auto;
overflow-x:hidden;

3.3 改折行

折行原没有。改成
white-space:normal;

3.4 改框最高高度

原框限定了最高高度为200相素,放到无限,就不会有侧连下拉框了。所以注释掉这句:
*这句去了就无限向下延伸,不用有边条了。max-height:200px;*

3.5 对原quote引用的修改

修改原引用的定义,加上背景颜色和边框,也达到这个效果。
不过背景图也是改成我自己为此颜色设的了。


blockquote{margin:20px 0;padding:0 20px 0 21px;background: #f0f0f0 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjs3fc6fkJ3b1JjxeUUs7QESJIfbpTCILXQDg6OrXmA_L3kgF39hddPbel4_qzxIWsGgw0vkMJpD05LMpokH7yT7jtDUfxf-GSfk4dj35VqAsl1GFC9HUSl5yyXPfYFh8MrKAg2/s2560/Code_BG.gif') left top no-repeat;border: 1px solid #ccc;}








Author: yefeiyu


Date: 2013-08-16 18:45:07


HTML generated by org-mode TAG=7.01g in emacs 24





0 Comments:

Post a Comment