wordpress解决Prism.js对无刷新 pjax的支持!
刚给网站添加了一个免插件实现代码高亮的功能,用的是一个非常轻量级的代码高亮JS库:prism.js ,使用起来非常简单,引入一个CSS和一个JS文件即可,但在使用过程中发现一个小问题,Prism.js在静态页面时代码高亮效果正常没有任何问题,但是需要高亮的代码一旦通过Ajax异步请求获得时,就会出现脚本和样式丢失的问题,各种调试都没法解决,无奈还是请教万能的google,终于找到一个能解决问题的方法,于是便搬运了过来。
附上原文地址:http://schier.co/blog/2013/01/07/how-to-re-run-prismjs-on-ajax-content.html
你只需要在Ajax请求完成时执行highlightAll()
函数,可在下面两种方法中选任意一种;
以下分享找到的方法:
方法一:
// Rerun Prism syntax highlighting on the current page
Prism.highlightAll();
由于第一种方法Prism.js需要重新查找新增的DOM节点内容,资源占用相对要高,所以你也可以用第二种方法:
方法二:
// Say you have a code block like this
/**
<pre>
<code class="language-javascript line-numbers">
// This is some random code
var foo = "bar"
</code >
</pre >
**/
// Be sure to select the inner and not the
// Using plain Javascript
var block = document.getElementById('some-code')
Prism.highlightElement(block);
// Using JQuery
Prism.highlightElement($('#some-code')[0]);
OK搞定,就这么简单。
不行啊,我跟你是这个主题,所有success中都加入了Prism.highlightAll();还是不行,得重新加载整个页面。求助
哎呀看来还是不适合我这样的,还是同样错误
Parse error: syntax error, unexpected end of file in /functions.php on line 157
The site is experiencing technical difficulties.
这个实际怎么使用 添加到哪里呢?
添加到function里面
把以上代码添加到主题function里面 直接显示错误
我把我的function贴给你参考
//prism 代码高亮
function add_Prism() {
wp_enqueue_style( ‘PrismCSS’, get_stylesheet_directory_uri() . ‘/plugins/prism/prism.css’, array() );
wp_enqueue_script( ‘PrismJS’, get_stylesheet_directory_uri() . ‘/plugins/prism/prism.js’, array() );
}
wp_enqueue_style(‘prismCSS’);
wp_enqueue_script(‘prismJS’);
add_action(‘wp_enqueue_scripts’, ‘add_Prism’);
//解决Prism.js对无刷新 pjax的支持
function Panda_Prism(){
?>
Prism.highlightAll();