js实现代码高亮显示

最新推荐文章于 2024-05-14 18:25:01 发布
最新推荐文章于 2024-05-14 18:25:01 发布
阅读量5.3k 收藏 5
点赞数 1
分类专栏： 个人总结 文章标签： 代码高亮highlight 页面显示成代码样式 仿代码编辑器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Chris__wang/article/details/85159364
版权

项目需要实现java代码高亮，像编辑器那种，就好比CSDN这种，网上搜了好多插件，最终选择了highlight.js。

先上效果图

可以在网上下载highlight.js插件，或者去官网下载，样式文件也会一起下载下来，或者npm install highlight

首先引入js文件和样式文件，样式文件有很多，这里我选的是sublime样式。

 <link rel="stylesheet" href="./monokai-sublime.css">
 <script src="./highlight.js"></script>

然后书写html代码

<body>
    <pre>
        <code class="css">
           .common{
                width:100px;
                height:100px;
                background-color:red;
           }
        </code>
    </pre>
    <pre>
        <code class="java">
            @RequestMapping(value = "/menuPrivilege", method = RequestMethod.GET)
            public void menuPrivilege(@RequestParam(required = false) String code,@RequestParam(required = false) String url) {
                PrivilegeDTO privilegeDTO = new PrivilegeDTO();
                if(Strings.isNullOrEmpty(code)){
                    privilegeDTO.code = "envParas";
                    privilegeDTO.name = "环境参数管理";
                    privilegeDTO.urlPath = "/envparams/index";
                }
                String basicServer = env.getProperty("basic.server");
                String menuPath = env.getProperty("basic.upmenu");
                new StringBuilder().append(basicServer).append(menuPath).toString();//
                List<PrivilegeDTO> privilegeDTOList = new ArrayList<>();
            }
        </code>
    </pre>
    <pre >
        <code class="javascript">
            var a = 123;
            function fn(){
                a = 456;
            }
        </code>
    </pre>
</body>

这里需要用到pre标签和code标签，对于用别的标签有没有别的写法我也没去具体探究，不过这种写法必须用pre和code标签。

最后是插件初始化部分

<script>
    hljs.initHighlightingOnLoad();
</script>

就是这么简单。

其中初始化方法有

highlightBlock(block)
应用高亮到一个包含代码的DOM节点上

initHighlighting()
在页面的<pre><code>..</code></pre>区域上应用高亮

initHighlightingOnLoad()
绑定高亮到页面加载事件上

【右上角点个赞，谢谢】

