PrismJS 主题项目教程

于 2024-08-22 10:03:17 发布
阅读量369 收藏 10
点赞数 4
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gitblog_00181/article/details/141420209
版权

PrismJS 主题项目教程

prism-themesA wider selection of Prism themes项目地址:https://gitcode.com/gh_mirrors/pr/prism-themes

项目介绍

PrismJS 是一个轻量级、可扩展的语法高亮库，广泛用于网页和应用程序中以美化代码显示。prism-themes 是 PrismJS 的一个扩展项目，提供了多种预设的主题样式，使得用户可以轻松地为他们的代码片段选择和应用不同的视觉风格。

项目快速启动

要开始使用 prism-themes，首先需要确保你已经安装了 PrismJS。如果你还没有安装 PrismJS，可以通过以下步骤快速安装：

  1. 下载 PrismJS 核心库和所需的插件。
  2. 引入 PrismJS 的 CSS 和 JavaScript 文件到你的 HTML 文件中。

以下是一个简单的示例，展示如何在 HTML 文件中引入 prism-themes 并应用一个主题：

<!DOCTYPE html>
<html>
<head>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/themes/prism.min.css" rel="stylesheet" />
    <link href="https://cdn.jsdelivr.net/npm/prism-themes/themes/prism-a11y-dark.css" rel="stylesheet" />
</head>
<body>
    <pre><code class="language-javascript">
    function helloWorld() {
        console.log('Hello, world!');
    }
    </code></pre>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/prism.min.js"></script>
</body>
</html>

在这个示例中，我们使用了 prism-a11y-dark 主题来美化代码显示。

应用案例和最佳实践

prism-themes 可以广泛应用于各种需要代码高亮的场景，例如技术博客、文档网站、代码演示等。以下是一些应用案例和最佳实践：

  • 技术博客：在博客文章中嵌入代码片段，使用不同的主题来增强可读性和美观性。
  • 文档网站：为项目文档中的代码示例选择一个合适的主题，以提高文档的专业性和易读性。
  • 代码演示：在演示文稿或在线课程中使用代码高亮，帮助观众更好地理解代码结构和逻辑。

典型生态项目

prism-themes 是 PrismJS 生态系统中的一个重要组成部分。以下是一些与 PrismJS 相关的典型生态项目：

  • PrismJS 核心库：提供基本的语法高亮功能。
  • PrismJS 插件：扩展 PrismJS 的功能，例如行号显示、代码折叠等。
  • PrismJS 社区贡献：包括各种由社区成员开发的插件和主题，丰富了 PrismJS 的应用场景。

通过结合这些生态项目，可以构建出功能丰富、外观美观的代码高亮解决方案。

prism-themesA wider selection of Prism themes项目地址:https://gitcode.com/gh_mirrors/pr/prism-themes

