前言

最近用一个十分轻量级的网页代码高亮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

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

 

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

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

    本篇为JVM虚拟机规范1.7中的运行时常量池部分系列的第二篇. 4.4.4. The CONSTANT_Integer_info and CONSTANT_Float_info Structures ...

  2. 在Window IIS中安装运行node.js应用—你疯了吗

    [原文发表地址]Installing and Running node.js applications within IIS on Windows - Are you mad? [原文发表时间]201 ...

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

    4.4.7. The CONSTANT_Utf8_info Structure The CONSTANT_Utf8_info structure is used to represent consta ...

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

    原文链接: https://docs.oracle.com/javase/specs/jvms/se8/html/jvms-4.html#jvms-4.4 Java Virtual Machine i ...

  5. 如何在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] 一.布局页面介绍[Abo ...

  6. [翻译] 如何在 ASP.Net Core 中使用 Consul 来存储配置

    [翻译] 如何在 ASP.Net Core 中使用 Consul 来存储配置 原文: USING CONSUL FOR STORING THE CONFIGURATION IN ASP.NET COR ...

  7. Android : 如何在WebView显示的页面中查找内容

    Android : 如何在WebView显示的页面中查找内容 Author : Aoyousatuo Zhao http://blog.sina.com.cn/aoyousatuo WebView是A ...

  8. 如何在 messager/alert/confirm等消息提示框中 获取 / 设置 嵌入 html内容中的 input[type=checkbox]等的选中状态?

    总结, 有3点: 不能/不要 在 这些消息框 / 提示框/ 对话框中的 回调函数中去写代码: 获取嵌入 内容中input.checkbox的选中状态, 因为 虽然在这些框存在的时候, 这个 check ...

  9. MVC3学习:利用jquery+ajax生成二维码(支持中文)

    二维码越来越热火了,做电子商务网站,不做二维码,你就OUT了. 一.下载DLL文件(ThoughtWorks.QRCode.dll),并在项目中引用.点此下载 如果你还不知道什么是QRCode二维码, ...

随机推荐

  1. ArcGIS Engine开发前基础知识(4)

    ArcGIS不同开发方式的比较 关于GIS应用软件的开发,通常有三种方式:C/S架构.网络GIS和移动GIS.ArcGIS平台提供了对三种开发方式的支持,对于采用从C/S架构的大多数开发者来讲,首先想 ...

  2. ArrayList、Vector、LinkedList的区别联系?

    1.ArrayList.Vector.LinkedList类都是java.util包中,均为可伸缩数组. 2.ArrayList和Vector底层都是数组实现的,所以,索引数据快,删除.插入数据慢. ...

  3. CentOS6.x生产环境下一键安装mono+jexus的脚本,自启动,带服务,版本号自控

    转自: http://linuxdot.net/bbsfile-3784 1.支持哪些个平台?答:暂时仅支持CentOS6.x平台,7.x未测试,欢迎测试并到群里反馈给我(昵称:无聊人士) 2.一键安 ...

  4. Oracle的SQL基础

    1.了解SQL的种类 (1)DDL 数据定义语言:定义数据库中数据要如何存储的,包括对数据库对象的创建(create)修改(alter)删除(drop)的操作,这些对象主要有数据库,数据表,视图,索引 ...

  5. 运维之网络安全抓包—— WireShark 和 tcpdump

    ------------------------------------------------本文章只解释抓包工具的捕获器和过滤器的说明,以及简单使用,应付日常而已----------------- ...

  6. Oracle分区索引

    索引与表类似,也可以分区: 分区索引分为两类: Locally partitioned index(局部分区索引) Globally partitioned index(全局分区索引) 下面就来详细解 ...

  7. qt中ui的 使用介绍

    1.什么是ui?ui通常是用Qt 设计师设计出来的界面文件的后缀.通常情况下ui是一个指向这个界面类的指针.ui-> 一般就是用来访问这个界面类里面的控件.例如你的ui文件里有一个叫okButt ...

  8. 【推荐】CentOS安装PHP-5.6.4+扩展安装+安全配置+性能配置

    注:以下所有操作均在CentOS 6.5 x86_64位系统下完成. #准备工作# 前段时间PHP官方发布了一个重要的安全升级公告,修复了两个unserialize函数的严重漏洞,目前受影响的版本有: ...

  9. [转]Asp.Net Core 简单的使用加密的Cookie保存用户状态

    本文转自:http://www.cnblogs.com/Joes/p/6023820.html 在以前的Asp.Net中可以用 FormsAuthentication 类的一系列方法来使用加密的Coo ...

  10. [No0000A5]批处理常用命令大全

    1.Echo 命令打开回显或关闭请求回显功能,或显示消息.如果没有任何参数,echo 命令将显示当前回显设置.语法echo [{on|off}] [message]Sample: echo off e ...