Lim*_* H. 16 javascript blogger google-code-prettify
我试图在Blogger中美化我的代码.我已将Google JS和CSS文件链接到我的模板.问题是我希望代码在页面加载时被美化,所以我prettyPrint();在模板上添加了页面加载事件.
<body onload="prettyPrint();">
此代码无法执行.但是,如果我在控制台中手动键入prettyPrint(),我的代码会正确地进行修饰.博客模板是否会手动调用JS函数？
编辑我通过在每个需要代码美化的帖子中手动调用函数来实现它(见下文).不过,我想知道为什么我不能在模板上做到这一点.
<pre class="prettyprint linenums lang-js">
function testCode(){
}
</pre>
// I have to do this in every post :-s
<script type="text/javascript">
prettyPrint();
</script>
编辑2的自述说,我不应该使用prettyPrint()直接作为处理器,但在封闭包裹它来代替.所以我添加了这个代码,类似于自述文件中的示例,<head>但是无济于事.
<script type='text/javascript'>
window.addEventListener('load', function (event) { prettyPrint() }, false);
</script>
要么
<script type='text/javascript'>
document.addEventListener('DOMContentLoaded',function() {
prettyPrint();
});
</script>
编辑3我的模板HTML只是默认的动态视图(经典)模板,如上所述添加了美化库.
编辑4这是一个演示问题的链接:http://testprettyprint.blogspot.com/2013/02/blog-post.html - 代码块没有自动美化但是如果你打开Chrome的控制台并输入prettyPrint()代码将正确突出显示.
编辑5之所以我认为这是我的问题而不是博主,因为这个人仍然使用相同的技术来修饰他的代码:http://errorbuster.blogspot.com/2012/07/prettify-syntax-highlighter-for-blogger.html
编辑6正如Jeffery To在他的回答中指出的那样,Dynamics View使用AJAX加载博客内容,因此在加载实际内容之前,任何对文档加载的JS调用都将被执行.因此,对实际博客内容而不是文档执行的任何JavaScript都是无效的.所以我想现在的问题是如何挂钩到动态查看ajax:complete事件,如果有这样的事情,但我怀疑有.谢谢所有回复的人.我不确定这是否可以算作一个bug,但我会向博客提出一个问题.
结论请阅读Jeffery To的答案.他发现事件要调用该函数.
Jef*_* To 18
我相信您的测试页面使用的是Blogger的"Ajax模板"(不确定官方名称是什么),而您发布的其他链接则使用的是经典模板.
如果您重新加载测试页,则会首先在页面中间看到Blogger徽标,然后会显示您的内容.如果您查看测试页面源,您将看到很多代码,但不会看到您的内容.我相信布局模板,Blogger的代码首先运行,然后使用Ajax获取您的内容.在将内容加载到页面之前,将运行在文档就绪(DOMContentLoaded)或窗口加载上运行的任何JavaScript代码.
我相信如果你向页面添加一个HTML/Javascript小部件(在内容块之后),然后prettyPrint()在该小部件中包含一个调用,每次显示一个帖子时都应该调用它.
更新:此模板的官方名称为"动态视图",动态视图似乎不支持HTML/JavaScript小部件.我找不到任何可以让你浏览Blogger的JavaScript的API,所以我相信答案(至少现在)是不可能添加模板级代码来做你想要的.最实用的方法是在每个帖子中包含一个script标签prettyPrint():-(
更新2:我已经通过Blogger的代码进行了跟踪,我认为我找到了一个合适的(可绑定的)事件.尝试在动态视图代码之后包含此内容(在head元素中,在<script src='//www.blogblog.com/dynamicviews/...'></script>标记之后):
<script>
$(window.blogger.ui()).on('viewitem', function (event, post, element) {
prettyPrint();
});
</script>
viewitem每次用户查看项目时都会触发该事件(这可能在页面的生命周期中多次发生).该element参数是该项目的容器元素的jQuery对象,所以如果你想节省prettyPrint()一点时间,你可以这样做:
<script>
$(window.blogger.ui()).on('viewitem', function (event, post, element) {
element.each(function () {
// first argument is a callback function
// second argument is a root element or document to check
prettyPrint(null, this);
});
});
</script>
| 归档时间： |
|
| 查看次数： |
5054 次 |
| 最近记录： |