代码高亮插件prettyPrint.js使用与下载

最新推荐文章于 2025-05-15 11:31:40 发布
转载 最新推荐文章于 2025-05-15 11:31:40 发布 · 4.1k 阅读 · 1

本文介绍了一个实用的Google代码高亮插件PrettyPrint.js，它能帮助博客或文章中的代码更加醒目易读。通过简单的三步设置即可完成代码样式的美化。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在我们写博客或文章的时候可能会在pre标签中插入代码，但是原生的pre标签代码显示比较单一，不易突出重点不方便阅读，幸好有prettyPrint.js，一个Google代码高亮插件，实现代码高亮显示。

演示效果

QQ截图20150711100654

使用方法：

第一步，引入prettify.js和prettify.css

 
  1. <script src="js/prettify.js" type="text/javascript"></script>
  2. <link rel="stylesheet" type="text/css" href="css/prettify.css"/>

第二步，在body的onload事件里添加函数”prettyPrint()”

 
  1. <body onload="prettyPrint()">

第三步，pre标签添加CSS类“prettyprint linenums”

 
  1. <pre class="prettyprint linenums">

或者你也可以这样，使用js动态添加

 
  1. $(document).ready(function() {
  2.  $(".entry-content pre").addClass("prettyprint linenums");
  3. });

下载地址