Chris__Wang
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Javascript实现的CSS代码高亮显示
10-29
总的来说，JavaScript实现CSS代码高亮显示需要对CSS语法有深入的理解，同时也需要掌握JavaScript的字符串处理技巧。通过这种方式，我们可以创建出一个用户友好的代码展示环境，使代码更容易阅读和理解。
java实现语法高亮插件_【highlight.js】页面代码高亮插件
weixin_35419402的博客
02-25 472
【highlight.js】很多博客都支持页面插入各种语言的代码，而这些代码肯定是有高亮设置的。那么在我们自己的页面上如何进行代码高亮设置？有现成的这个highlight.js插件我们可以使用。highlight.js的官网是【https://highlightjs.org/】可以去上面下载插件。如果习惯用cdn可以百度一下怎么用cdn的方法来引用相关文件，我这里就把这个包下载到本地来了。■　　简...
js：highlight.js实现代码的语法高亮
彭世瑜的博客
06-21 1061
译文：highlight.js为Web突出显示语法文档。
2024年最全微信小程序解析富文本(支持代码高亮)_小程序里使用highlight(1)，数据库工程师面试自我介绍
最新发布
2401_84434442的博客
05-14 1096
排序算法根据考频高低主要有：快速排序、归并排序、堆排序、冒泡排序、插入排序、选择排序、希尔排序、桶排序、基数排序、Timsort这十种，这类考核点要么是算法的时间、空间复杂度、稳定度，要么是直接手写代码，故在理解算法原理的同时，对JS语言版的排序算法代码也要加强记忆。所有只能放弃小程序内置的组件了，在百度了几分钟后，看到目前比较热门的是。，不同数据结构有不同的方法以及储存原理，这些算是技术岗的必备知识。这对个人的开发者来说确实挺不友好的，在开放文档中查找。的GitHub官网中有详细的介绍。
web页面代码片段高亮显示，highlight.js库的使用方法
m0_64642443的博客
01-23 3667
其实通过观察css和生成的html结构，可以看到每一句代码都是由span标签包裹，且根据不同的代码，添加了不同的class类名所以我们可以改变css中的颜色，来实现自己定制的特点颜色高亮效果这样就实现了自定制的代码高亮效果了更多使用方法可以参考官网highightjs官网highightjs中文官网可以对其插件进一步的封装，完成一些小功能，比如代码复制，代码编写等等。
JS库之Highlight.js高亮代码
花伤情犹在的博客
10-28 4353
Highlight.js介绍 官网 下载地址：https://highlightjs.org/download/ highlight.js是一个用于在任何web页面上着色显示各种示例源代码语法的JS项目。具有以下特色： 支持 92 种语言，49 种代码格式化风格。 自动检测语言种类 支持多语言混合的代码高亮 支持Node.js 支持使用任何HTML标记 兼容任意js框架 引入 highlight.js 文件 我们需要在页面中同时引入一个 js 文件和一个
两种使用 JavaScript 实现网页高亮关键字的方法
百度一下 猎人社区
05-01 3935
在本文中，我们将探讨如何使用 JavaScript 实现网页高亮显示关键字的功能。无论使用哪种方法，网页高亮关键字的功能都存在一个共同的问题：如果不小心处理，容易破坏网页布局。在本文中，我们介绍了两种使用 JavaScript 实现网页高亮关键字的方法：基于浏览器 API 的方法和基于第三方库的方法。在搜索结果中，通常会高亮显示与我们搜索的关键词相关的内容，这样我们就能更快地找到自己需要的信息。为了避免这种情况，我们需要在高亮显示新文本之前先删除旧文本的高亮显示。在选择要高亮显示的元素时，使用。
使用Prismjs让你写的代码高亮起来（以Vue3为例）
三叶雨
07-25 6066
使用Prismjs让你写的代码高亮起来（以Vue3为例）
用JS将搜索的关键字高亮显示实现代码
10-26
总之，通过JavaScript实现关键字高亮显示是一项常见的需求，可以通过遍历文档、查找关键字并替换匹配内容来完成。理解这一过程对于提高网页的用户体验和互动性具有重要意义。在实际应用中，应根据具体需求进行调整和...
使用SyntaxHighlighter实现HTML高亮显示代码的方法
12-09
//www.jb51.net/jiaoben/15599.htmlsyntaxhighlighter是一个小开源项目，它可以在网页中对各种程序源代码语法进行加亮显示。支持当前流行的各种编程语言： C#、CSS、C++、Delphi、Java、JavaScript、PHP、Python、...
两种简单实现菜单高亮显示的JS类代码
01-21
记得当年写静态页时,为了实现高亮都是在每个页面加不同的样式,呵.高亮显示我觉得对于web前端来说,是... 第一种判断当前URL值高亮类代码: 代码如下: //@Mr.Think—判断URL实现菜单高亮显示 function highURL(menuId,cla
Echarts使用一：在地图上将特定城市显示高亮
热门推荐
呜呜哈的博客
08-13 5万+
最近项目要使用echarts进行数据可视化。主要用到中国和各省市地图，第一次用也是遇到了很多问题，在这里记录一下，方便以后回顾。 首先将第一个需求说一下，就是根据传入的一条数据在地图上将两个城市连线并显示高亮。在介绍代码之前先说一下echarts的一个大致流程。以地图为例： 1，标签里面一般会将要使用到的js文件引入进来，这里的js文件可以是在线的，比如说下面例子中所使用的链接；也可以是本地的，
JavaScript-高亮显示
丁世杰的博客
07-10 672
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/.
在vue中highlight.js实现代码高亮，自定义插件
SHUIYI_24的博客
04-20 1168
在 vue-cli3 项目中，通过highlight.js，实现页面中代码高亮。 请先了解highlight.js官网中的使用说明。 1. 安装 npm install highlight.js --save 2. 封装成vue插件 官方文档---自定义插件 官方文档---自定义指令 新建highlight.js文件，并添加： // src/utils/highl...
vue项目使用highlight.js 代码高亮插件,并给它添加行数
贵林之恋的博客
10-19 1523
/ main中引入语法高亮配置。，在main中引入即可使用，是我的目录 改成自己的;
highlight.js（代码高亮插件）
小王的技术库
05-28 1万+
highlight.js（代码高亮插件） 官网 用法查看 核心 API Highlight.js 将一些函数导出为hljs对象的方法 强调 highlight(code, {language, ignoreIllegals}) 核心高亮功能。接受代码以突出显示（字符串）和选项列表（对象）。该language参数必须存在并指定用于突出显示的语法的语言名称或别名。这ignoreIllegals是一个可选参数，即使在检测到语言的非法语法而不是抛出异常的情况下，真正强制突出显示完成时也是如此。 返回具有以下
10.突出显示案例
qq_34620296的博客
01-01 456
1.效果如下 鼠标移动到相应的图片上会突出显示 代码 <style type="text/css"> * { margin: 0; padding: 0; } ul { list-style: none; } ...
Prism & highlight.js高亮代码 & 手动添加行号 & 一键复制
pscool的博客
04-05 3417
/ 使用代码添加行号(这里是使用jquery给所有的 pre标签 加上 line-number 这个类名，也可以如上面自己手动加入这个类名)，然后，再去引入prism.js，让prism生成行号相关的dom结构出来。
在vue项目中使用Rainbow.js实现代码高亮展示
09-09
### 回答1： 在 Vue 项目中使用 Rainbow.js 实现代码高亮展示的步骤如下： 1. 安装 Rainbow.js：在命令行中运行 npm install rainbow-js --save 2. 在 main.js 中引入 Rainbow.js：import Rainbow from 'rainbow-js' 3. 在需要高亮代码的组件中，通过 Rainbow.color() 方法来高亮代码。如： ``` <template> <pre> <code class="javascript" ref="code">{{ code }}</code> </pre> </template> <script> export default { data() { return { code: `console.log('Hello, Rainbow.js!')` } }, mounted() { Rainbow.color(this.$refs.code, 'javascript') } } </script> ``` 在上面的代码中, 这个组件中包含一个 <code> 标签，将其绑定到 ref 中，并将其作为参数传递给 Rainbow.color() 方法，该方法的第二个参数是语言类型，在这里是 JavaScript。 ### 回答2： 在Vue项目中使用Rainbow.js可以实现代码高亮展示。首先，我们需要在项目中安装Rainbow.js。可以通过npm或yarn安装Rainbow.js依赖，并在需要使用代码高亮的组件中引入Rainbow.js的脚本文件。 在Vue组件中，我们可以通过以下步骤来使用Rainbow.js进行代码高亮展示： 1. 在Vue组件的`mounted`生命周期钩子函数中，获取需要高亮展示的代码块的DOM节点。 2. 使用Rainbow.js提供的`highlight`函数，传入代码节点作为参数，可以将其内容进行高亮处理。 3. 通过自定义样式文件或者直接使用Rainbow.js提供的默认样式，对高亮后的代码样式进行美化。 4. 将高亮后的代码显示在页面上。 以下是一个示例代码，演示了如何在Vue项目中使用Rainbow.js实现代码高亮展示： ```vue <template> <div> <pre> <code ref="code">{{ code }}</code> </pre> </div> </template> <script> import Rainbow from 'rainbow-js'; export default { data() { return { code: ` function greet(name) { console.log('Hello, ' + name + '!'); } greet('Vue'); `, }; }, mounted() { Rainbow.color(this.$refs.code); }, }; </script> <style> /* 可以自定义样式或使用Rainbow.js提供的默认样式 */ </style> ``` 在上面的示例中，我们首先在`mounted`钩子函数中获取了`<code>`标签对应的DOM节点，然后使用`Rainbow.color`函数对其内容进行高亮处理。最后，我们可以根据需要设置自定义样式或直接使用Rainbow.js提供的默认样式，用于展示高亮后的代码。 这样，我们就成功地在Vue项目中使用Rainbow.js实现了代码高亮展示。 ### 回答3： 在Vue项目中使用Rainbow.js实现代码高亮展示可以按照以下步骤进行操作。 首先，我们需要在Vue项目中引入Rainbow.js。可以选择通过CDN引入，也可以通过npm安装Rainbow.js包并引入。这里我们以npm安装为例。 1. 在命令行中使用以下命令安装Rainbow.js： ``` npm install rainbow-code ``` 2. 在Vue组件的script标签中引入Rainbow.js： ```javascript import Rainbow from 'rainbow-code'; ``` 3. 在Vue组件的mounted生命周期钩子中，初始化Rainbow.js并进行代码高亮设置： ```javascript mounted() { Rainbow.color(); } ``` 4. 在Vue模板中，使用<pre>标签包裹需要高亮展示的代码，并添加class属性为"rainbow"： ```html <pre class="rainbow"> <code> <!-- 在这里插入需要展示的代码 --> </code> </pre> ``` 5. 在Vue组件的styles中引入Rainbow的css样式文件： ```css @import 'rainbow-code/themes/github.css'; ``` 6. 在Vue项目的构建过程中，确保CSS样式文件可以正确地被加载和解析。 通过以上步骤的操作，我们就可以在Vue项目中使用Rainbow.js实现代码高亮展示了。可以根据需要，在Rainbow.color()中传入具体的语言配置，使得代码高亮的效果更加准确和丰富。同时，我们也可以根据自己的需求，自定义Rainbow的样式文件，使得代码高亮展示更符合项目的整体风格。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值