【翻译】如何在AJAX生成的内容中再次运行Prism.js

一、前言

最近用一个十分轻量级的网页代码高亮Js库,应用到项目中发现了一个问题,对于静态的已经写好的代码,Prism的高亮插件是没有问题的,但是通过Ajax异步获取数据并修改DOM时发现,Prism高亮插件失效了,经过各种调试还是没办法解决,最后终于找到了解决办法。原文是英文版的,我做了简要的翻译,如有不妥之处还请指出。
以下是原文地址:
http://schier.co/blog/2013/01/07/how-to-re-run-prismjs-on-ajax-content.html

原标题:How To Re-Run Prism.js On AJAX Content

二、译文

Prism.js is a great library to handle syntax highlighting for code blocks on a web page. However, since Prism runs automatically after being embedded (hence why you need to include it at the bottom of the HTML) content that is loaded later is not highlighted. After console logging the Prism object in Chrome developer tools I discovered a method called highlightAll() which can be used to force Prism to rerun on the current page.

Prism.js 是一个非常不错的用于处理网页中代码块的JavaScript库。然而,Prism.js嵌入网页后,你会发现通过AJAX后加载的内容并没有实现高亮。在我通过Chrome开发工具调试Prism时发现一个名为highlightAll()的方法,通过这个方法可以强制Prism再次在当前页面运行,并为通过AJAX后加载的内容添加高亮效果。

// Rerun Prism syntax highlighting on the current page
Prism.highlightAll();

If you don‘t want Prism rescanning the entire DOM you can selectively highlight elements with the highlightElement() function.

如果你不想让Prism再次查找新增的DOM节点内容,你可以使用highlightElement()函数来指定需要高亮的DOM节点内容。

// Say you have a code block like this
/**
  <pre>
    <code id="some-code" class="language-javascript">
      // This is some random code
      var foo = "bar"
    </code>
  </pre>
*/

// Be sure to select the inner <code> and not the <pre>
// Using plain Javascript
var block = document.getElementById(‘some-code‘)
Prism.highlightElement(block);

