如何使用blogger/blogspot进行美化？
bil*_*lpg 56 javascript prettify shared-hosting blogger blogspot
我正在使用blogger.com来托管一些关于编程的文本,我想使用美化(与stackoverflow相同)来很好地为代码示例着色.
如何将美化脚本安装到博客域中？
在某处链接到共享副本会更好(如果确实可能)吗？
我在不同的域上有网站空间.那会有帮助吗？
非常感谢.
Tim*_*nen 60
当您在博客中创建新条目时,您可以选择在条目中使用HTML并编辑博客条目.
所以键入http://blogger.com,然后登录,然后发布>编辑帖子>编辑然后将其放在顶部:
<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/lang-css.min.js"></script>
<script type="text/javascript">
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
addLoadEvent(function() {
prettyPrint();
});
</script>
<style type="text/css">
/* Pretty printing styles. Used with prettify.js. */
.str { color: #080; }
.kwd { color: #008; }
.com { color: #800; }
.typ { color: #606; }
.lit { color: #066; }
.pun { color: #660; }
.pln { color: #000; }
.tag { color: #008; }
.atn { color: #606; }
.atv { color: #080; }
.dec { color: #606; }
pre.prettyprint { padding: 2px; border: 1px solid #888; }
@media print {
.str { color: #060; }
.kwd { color: #006; font-weight: bold; }
.com { color: #600; font-style: italic; }
.typ { color: #404; font-weight: bold; }
.lit { color: #044; }
.pun { color: #440; }
.pln { color: #000; }
.tag { color: #006; font-weight: bold; }
.atn { color: #404; }
.atv { color: #060; }
}
</style>
请注意,您不应该prettyPrint 直接使用它作为事件处理程序,它会使它混淆(有关详细信息,请参阅自述文件).这就是为什么我们传递addLoadEvent一个函数然后转身并调用prettyPrint.
在这种情况下,因为博客不允许我们链接到样式表,我们只是嵌入了prettify.css内容.
然后添加一个<code></code>标签或<pre></pre>类名为的标签"prettyprint",你甚至可以指定这样的语言"prettyprint lang-html"
所以它看起来像这样
<pre class="prettyprint lang-html">
<!-- your code here-->
</pre>
或者像这样
<code class="prettyprint lang-html">
<!-- your code here-->
</code>
您放入的代码需要从<和>清除其HTML才能执行此操作,只需将代码粘贴到此处:http://www.simplebits.com/cgi-bin/simplecode.pl
您可以将顶部代码放在HTML布局中,以便默认情况下将其包含在所有页面中(如果您愿意).
更新
现在您可以在博客中链接CSS文件,因此将其添加到<head>应该就足够了
<link href="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/lang-css.min.js"></script>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded',function() {
prettyPrint();
});
</script>
我选择不故意替换body onload事件,而是使用旧浏览器不支持的新DOMContentLoaded事件,如果你需要旧浏览器支持,你可以使用任何其他load事件来启动prettyPrint,例如jQuery的:
jQuery(function($){
prettyPrint();
});
或所谓最小domready中不断
和你完成:)
编辑:
正如Lim H在评论中指出的,如果您使用博客动态视图(ajax模板),那么您需要使用此处描述的方法来绑定自定义javascript:在页面加载时不会调用prettyPrint()
更新2017-06-04
使用https://github.com/google/code-prettify中的指南
基本上只是用这个:)
<script src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/run_prettify.min.js"></script>
<pre class="prettyprint"><code class="language-css">...</code></pre>
- 我实际上并没有尝试过它,但它看起来非常全面,我不得不接受它. (2认同)
SK9*_*SK9 41
以下为我立即工作.
- 转到Blogger>布局>编辑HTML
- 复制以下代码段并
<head>在"编辑模板"字段后立即将其粘贴:
片段:
<link href='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css' rel='stylesheet' type='text/css'/>
<script src='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js' type='text/javascript'></script>
- 后
</head>更换<body>同<body onload='prettyPrint()'> - 点击"保存模板"
- 转到Blogger>发布>新帖子
- 确保您通过单击"编辑HTML"来编辑HTML.在空场中尝试:
<pre class="prettyprint">int foo=0;
NSLog(@"%i", foo);
</pre>
- 请注意,如果您现在单击"预览",您将看到此代码仅为黑色.别担心(还).
- 单击"发布POST",然后单击"查看博客".你的代码应该被美化.
Bad*_*aro 15
如今,Google-Code-Prettify有一个Auto-Loader脚本.您可以通过一个URL加载JavaScript和CSS以进行美化.
将脚本添加到<head>Blogger模板的该部分,它将适用于您的所有帖子:
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
有关详细信息,请访问:http://code.google.com/p/google-code-prettify/wiki/GettingStarted
在博客中添加谷歌代码美化非常简单.
只需在标记之前在博客中包含以下javascript库.
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
就像下面的图片一样......
现在,您已成功在博客中添加了Google代码美化.
现在,如果你想在你的博客帖子中插入代码,然后添加代码(html,css,php等),然后在....标签之间插入该代码.
<pre class="prettyprint">...</pre>
要么
<code class="prettyprint">...</code>
另请参阅此文档,以便通过以下链接将此Google美化用品添加到博主.
如何使用Google Prettify为Blogger添加语法荧光笔
| 归档时间： |
|
| 查看次数： |
12226 次 |
| 最近记录： |