下载prettify

    WordPress自动代码高亮插件Code Prettify插件
    T19900的博客
    03-24 247
    Code Prettify 是一款轻量级的 WordPress 代码高亮插件，由 Google 开发，专为在网页上美化代码显示而设计。它支持多种编程语言，能够自动检测代码并进行语法高亮，无需手动添加标签。该插件适用于技术博客、开发者文档站点以及任何需要展示代码的 WordPress 站点，提供简洁高效的代码美化效果。Code Prettify 是一款简单高效的 WordPress 代码高亮插件，适合开发者和技术博客站长使用。它无需复杂配置，兼容各种主题，且不会影响网站性能。
    Chrome反压缩JS代码：Pretty Print显示可读代码
    Jq的博客
    10-27 3859
    按快捷键fn+f12,打开检查，点击 Sources中的一个html 或js文件，点击**大括号{}**图标，即可使用Prerry Print功能了。 这时是反压缩后的代码：
    sublime插件Pretty Json
    07-29
    对齐json工具
    实现网页代码高亮的Prettify插件教程
    最新发布
    weixin_33363025的博客
    05-15 824
    Prettify是一个功能强大的代码格式化插件，广泛应用于各种开发环境和代码编辑器中。它的主要功能是自动格式化代码，支持多种编程语言的智能识别，让代码的阅读和编写更加高效。Prettify允许开发者自定义CSS样式，以适应不同的设计需求。Prettify通过一系列的CSS类来控制代码的显示样式。自定义样式通常涉及修改这些预定义类的属性，例如改变背景色、字体颜色和字体大小等。/* 自定义CSS样式样例 */
    js的pretty print
    冯建华的专栏
    12-15 7822
    ie     2. firefox 的firebug没有pretty print功能， 需要使用javascript-deminifier                   https://addons.mozilla.org/zh-cn/firefox/addon/javascript-deminifier/ 大家都知道， 前端开发的firebug这个利器。 但是有的时候想学习...
    代码高亮插件prettyPrint.js使用
    sayoko06的博客
    07-10 7277
    第一步，引入prettify.js和prettify.css&lt;script src="js/prettify.js" type="text/javascript"&gt;&lt;/script&gt; &lt;link rel="stylesheet" type="text/css" href="css/prettify.css"/&gt;第二步，在bod
    让Python输出更漂亮：PrettyPrinter
    python学习者的博客
    11-05 2797
    分享一个很实用的Python小工具，文章不是我原创，原文出自Introducing PrettyPrinter for Python，译文出处未能找到，如果有同学知道麻烦提醒我一下。 PrettyPrinter是Python 3.6 及以上版本中的一个功能强大、支持语法高亮、描述性的美化打印包。它使用了改进的Wadler-Leijen布局算法，和Haskell打印美化库中的prettyprint...
    python pprint_让我们来谈谈python中的prettyprint
    weixin_39597868的博客
    11-21 546
    前言当你开始学习python编程的时候，你做的第一件事是什么?相信我们都已经通过“Hello World”程序开始了我们的python之旅。在python中，它可以在一行中完成:print(“Hello World”)但是，在使用print()函数打印字典、列表或任何其他复杂数据类型时，您是否遇到过这种痛苦呢?由于不适当的缩进问题，我们经常在python嵌套数据结构的输出中遇到可读性方面的困难。让...
    google代码高亮插件prettify
    09-26
    谷歌的Prettify是一款流行的代码高亮插件，主要用于网页中的源代码展示，提供美观的语法高亮效果，使得代码更易读、易理解。它适用于多种编程语言，包括但不限于HTML、CSS、JavaScript、Python、Java、C++等。这款...
    wordpress代码高亮插件
    05-06
    wordpress代码高亮插件 将下面这段代码放在Header中，自动为pre添加prettyprint linenums属性。 <!--代码高亮显示自动为pre添加属性--> <script type="text/javascript"> jQuery(document).ready(function () { ...
    Prettify.js
    03-01
    不管是之前自己的技术博客还是现在的公司官网，作为一个互联网从业者，经常需要写一些博文，这也是我的习惯，而写技术文章很多时候需要在文章中插入代码，如果以普通字符形式展示出来我觉得不能够显示出代码的魅力。而通常大家都是利用代码高亮的方式，让代码在文章中显得更加具体化，就好像我们在用编辑器一样。就那WP来说，大家都知道有一些代码高亮的插件，当然我也曾经尝试过几个，但都不是特别满意，再者大家都知道使用插件的效率相对而言是比较低的。
    HTML-CSS-JS Prettify
    02-23
    HTML-CSS-JS Prettify
    [原创]使用 NodeJS, MarkdownJS, PrettifyJS 打造个人博客写作平台 - 打包下载
    weixin_34113237的博客
    03-17 112
    引言 上一篇文章我们介绍了使用 NodeJS, MarkdownJS, PrettifyJS 打造个人博客写作平台的整体思路， 也顺利解决了把 PrettifyJS 转换为 NodeJS 模块的麻烦。这篇文章我们会分析 NodeJS 相关代码，并给出可运行的压缩包下载。 在继续本文之前，先来回答上篇评论中网友的疑问，这么做的好处有哪些？ 如果我们有 Showdown 这样的在线转换 Mar...
    使用prettyPrint.js提升你的JavaScript调试体验
    gitblog_00002的博客
    05-10 364
    使用prettyPrint.js提升你的JavaScript调试体验 项目介绍 prettyPrint.js 是一个强大的在浏览器内运行的JavaScript变量打印工具，灵感来源于ColdFusion的cfdump标签。它提供了清晰易读的输出形式，让你在调试代码时能够更直观地查看和理解数据结构。 项目技术分析 prettyPrint.js具备以下核心特性： 独立性：无需依赖任何样式表或图片，即...
    html css js pretty,Pretty HTML Table with CSS
    weixin_32024145的博客
    06-23 401
    Pretty HTML Table with CSSWithout Ajax framework, but with just a JavaScript function to alternate colors, this gives HTML tables the look of that of magazine or professional website.The demonstrati...
    使用JS-Beautify打造整洁的JavaScript代码
    gitblog_00069的博客
    03-20 1057
    使用JS-Beautify打造整洁的JavaScript代码 项目地址:https://gitcode.com/gh_mirrors/jsb/js-beautify 是一个开源项目，致力于为JavaScript、HTML和CSS提供强大的自动格式化功能。这个工具能够将混乱无章的源代码整理得井井有条，提升代码的可读性和维护性。无论你是开发新手还是经验丰富的老手，JS-Beautify都能极大地提升你...
    Prettier插件使用
    m0_58580098的博客
    10-12 737
    由于之前使用的Beautify格式化插件已经没有在维护了，所以这里再分享一个Formatter插件-Prettier。
    JavaScript Prettier：优雅的JavaScript代码格式化工具
    gitblog_00045的博客
    06-11 563
    JavaScript Prettier：优雅的JavaScript代码格式化工具 JavaScript Prettier 是一个基于Node.js的强大JavaScript和TypeScript格式化器，旨在提供一种统一的代码风格，让代码始终保持整洁且易于阅读。它支持最新的ES2017、JSX、TypeScript以及Flow语言特性，确保你的代码始终遵循一致的标准。 项目技术分析 该项目的核心是...
    Prettify代码高亮功能详解与实用案例
    标题中提到的是关于HTML代码高亮插件Prettify的使用总结，并且给出了一个实例代码。Prettify是一个用于Web页面上展示代码段并进行语法高亮的JavaScript库，它由Google开发，旨在提高代码在网页上的可读性。Prettify...
    评论
    添加红包

    请填写红包祝福语或标题

    个

    红包个数最小为10个

    元

    红包金额最低5元

    当前余额3.43元 前往充值 >
    需支付：10.00元
    成就一亿技术人!
    领取后你会自动成为博主和红包主的粉丝 规则
    hope_wisdom
    发出的红包
    实付元
    使用余额支付
    点击重新获取
    扫码支付
    钱包余额 0

    抵扣说明：

    1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
    2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

    余额充值