代码高亮显示插件(代码高亮工具)
admin 发布:2022-12-19 19:30 145
本篇文章给大家谈谈代码高亮显示插件,以及代码高亮工具对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。
本文目录一览:
- 1、码神必用的这些 IDEA 插件 怪不得你们写代码头疼了
- 2、如何实现word或是wps里面的代码高亮
- 3、如何利用wordpress插件在文章中插入高亮代码
- 4、wordpress代码高亮用什么插件
- 5、sublime text 2 装什么插件 CSS3 才能高亮显示
- 6、highlight.js
码神必用的这些 IDEA 插件 怪不得你们写代码头疼了
前言:
学习使用一些插件,可以提高平常工作中的开发效率。对于我们开发人员很有帮助!有了这些插件,可以说得心应手了,各位
插件安装
IDEA里面,依次选择打开 File Settings Plugins ,在Plugins里面可以搜索需要的插件,然后安装( 安装完插件,一定要重启Idea,不然插件不生效 )
【 阿里巴巴代码规范检查插件 】
① 功能:
② 使用方法:
将会出现如下所示的检查结果,并会给出编码规范和提示:
【 Bug检查插件 】
① 功能:
② 使用方法:
【 快捷键提示插件 】
① 功能:
② 使用方法:
【 翻译的插件 】
① 功能:
② 使用方法:
注:还有一款翻译插件是 EcTranslation
【 分析依赖冲突的插件 】
① 功能:
② 使用方法:
可以查看依赖冲突
可以清晰的查看maven依赖树
【 增强idea对mybatis支持的插件 】
① 功能:
这个插件超级实用,可以从mapper接口跳转到mybatis的xml文件中,还能找到对应的方
② 使用方法:
【 日志高亮显示插件 】
① 功能:
功能:
功能:
注意:需要在pom引入依赖
【 代码编辑区缩略图插件 】
功能 :
最后给大家分享Spring系列的学习笔记和面试题,包含spring面试题、spring cloud面试题、spring boot面试题、spring教程笔记、spring boot教程笔记、最新阿里巴巴开发手册(63页PDF总结)、2022年Java面试手册。一共整理了1184页PDF文档。私信博主(777)领取,祝大家更上一层楼!!!
原文作者:扬帆向海
原文出处:
如何实现word或是wps里面的代码高亮
写实验报告,或是在写一个关于一些含有代码的文档的时候,我们常常会需要在里面
加一些代码,但是黑白的代码难免影响代码的美观和形式。这里给出一些实现高亮代码到
三种方法。
方法一:
第一种方法是直接给wps安装插件,从而实现高亮代码显示,在WPS官网下载语法高亮插件。
方法二:
第二种方法是借助Notepad++
首先是下载Notepad++,这是下载地址,当然也可以百度一下Notepad++下载安装。
安装完成后把需要的代码复制到Notepad++里面,当然首先可以设置一下代码的类别
在语言栏里面设置:
在Notepad++上,选择“插件——NppExport——Copy RTF to clipboard”标签,复制该代码
然后到wps里面选择性张贴的时候选择RFT格式粘贴就好。
方法三:
第三种方法是针对Eclipse编译器来说的,如果使用的是Eclipse编辑Java代码,有时候直接拷贝代
码就可以实现代码的高亮,但是有时候不能实现高亮就需要设置一下
设置方法如下:
打开windows里面的prefrences。输入floding搜索,打开java-Edotor-floding。进行如下操作
OK,复制过去就是高亮的代码。
如何利用wordpress插件在文章中插入高亮代码
一直以来在wordpress发布文章的时候不管代码的显示格式,都是按普通的文章本格式来发布的,但后来
发现这样的发布使得代码非常之不美观,又不方便阅读,这样对用户的体验非常不好,所以在网上找了
一些解决代码在文章中高亮显示的方法,经过几次的测试,觉得使用CodeColorer这个插件来实现比较方
便,而且高亮代码显示非常美观,下面给大家讲讲如何使用这个插件。
1、既然是用插件为实现的功能,那么第一件事就是安装这个插件了,详细的安装方法可以参照:
wordpress插件CodeColorer的下载与安装
2、安装好CodeColorer后在wordpress管理后台的设置里面有个CodeColorer选项,点击进去进行配置,
一般情况下只需要将“宽度”设置成您站点文章的宽度就行了。如果希望显示的高亮代码前面显示行号
的话,可以勾选一下格式化里的“显示行号”。如图:
3、在发表文章的时候先在可视化界面编辑好所有文字内容,然后切换到文本界面,在文本界面找到你需要添加高亮代码的地方插入以下标签:code lang=”php” /code,在code lang=”php” /code标签之间插入您需要显示的代码,然后保存文章就可以了。当然您也可以开启CodeColorer的可视化插入代码功能,只需要修改插件目录下的codecolorer.php 文件即可。下面是需要修改的代码,只需要将代码前面的//注释符去掉就可以了。
wordpress代码高亮用什么插件
WordPress有很多的代码高亮插件,但是效果和使用都不是很理想,后来也就找到了一款WP-Syntax的插件,感觉还是非常不错的。
但是由于WP-Syntax插件的默认样式有些怪异,所以可以使用一下css做一个美化
/* wp_syntax update:2016/04/12*/
.wp_syntax {
color:#100;
background-color:#f9f9f9;
border:1px solid #EBEBEB;
margin:6px 0;
overflow:auto;
}
.wp_syntax {
overflow-x:auto;
overflow-y:hidden;
padding-bottom:expression(this.scrollWidth this.offsetWidth ? 15:0);
width:99%;
}
.wp_syntax table {
border:none;
border-collapse:collapse;
margin:0;
padding:0;
width:100% !important
}
.wp_syntax caption {
padding:2px;
width:100%;
background-color:#def;
text-align:left;
font-family:Monaco;
font-size:13px;
line-height:20px;
}
.wp_syntax caption a {
color:#1982d1;
text-align:left;
font-family:Monaco;
font-size:13px;
line-height:20px;
text-decoration:none;
}
.wp_syntax caption a:hover {
color:#1982d1;
text-decoration:underline;
}
.wp_syntax div,.wp_syntax td {
border:none;
text-align:left;
padding:0;
vertical-align:top;
}
.wp_syntax td.code {
background:none;
line-height:normal;
white-space:normal;
padding-left:10px;
}
.wp_syntax pre,.wp_syntax span {
background:transparent;
margin:0;
padding:0;
width:auto;
float:none;
clear:none;
overflow:visible;
font-family:Monaco;
font-size:13px;
line-height:26px;
white-space:pre;
font-family: Consolas, Monaco, 'Microsoft YaHei','WenQuanYi Micro Hei' ,'Lucida Console', monospace;
}
.wp_syntax td.line_numbers {
width:36px
}
.wp_syntax td.line_numbers pre {
border-right:3px solid #666;
background-color:#E7E5DC;
color:gray;
padding:0 5px;
text-align:right;
}
你也可以将上面的代码添加到你主题的 style.css 文件中,然后在 functions.php 中添加下面的代码,取消 WP-Syntax 加载的css文件,这样,即使你以后升级了插件,也能保留你自己的样式。
if ( has_action( 'wp_print_styles', 'wp_syntax_style' ) ) {
remove_action( 'wp_print_styles', 'wp_syntax_style' );
};
这样就非常的好了。
以上代码参考资料: (版权归原作者所有)
sublime text 2 装什么插件 CSS3 才能高亮显示
sublime text 2不需要装插件就可以使css3代码高亮显示的。
设置方法如下:
依次点击“查看”——“语法”——“css”即可设置css代码高亮显示了。如下图:
参考资料:百d知道
highlight.js
一行代码就能让我的网站支持代码高亮的工具库,也支持在 Vue 中使用,强烈推荐给大家。
highlight.js 是一款使用 javascript 开发代码高亮工具库,能够让网页上的代码显示接近我们使用的代码编辑器的高亮样式,从而看起来更舒服,增强阅读体验。
常来我网站的小伙伴都知道,我的文章有一个栏目是“前端”,主要推荐一下实用的前端开源项目或者组件库,写技术类文章免不了要贴代码,我的网站基于 wordpress 搭建,此前我一直为找一款代码高亮插件烦恼,但大部分 wordpress 的代码高亮插件实在太臃肿,出来的样式又不美观。大多时候是截图 VsCode 的代码界面,甚至还用过 codepng 这个工具把代码变成图片贴在文章中,但这样做是美观了,但也存在2个问题:
最终还是找到了 highlight.js,完美解决了上面两个问题,而且配置简单,演示漂亮,定制化简单。不禁感叹:用纯前端的方式解决,才能精准控制,实现想要的效果。
下面以我的网站为例,展示将 highlight.js 用在我们的项目上的方法。首先 highlight.js 支持 cdn 直接引入和 npm 安装,我的网站基于 wordpress 开发,主题是自己写的,最简单的方式就是在文章详情页引入 highlight.js 和主题样式。
虽然 highlight.js 支持几百种开发语言,但为了将文件体积控制到最小,我们可以点击“get version”按钮进入下载页,通过勾选我们需要的开发语言,来构建最轻量的库。
下载解压后得到的 highlight.min.js 就是我们需要引入的 js 文件,主题样式都在 style 文件夹里,我选择了一个比较喜欢的 monokai-sublime 主题,只需要一个 css 文件,然后初始化:
就是这么简单,highlight.js 会自动将文章中的
点击查看本次分享的网址以及代码高亮效果
highlight.js - 让网页上的代码高亮美化的免费开源工具库 那些免费的砖
关于代码高亮显示插件和代码高亮工具的介绍到此就结束了,不知道你从中找到你需要的信息了吗 ?如果你还想了解更多这方面的信息,记得收藏关注本站。
版权说明:如非注明,本站文章均为 AH站长 原创,转载请注明出处和附带本文链接;
相关推荐
- 05-15站长工具外链查询,站长工具接口
- 05-14恶意点击软件哪个好,防恶意点击工具
- 05-12网站安全检测工具网站,网站安全测试工具
- 05-10seo排名推广工具,如何做seo推广排名见效快
- 05-09网页代码,网页代码快捷键
- 05-09百度seo查询工具,百度seo效果怎么样
- 05-08网站访问量查询工具,网站访问量统计
- 05-08关键词搜索爱站网,关键词挖掘工具爱站
- 05-07pb超级报表源代码(pb报表工具)[20240507更新]
- 05-06单页网站的代码(完整的网页代码)[20240506更新]
取消回复欢迎 你 发表评论:
- 标签列表
- 最近发表
- 友情链接