白娥林
关注
vue 项目使用 prismjs 高亮显示代码
技术改变生活
03-26 1110
在框架中写文档所以想要代码高亮显示 1.首先安装prismjs npm install prismjs 2.安装babel-plugin-prismjs npm install babel-plugin-prismjs 3.配置babel.config.js module.exports = { presets: ["@vue/cli-plugin-babel/preset"], plugins: [ // 这块是增加的prismjs的配置 [ "pr.
使用CSS变量的可自定义Prism.js主题-JavaScript开发
05-26
使用CSS变量Prism --theme-vars的可自定义Prism.js主题使用CSS变量的可自定义Prism.js主题:rainbow:实时操场用法npm i棱镜-主题-变量导入'prism-theme-vars / base.css'或 配置例如：：root {---prism-foreground：＃393a34; --prism-background：＃f8f8f8; --prism-comment：＃758575; --prism-namespace：＃444444; --prism-string：＃bc8671; -棱镜标点：＃80817d； --prism-literal：＃36acaa;
prism-theme-builder:用于探索、下载、创建和使用 Prism.js 主题的小应用程序
06-19
棱镜主题生成器 这是一个用于探索、下载、创建和使用主题的小应用程序 - 一个轻量级的语法荧光笔。 该应用程序住在这里： : ＃＃贡献 非常欢迎您的贡献！ 如果您有以下情况，请提交拉取请求或报告问题： 想要添加一个新主题 想要改进现有语言的示例 发现了一个错误 ＃＃执照 该软件是在 Apache V2 许可下获得许可的。 有关详细信息，请参阅许可证文件。
探索代码高亮的魔法：Prism Themes
最新发布
gitblog_00017的博客
05-14 347
探索代码高亮的魔法：Prism Themes prism-themesA wider selection of Prism themes项目地址:https://gitcode.com/gh_mirrors/pr/prism-themes 在编程世界中，清晰易读的代码是至关重要的。而PrismThemes正是这样一个神奇的仓库，它为流行的Prism语法高亮库提供了多样化的主题选择，让你的代码展示...
prism.js让页面代码变漂亮
HELLO WORLD
10-20 7048
基本信息 官网：https://prismjs.com/ Github：https://github.com/PrismJS/prism npm：https://www.npmjs.com/package/prismjs 效果展示 使用方法 常规 <script> 标签引入 直接引入即可，具体见下面： // 引入资源 <link rel="stylesheet" href="../libaray/prismjs/prism.css"> <script src="../li
babel-plugin-prismjs：一个babel插件，可将PrismJS与标准捆绑程序一起使用
02-01
该插件使您可以将PrismJS视为标准模块，并配置要与Prism捆绑在一起的语言，插件和主题。 在您的代码中，导入prismjs ： import Prism from 'prismjs' ; Prism . highlightAll ( ) ; 导出的Prism对象将是完全配置...
react-prism:React.js + Prismjs语法重点组件
04-23
React-Prism这个组件对于那些需要在React应用中展示代码示例或教程的开发者来说非常有用，它能够帮助提升用户体验，让代码更易于阅读和理解。在JavaScript项目中，特别是在Web开发教学、技术博客和开源代码库的文档...
filename2prism:s将源代码文件名转换为PrismJS语言别名
05-24
将源代码文件名转换为PrismJS语言别名。 安装 $ npm i filename2prism 用法 将文件名映射到与其关联的： import filename2prism from 'filename2prism' console . log ( filename2prism ( 'index.mjs' ) ) //=> ...
使用Prismjs让你写的代码高亮起来（以Vue3为例）
三叶雨
07-25 6935
使用Prismjs让你写的代码高亮起来（以Vue3为例）
【前端】语法高亮 Prism.js 使用
lsdqyz的博客
12-01 4241
Prism 是一款轻量级、可扩展的语法高亮器，根据现代 Web 标准构建，应用广泛。 本文将介绍 Prism.js 的基础使用。
prismjs不支持html,Vue 中使用 prismjs 代码高亮组件
weixin_34951416的博客
06-25 759
代码高亮是我一直以来都在纠结的问题，市面上的高亮组件特别繁多，我用过例如 syntaxhighlight、highlight.js 等组件，觉得都不太好用，要么是样式不好看、支持的语法不齐全，要么就是使用太过麻烦等等。今天经过我的仔细甄选后，终于在 gayhub 上发现了这个宝藏：PrismJS进入它的官网，你会发现它所支持的几款主题，我非常喜欢 OKAIDIA 这个主题，代码风格如下：names...
vue+prismjs 网页代码高亮插件
PlatozzZ的博客
12-27 952
在vue中使用prismjs，在线预览代码块，适用于代码块分享、富文本编辑器内容预览。
PrismJS一款漂亮的代码高亮工具
寂寥人生
05-26 332
https://github.com/PrismJS/prism
vue3中使用prismjs或者highlight.js实现代码高亮
富朝阳的博客
01-05 5470
我们对显示行数做了扩展，css如下pre {important;important;top: 10px;left: 0;行数以及背景显示样式可以根据自己的需求自定义prismjs和highlight.js两个插件感觉都很不错，个人比较喜欢prismjs，当然萝卜青菜各有所爱，大家根据自己的爱好选择即可。用户体验度又上升啦！YYDS！欢迎在评论区交流。如果文章对你有所帮助，！博主会持续更新。。。。
PrismJS: 优雅的代码高亮工具
gitblog_00058的博客
03-17 606
PrismJS: 优雅的代码高亮工具 prismLightweight, robust, elegant syntax highlighting.项目地址:https://gitcode.com/gh_mirrors/pr/prism 在日常的网页开发中，我们经常需要展示各种编程语言的代码片段，为了提升用户体验和视觉效果，对代码进行语法高亮是非常必要的。而今天我们要向您推荐的，就是一款轻量级、可...
Vue3(Vite) 通过 prism.js 实现代码高亮并实现Mac风格
CY的博客
05-07 1917
Vue3(Vite) 通过 prism.js 实现代码高亮并实现Mac风格
PrismJS，一款漂亮的代码高亮工具
点滴记忆
10-31 8820
PrismJS 是一款轻量级、可扩展的语法高亮显示工具，在支持现代 Web 标准基础下增加了更多可选的风格插件。 PrismJS 支持自定义扩展代码的语言、主题和插件选项，勾选自己常用的代码语言和主题风格以及增强插件，将定制好的代码文件 prism.css 和 prism.js 如下方式链接到页面 <link rel="stylesheet" href="https://cdn.jsd...
在vue项目中怎么使用prismjs
09-09
### 回答1： 在 Vue 项目中使用 Prism.js 的方法如下： 1. 安装 Prism.js：在项目中打开终端，运行 npm install prismjs --save 或 yarn add prismjs 2. 引入 Prism.js：在 main.js 或其他入口文件中，引入 Prism.js 和需要的语言支持，如： ```js import Prism from 'prismjs' import 'prismjs/components/prism-javascript' ``` 3. 使用 Prism.js：在组件中引入并使用 Prism.js。例如，在 template 中使用 v-pre 和 code 标签，在 script 中设置语言，如： ```html <template> <div> <pre v-pre> <code class="language-javascript"> {{code}} </code> </pre> </div> </template> <script> export default { data () { return { code: 'console.log("Hello, World!")' } }, mounted () { Prism.highlightAll() } } </script> ``` 注意事项 - 通过上面的方法，你可能需要在你的项目中手动引入 prism.css 样式文件。 - 请确保你已经安装了对应语言的支持 参考文献 - Prism.js 官网: https://prismjs.com/ - Vue.js 官网: https://vuejs.org/ ### 回答2： 在Vue项目中使用Prism.js需要进行以下步骤： 1. 安装Prism.js库：在终端或命令行中运行以下命令来安装Prism.js库： ``` npm install prismjs ``` 2. 引入Prism.js样式：在Vue项目的入口文件（通常是main.js）中引入Prism.js的样式文件。你可以选择在全局引入或者按需引入。 全局引入： ```javascript import 'prismjs/themes/prism.css'; ``` 按需引入：在需要使用Prism.js的组件中引入样式文件。 3. 引入Prism.js组件：在需要使用Prism.js高亮代码的组件中引入Prism.js组件。 ```javascript import Prism from 'prismjs'; // 引入Prism.js库 import 'prismjs/components/prism-javascript'; // 引入需要高亮的语言组件 ``` 4. 使用Prism.js：在需要高亮代码的地方使用Prism.js。 在Vue的template中，使用`v-pre`指令使Vue不解析和编译代码，然后给代码块添加class属性为`language-`加上你需要高亮的语言，代码块内容就会被Prism.js高亮： ```html <pre v-pre> <code class="language-javascript"> // 这里写需要高亮的代码 </code> </pre> ``` 在Vue的mounted钩子函数中，使用Prism.js对动态添加的代码块进行高亮： ```javascript mounted() { this.highlightCode(); }, methods: { highlightCode() { Prism.highlightAll(); } } ``` 以上就是在Vue项目中使用Prism.js的基本步骤，通过这些步骤你就可以在你的Vue项目中使用Prism.js对代码进行高亮。 ### 回答3： 使用 Prism.js 在 Vue 项目中进行代码高亮非常简单。以下是在 Vue 项目中使用 Prism.js 的步骤： 1. 首先，在终端中通过 npm 或者 yarn 安装 Prism.js：`npm install prismjs` 或者 `yarn add prismjs`。 2. 在需要使用 Prism.js 的组件中，导入 Prism.js 和所需的语言和插件。 ```javascript import Prism from 'prismjs'; import 'prismjs/themes/prism.css'; // 可以选择合适的主题样式 import 'prismjs/components/prism-javascript'; // 导入所需的语言，例如 JavaScript ``` 3. 在组件的 `mounted` 钩子函数中，获取所有需要高亮的代码块的 DOM 元素，并使用 Prism.js 进行代码高亮。 ```javascript mounted() { this.highlightCodeBlocks(); }, methods: { highlightCodeBlocks() { const codeBlocks = this.$el.querySelectorAll('pre code'); codeBlocks.forEach((code) => { Prism.highlightElement(code); }); }, }, ``` 4. 在模板中，使用 `<pre>` 和 `<code>` 标签包裹代码块。注意，code 标签必须添加合适的语言类名，以便 Prism.js 正确识别语言。 ```html <pre> <code class="language-javascript"> // 这里是需要高亮的代码 </code> </pre> ``` 5. 在需要实现代码高亮的页面中引入该组件，即可看到代码块成功地被 Prism.js 高亮。 Prism.js 目前支持多种语言和插件，可以根据需要导入对应的语言和插件。同时，你也可以自定义主题样式来适应你的项目。使用这种方法，你可以在 Vue 项目中轻松地实现代码高亮功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

白娥林

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值