本文目录一览：
- 1、Visual Studio Code中的JS代码一直是黑色的，怎么设置高亮
- 2、highlight.js
- 3、visual studio code怎么让代码高亮
- 4、用codemirro在线编辑高亮显示，获取不到textarea里面的内容
- 5、如何使用highlight.js给代码添加行数
Visual Studio Code中的JS代码一直是黑色的，怎么设置高亮
因为你用的是vue，文件后缀是vue，所以js语法就不会高亮，装个vetur扩展就可以有语法高亮等功能了。
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 – 让网页上的代码高亮美化的免费开源工具库 那些免费的砖
visual studio code怎么让代码高亮
安装Visual Assist X插件，支持JavaScript。有语法高亮。 如果不安装插件请使用VS2010或者VS2012。 VS2010有两个免费的插件JSEnhancements和JScript Editor Extensions 这两个插件用百度一搜就出来了，在MSDN上就可以下到
用codemirro在线编辑高亮显示，获取不到textarea里面的内容
根据创建的editor对象，来获取
editor.getValue()；只有简单这个方法就可以轻松获取。
列如:
window.editor = CodeMirror.fromTextArea(document.getElementById(‘code’), {
mode: mime,
indentWithTabs: true,
smartIndent: true,
lineNumbers: true,
matchBrackets : true,
autofocus: true
});
editor.getValue();
验证通过，楼主给分把.
如何使用highlight.js给代码添加行数
js：
//代码高亮自定义
$(“code”).each(function(){
$(this).html(“ulli” + $(this).html().replace(/\n/g,”\n/lili”) +”\n/li/ul”);
});
css：
.hljs {
border: 0;
font-family: “Consulas”, “Courier New”, Courier, mono, serif;
font-size: 12px;
display: block;
padding: 1px;
margin: 0;
width: 100%;
font-weight: 200;
white-space: pre-wrap
}
.hljs ul {
list-style: decimal;
margin: 0px 0px 0 40px !important;
padding: 0px;
}
.hljs ul li {
list-style: decimal-leading-zero;
border-left: 1px solid #ddd !important;
padding: 5px!important;
margin: 0 !important;
line-height: 14px;
word-break: break-all;
word-wrap: break-word;
}
.hljs ul li:nth-of-type(even) {
background-color:;/*偶数行背景色，可以不设置 */
color: inherit;
}
详情可以参考：
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/239399.html
微信扫一扫 
支付宝扫一扫 