wordpress解决Prism.js对无刷新 pjax的支持!

code

刚给网站添加了一个免插件实现代码高亮的功能,用的是一个非常轻量级的代码高亮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搞定,就这么简单。

You may also like...

7 回复

  1. 达摩剑客说道:

    不行啊,我跟你是这个主题,所有success中都加入了Prism.highlightAll();还是不行,得重新加载整个页面。求助

  2. linoh说道:

    哎呀看来还是不适合我这样的,还是同样错误
    Parse error: syntax error, unexpected end of file in /functions.php on line 157
    The site is experiencing technical difficulties.

  3. linoh说道:

    这个实际怎么使用 添加到哪里呢?

    • 夜猫说道:

      添加到function里面

      • linoh说道:

        把以上代码添加到主题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();

  1. 2016年9月2日

    […] 关于ajax主题与Prism.js的兼容问题,请阅读《解决Prism.js对无刷新 pjax的支持!》 […]

发表评论

电子邮件地址不会被公开。 必填项已用*标注