文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
    • 综合排序
    • 最热优先
    • 最新优先
    时间不限
    时间不限
    最近一周
    最近一月
    最近三月
  • 来自专栏泽泽社

    instantclick兼容Prismjs插件

    最近yodu模板的用户要求我兼容typecho的Prismjs代码高亮插件，其实在《pjax(InstantClick) 常用的重载函数》中我就提到了Prismjs的pjax重载代码，但是经测试，还是有问题 插件方面改动 打开Prismjs代码高亮插件的Plugin.php文件 在第58行找到var pres = document.getElementsByTagName('pre');改成< '/Prismjs/line-number-wrap-fix.js' . == 'undefined') {plugin('Prismjs')->showln): ?

    94940编辑于 2023-04-17
  • 来自专栏前端二次元

    vue+prismjs 网页代码高亮插件

    使用步骤1、安装prismjs插件// 1. 安装prismjs 插件npm install prismjs -S// 2. 安装prismjs 编译器插件npm install babel-plugin-prismjs -D 2、插件配置打开 babel.config.js ，在module.exports中的plugins 添加以下配置，如果原本没有plugins可以手动添加// babel.config.js["prismjs", { "languages": ["javascript", "css", "markup "; // 引入插件import 'prismjs/themes/prism.css'; // 引入样式export default { mounted(){ Prism.highlightAll "; // 引入插件import 'prismjs/themes/prism.css'; // 引入样式export default { methods: { getHtml(){ /

    1.2K00编辑于 2023-11-04
  • 来自专栏CMS建站教程

    基于prismjs的Typecho代码高亮插件CodeHighlighter

    CodeHighlighter插件是一款基于prismjs的代码语法高亮typecho插件，支持众多常见的代码语言高亮显示，官方提供8种代码高亮风格自由切换，支持显示代码语言类型、行号，以及支持复制代码到剪切板功能

    2K20编辑于 2022-02-18
  • 来自专栏守望轩

    让小程序支持代码高亮

    如果在wordpress的文章里代码高亮支持：显示行号，复制代码，显示语言，可以去prismjs下载相应的插件。 1.显示编程语言的prismjs插件：https://prismjs.com/plugins/show-language/ 2.显示行号的prismjs插件：https://prismjs.com/plugins /line-numbers/ 3.复制代码的prismjs插件：https://prismjs.com/plugins/copy-to-clipboard/ 下载上述插件后，引入到wordpress主题里 ，在code 便签里加入data-prismjs-copy 和data-prismjs-copy-success，就可以支持上述三个功能了。 示例代码如下： 

    <code class="language-html line-numbers" data-prismjs-copy="复制代码" data-prismjs-copy-success
    1K30发布于 2021-08-13
  • 来自专栏老蒋专栏

    利用Prism.js脚本工具实现网页代码高亮效果

    我们可以使用Prismjs 可以快速为网站添加代码高亮功能。 文章目录 隐藏 第一、PrismJS高亮代码下载 第二、引用PrismJS文件 第三、如何使用 第一、PrismJS高亮代码下载 下载地址：https://prismjs.com /download.html PrismJS目前支持8种主题样式，我们选择 Themes，Languages，Plugins，点击底部的下载按钮，会得到 prism.css 和 prism.js两个文件 第二、引用PrismJS文件 <!DOCTYPE html> <html> <head> ... 第三、如何使用 案例效果：https://prismjs.com/examples.html 本文出处：老蒋部落 » 利用Prism.js脚本工具实现网页代码高亮效果 | 欢迎分享

    7.4K20编辑于 2021-12-27
  • 来自专栏后端开发随笔

    使用3-hexo主题时无法正常渲染html代码

    原因分析 在使用3-hexo主题时，默认使用主题自带的渲染插件（会禁用highlight和prismjs），该插件会把这些嵌入的html代码进行渲染，所以无法正常显示html代码本身。 解决办法 使用hexo框架默认自带的prismjs插件进行渲染，具体实现：编辑项目根目录下的_config.yml文件，启用prismjs插件。 prismjs: enable: true 只要启用hexo框架默认自带的prismjs高亮插件即可实现对嵌入html代码的正常显示。 但是默认情况下，渲染的html代码样式可能不满足需求，此时可以对prismjs插件进行定制。 首先， 重新下载prismjs插件对应的css文件和js文件，重命名为：prism.css和prism.js。

    1.9K40编辑于 2022-12-29
  • 来自专栏Dotnet9

    完美：C# Blazor中显示Markdown并添加代码高亮

    --代码块主题--> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<em>prismjs</em>@1.27.0/themes/prism-coy.min.css --行号插件--> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<em>prismjs</em>@1.27.0/plugins/line-numbers --prism核心js (用于渲染代码块)--> <script src="https://cdn.jsdelivr.net/npm/prismjs@1.27.0/prism.min.js"></script --工具栏(一些插件的前置依赖)--> <script src="https://cdn.jsdelivr.net/npm/<em>prismjs</em>@1.27.0/plugins/toolbar/prism-toolbar.min.js --自动去cdn加载对应语言的代码高亮js--> <script src="https://cdn.jsdelivr.net/npm/prismjs@1.27.0/plugins/autoloader/

    2.2K30编辑于 2022-03-26
  • 来自专栏网络日志

    使用Next.js创建Blog

    ' import {Box} from '@chakra-ui/react' // 以下按需引入 require('prismjs/components/prism-go') require('prismjs /components/prism-python') require('prismjs/components/prism-javascript') require('prismjs/components /prism-css') require('prismjs/components/prism-bash') require('prismjs/components/prism-swift') require ('prismjs/components/prism-tsx') require('prismjs/components/prism-jsx') require('prismjs/components/ prism-typescript') require('prismjs/components/prism-sql') require('prismjs/themes/prism-okaidia.min.css

    1.1K10编辑于 2024-06-12
  • 来自专栏小义思

    作为程序员，谁不想简单快捷地搭建一套属于自己的技术博客网站呢？

    -- 代码高亮 --> <script src="//cdn.jsdelivr.net/npm/<em>prismjs</em>@1/components/prism-bash.min.js"></script> <script src="//cdn.jsdelivr.net/npm/<em>prismjs</em>@1/components/prism-c.min.js"></script> <script src="//cdn.jsdelivr.net /npm/<em>prismjs</em>@1/components/prism-json.min.js"></script> <script src="//cdn.jsdelivr.net/npm/<em>prismjs</em>@ 1/components/prism-shell-session.min.js"></script> <script src="//cdn.jsdelivr.net/npm/<em>prismjs</em>@1/components /prism-python.min.js"></script> <script src="//cdn.jsdelivr.net/npm/<em>prismjs</em>@1/components/prism-http.min.js

    81510编辑于 2024-04-10
  • 来自专栏pai233的专栏

    快速将Butterfly主题的CDN从jsDelivr切换至自建反向代理源

    : 'https://cdn.jsdelivr.net/npm/prismjs/prism.min.js', prismjs_lineNumber_js: 'https://cdn.jsdelivr.net /npm/prismjs/plugins/line-numbers/prism-line-numbers.min.js', prismjs_autoloader: 'https://cdn.jsdelivr.net /npm/prismjs/plugins/autoloader/prism-autoloader.min.js' } // delete null value const deleteNullValue : 'https://jsdelivr.pai233.top/npm/prismjs/prism.min.js', prismjs_lineNumber_js: 'https://jsdelivr.pai233 .top/npm/prismjs/plugins/line-numbers/prism-line-numbers.min.js', prismjs_autoloader: 'https://jsdelivr.pai233

    2.8K21编辑于 2022-04-25
  • 来自专栏CY

    Vue3(Vite) 通过 prism.js 实现代码高亮并实现Mac风格

    prismjs漂亮的代码语法高亮插件 极致易用：引用 prism.css 和 prism.js，使用合适的 HTML5 标签（code.language-xxxx），搞定！ 完成效果 安装 npm i prismjs -S # vite npm install vite-plugin-prismjs -D 配置vite.config.ts(js) plugins扩展 line-numbers show-language显示语言 copy-to-clipboard显示语言 'inline-color'在代码中显示颜色块 import { prismjsPlugin } from 'vite-plugin-prismjs code> </template> <script setup> import { onMounted, onUpdated } from "vue"; import Prism from "prismjs

    3.4K60编辑于 2023-05-10
  • 来自专栏HaC的技术专栏

    【教你搭建服务器系列】（10）利用Docsify搭建个人笔记网站

    --不同代码的高亮--> <script src="//cdn.jsdelivr.net/npm/<em>prismjs</em>@1.22.0/components/prism-c.min.js"></script> <script src="//cdn.jsdelivr.net/npm/<em>prismjs</em>@1.22.0/components/prism-cpp.min.js"></script> <script src ="//unpkg.com/<em>prismjs</em>/components/prism-bash.js"></script> <script src="//unpkg.com/<em>prismjs</em>/components src="//unpkg.com/prismjs/components/prism-bash.js"></script> <script src="//unpkg.com/<em>prismjs</em>/components /prism-c.js"></script> <script src="//unpkg.com/<em>prismjs</em>@1.23.0/components.js"></script> <!

    2.9K10编辑于 2021-12-07
  • 来自专栏HCG_Sky's Blog

    Typecho文章代码高亮功能

    PrismJs ? PrismJs是一款轻量、可扩展的代码语法高亮库，使用现代化的Web标准构建，使用PrismJs可以快速为网站添加代码高亮功能，支持超过上百种编程语言，还支持多种插件，是简洁、高效的代码高亮解决方案 官网传送门:https://prismjs.com/ 1.

    4.1K41发布于 2020-07-24
  • 来自专栏mall学习教程

    如何写出优雅的开源项目文档

    展示图片 添加代码高亮 在index.html中添加代码高亮的配置： <script src="//unpkg.com/<em>prismjs</em>/components/prism-bash.js"></script > <script src="//unpkg.com/<em>prismjs</em>/components/prism-java.js"></script> <script src="//unpkg.com/<em>prismjs</em> /components/prism-sql.js"></script> 其他支持高亮语言请参考：https://github.com/PrismJS/prism/tree/gh-pages/components

    1.5K20发布于 2019-07-30
  • 来自专栏编程拯救世界

    工具安利 | docsify 入坑指南与我放弃 Gitbook 的那些理由

    作为代码高亮插件，可以在 index.html 中这样配置： <script src="//unpkg.com/docsify"></script> <script src="//unpkg.com/<em>prismjs</em> /components/prism-bash.js"></script> <script src="//unpkg.com/<em>prismjs</em>/components/prism-php.js"></script > 注意这里引入的文件，如果你要高亮 Python 代码，那么就要引入： <script src="//unpkg.com/<em>prismjs</em>/components/prism-python.js"></ /docsify.js.org/#/ [4] VuePress: https://github.com/vuejs/vuepress [5] Prism 仓库: https://github.com/PrismJS

    2.3K30发布于 2019-12-12
  • 来自专栏绿巨人专栏

    Node JS World

    package global yarn global add create-react-app # add a package local and save to dependencies yarn add prismjs to devDependencies yarn add gulp --dev # add a package local and save to peerDependencies yarn add prismjs --peer # add a package local and save to optionalDependencies yarn add prismjs --optional React installation

    1.9K20发布于 2019-03-01
  • 来自专栏mall学习教程

    几分钟上线一个项目文档网站，这款开源神器实在太香了！

    代码高亮 如果你想实现代码高亮显示的话，可以在index.html中添加代码高亮的插件； <script src="//cdn.jsdelivr.net/npm/<em>prismjs</em>@1/components /prism-java.min.js"></script> <script src="//cdn.jsdelivr.net/npm/<em>prismjs</em>@1/components/prism-sql.min.js "></script> <script src="//cdn.jsdelivr.net/npm/<em>prismjs</em>@1/components/prism-bash.min.js"></script> <script src="//cdn.jsdelivr.net/npm/<em>prismjs</em>@1/components/prism-yaml.min.js"></script> <script src="//cdn.jsdelivr.net /npm/<em>prismjs</em>@1/components/prism-xml.min.js"></script> 以上是几种常见的代码高亮显示插件，添加完成后就可以实现代码的高亮显示的。

    2.4K20编辑于 2022-12-14
  • 来自专栏卓越笔记

    html prism.js 代码前端高亮、代码美化

    Prism 官网 https://prismjs.com/ Django CKeditor Prism 插件下载 官方下载：http://download.ckeditor.com/prism/releases 'widget', 'lineutils', ]), }, } 前端高亮代码配置       * 内容必须是代码块，即含有 pre 标签，再选择代码语言，不选择代码语言默认黑白框 *  去 prismjs

    4.3K51编辑于 2023-02-18
  • 来自专栏一尾流莺学前端

    【实战笔记】怎么给自己的博客搭建富文本?

    v-html渲染数据就可以了,特别需要注意的是一定要添加ql-editor类名,否则不会生效

    二.代码块高亮 1.首先安装prismjs 及其依赖 //安装prismjs npm i prismjs //安装prismjs的编译器插件 npm i babel-plugin-prismjs -D 2.在项目下找到babel.config.js 在module.exports中的plugins追加以下配置，如果原本没有plugins可以手动添加 plugins: [ [ "prismjs", { languages theme: "okaidia", //主题名称 css: true, }, ], ], 3.在组件中引入模块 //引入代码美化插件 import Prism from "prismjs 网上有部分文章说在mounted中添加 Prism.highlightAll(); 但我亲测并不是很好用,所以我就用了另外一种方法,自定义插件 //引入代码美化插件 import Prism from "prismjs

    1.1K20编辑于 2022-12-10
  • 来自专栏爪哇学习日记

    基于docsify的基本操作&配置

    -- 代码高亮:引入其他语言扩展 --> <script src="//cdn.jsdelivr.net/npm/<em>prismjs</em>@1/components/prism-bash.min.js"></script > <script src="//cdn.jsdelivr.net/npm/<em>prismjs</em>@1/components/prism-c.min.js"></script> <script src="/ /cdn.jsdelivr.net/npm/<em>prismjs</em>@1/components/prism-json.min.js"></script> <script src="//cdn.jsdelivr.net /npm/<em>prismjs</em>@1/components/prism-shell-session.min.js"></script> <script src="//cdn.jsdelivr.net/npm/ <em>prismjs</em>@1/components/prism-python.min.js"></script> <script src="//cdn.jsdelivr.net/npm/<em>prismjs</em>@1/components

    3.8K30编辑于 2022-08-30
第 2 页第 3 页第 4 页第 5 页
点击加载更多

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

领券