// Using JQuery
Prism.highlightElement($(‘#some-code‘)[0]);

It‘s as simple as that! I‘m not sure why Prism doesn‘t include this tip on the website.

就是这么简单,但是我不知道为什么在Prism主页上没有关于这个贴士的说明。

Edit: The Prism guys tweeted me a link to the documentation on this: prismjs.com/extending.html#api

Prism的开发人员给了我一个如下地址的文档声明:prismjs.com/extending.html#api

官方地址:http://prismjs.com/

最后,附一张效果图:

作者:湫楓 謃箜

博客地址:http://www.cnblogs.com/xhb-bky-blog/p/4809295.html

声明:本博客原创文字只代表本人工作中在某一时间内总结的观点或结论,与本人所在单位没有直接利益关系。非商业,未授权贴子请以现状保留,转载时必须保留此段声明,且在文章页面明显位置给出原文连接。

时间: 2024-10-10 14:53:17

【翻译】如何在AJAX生成的内容中再次运行Prism.js的相关文章

如何在AJAX的毁掉函数中传递JSON数据?如何在控制器中接受并转换成数组?

首先,我们经过测试(或者你平时的开发经验)知道,在AJAX的回调函数中使用get或者post方式可以传递字符串(不信可以自己去写实例测试,不过要注意:get方式有数据量的限制): 方法一:我们将ajax的请求放回的JSON数组转换成字符串,然后在回调函数中get过去: a.html页面的AJAX请求代码: b.后台两个处理函数(尤其注意第二个是回调函数指向的处理函数): 方法二:我们在回调函数中直接处理发送一个新的AJAX请求(也可以写成匿名函数),将ajax请回来的JSON数组转化为字符串作为

如何在PDF文档内容中插入/添加图片文件

现在很多人都会使用PDF格式文件,但是却很少会有人知道怎么编辑这种文件,我们所见的PDF格式文档是一种及其特殊的文件,这种文不论是修改还是编辑都非常的困难,因此,如果我们需要在PDF文件中插入图片的话该怎么做呢?今天小编就来为大家详细的介绍下如何使用专业软件在PDF文件中插入图片! 需要使用的软件是迅捷PDF编辑器,是一款专业的PDF编辑软件,下载很简单,只要在浏览器上搜索到迅捷PDF编辑器是官方网站,点击软件下载后选择下路径就可以了.安装运行也极为简单,还要按照提示点击下一步就可以了,在官网下

翻译:JVM虚拟机规范1.7中的运行时常量池部分(三)

4.4.7. The CONSTANT_Utf8_info Structure The CONSTANT_Utf8_info structure is used to represent constant string values: 代表常量字符串. The items of the CONSTANT_Utf8_info structure are as follows: 条目如下: tag The tag item of the CONSTANT_Utf8_info structure ha

如何在ASP.NET Web站点中统一页面布局[Creating a Consistent Layout in ASP.NET Web Pages(Razor) Sites]

如何在ASP.NET Web站点中统一页面布局[Creating a Consistent Layout in ASP.NET Web Pages(Razor) Sites] 一.布局页面介绍[About Layout Pages] 很多网站有些内容需要显示在各个页面中,比如Header,Footer或者告诉用户已经登录的部分.ASP.NET允许你创建一个单独的文件来包含文本.标签和代码的内容块,从而搭建一个风格整齐的网站.接下来你就可以将这个内容块插入到任何你想要让它展示的页面中.采用这种方法

执行AJAX返回HTML片段中的JavaScript脚本

如果AJAX加载的数据是一个HTML片段,而且这个HTML片段还包含脚 本<script>块,那么在你把这数据xmlHttp.responseText用innerHTML方法插入到当前文档一个元素中,你会 发现AJAX加载回来的脚本根本没有执行.这是AJAX开发中很常见的问题,如果你不是一直在用JavaScript框架做开发,相信你早就发现这个问题 了.本文分析了两个解决办法,其中一个是讲解jQuery框架的实现. 一. 问题描述 下面举个简单的例子,演示问题所在.在下面的例子中,假设变量re

[搬运自我的CSDN博客] python抓取javascript动态生成HTML内容的实践

<注:CSDN博客在美国访问特别卡,所以转移到cnblogs来发文章> 本实验在Ubuntu14.04上完成.使用的浏览器是火狐(Firefox 33.0),python版本是2.7.6. 大家都知道用urllib配合正则表达式抓取静态HTML的内容很方便,但是如果网页中有javascript动态生成的内容,urllib就无能为力了. 此时我们要借助一个额外的工具:selenium.它的工作原理是操纵(火狐)浏览器浏览目标网页,等待网页中的javascript全部执行完毕后再对HTML源码进行

MFC 修改默认生成文件和默认生成工程内容

修改默认生成文件和默认生成工程的内容是非常非常实用的!因为这样我们就不用每次新建一个工程都去做以前做过的一些工作,譬如用到OpenCV就要去包含它的头文件等等,当然在.h文件中默认直接加上作者.公司的描述也会显得更方便,方法如下: 首先是修改.h和.cpp文件的默认生成内容(即添加新建项时文件将会自带你添加的内容,而不是空白一片),这个问题关键在于找到其模板文件路径,本人的路径是"C:\Program Files (x86)\Microsoft Visual Studio 12.0\VC\vcp

JS批量替换内容中关键词为超链接,避开已存在的链接和alt、title中的关键词

懂点seo的人都知道要给内容中关键词加上链接,形成站内锚文本链接,这对seo有很大的帮助. 思路就是在数据库中录入若干个关键词和关键词对应的链接,当然链接可以根据关键词的id自动生成,或者直接用关键词作为链接参数,如?tag=1.?kw=关键词. 这个问题不是简单的一个批量replace那么简单,要考虑到已经存在的超链接,不能将里面的文字再次替换为超链接,还有就是图片的alt属性,或者其他标签的title属性,里面的文字也不该被替换. 见下面的HTML代码: [<a href="http:

AJAX 怎样在一个UpDatePanel中刷新另一个updatePanel

原文:AJAX 怎样在一个UpDatePanel中刷新另一个updatePanel 在页面上(.aspx)<asp:UpdatePanel ID="MyID1" runat="server" ChildrenAsTriggers="False" UpdateMode="Conditional"><ContentTemplate>          //html内容</ContentTemplate