code高亮js,codeblocks代碼高亮

本文目錄一覽：

• 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;

}

詳情可以參考：