# Highlight.js
[![latest version](https://badgen.net/npm/v/highlight.js?label=latest)](https://www.npmjs.com/package/highlight.js)
[![slack](https://badgen.net/badge/icon/slack?icon=slack&label&color=pink)](https://join.slack.com/t/highlightjs/shared_invite/zt-mj0utgqp-TNFf4VQICnDnPg4zMHChFw)
[![discord](https://badgen.net/badge/icon/discord?icon=discord&label&color=pink)](https://discord.gg/M24EbU7ja9)
[![license](https://badgen.net/github/license/highlightjs/highlight.js?color=cyan)](https://github.com/highlightjs/highlight.js/blob/main/LICENSE)
[![install size](https://badgen.net/packagephobia/install/highlight.js?label=npm+install)](https://packagephobia.now.sh/result?p=highlight.js)
![minified](https://img.shields.io/github/size/highlightjs/cdn-release/build/highlight.min.js?label=minified)
[![NPM downloads weekly](https://badgen.net/npm/dw/highlight.js?label=npm+downloads&color=purple)](https://www.npmjs.com/package/highlight.js)
[![jsDelivr CDN downloads](https://badgen.net/jsdelivr/hits/gh/highlightjs/cdn-release?label=jsDelivr+CDN&color=purple)](https://www.jsdelivr.com/package/gh/highlightjs/cdn-release)
![dev deps](https://badgen.net/david/dev/highlightjs/highlight.js?label=dev+deps)
[![code quality](https://badgen.net/lgtm/grade/g/highlightjs/highlight.js/js)](https://lgtm.com/projects/g/highlightjs/highlight.js/?mode=list)
[![build and CI status](https://badgen.net/github/checks/highlightjs/highlight.js?label=build)](https://github.com/highlightjs/highlight.js/actions?query=workflow%3A%22Node.js+CI%22)
[![open issues](https://badgen.net/github/open-issues/highlightjs/highlight.js?label=issues)](https://github.com/highlightjs/highlight.js/issues)
[![help welcome issues](https://badgen.net/github/label-issues/highlightjs/highlight.js/help%20welcome/open)](https://github.com/highlightjs/highlight.js/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+welcome%22)
[![good first issue](https://badgen.net/github/label-issues/highlightjs/highlight.js/good%20first%20issue/open)](https://github.com/highlightjs/highlight.js/issues?q=is%3Aopen+is%3Aissue+label%3A%22beginner+friendly%22)
[![vulnerabilities](https://badgen.net/snyk/highlightjs/highlight.js)](https://snyk.io/test/github/highlightjs/highlight.js?targetFile=package.json)
<!-- [![Build CI](https://img.shields.io/github/workflow/status/highlightjs/highlight.js/Node.js%20CI)](https://github.com/highlightjs/highlight.js/actions?query=workflow%3A%22Node.js+CI%22) -->
<!-- [![commits since release](https://img.shields.io/github/commits-since/highlightjs/highlight.js/latest?label=commits+since)](https://github.com/highlightjs/highlight.js/commits/main) -->
<!-- [![](https://data.jsdelivr.com/v1/package/gh/highlightjs/cdn-release/badge?style=rounded)](https://www.jsdelivr.com/package/gh/highlightjs/cdn-release) -->
<!-- [![Total Lines](https://img.shields.io/tokei/lines/github/highlightjs/highlight.js)]() -->
<!-- [![npm bundle size (minified + gzip)](https://img.shields.io/bundlephobia/minzip/highlight.js.svg)](https://bundlephobia.com/result?p=highlight.js) -->
Highlight.js is a syntax highlighter written in JavaScript. It works in
the browser as well as on the server. It works with pretty much any
markup, doesn’t depend on any framework, and has automatic language
detection.
#### Upgrading to Version 10
Version 10 is one of the biggest releases in quite some time. If you're
upgrading from version 9, there are some breaking changes and things you may
want to double check first.
Please read [VERSION_10_UPGRADE.md](https://github.com/highlightjs/highlight.js/blob/main/VERSION_10_UPGRADE.md) for high-level summary of breaking changes and any actions you may need to take. See [VERSION_10_BREAKING_CHANGES.md](https://github.com/highlightjs/highlight.js/blob/main/VERSION_10_BREAKING_CHANGES.md) for a more detailed list and [CHANGES.md](https://github.com/highlightjs/highlight.js/blob/main/CHANGES.md) to learn what else is new.
##### Support for older versions
Please see [SECURITY.md](https://github.com/highlightjs/highlight.js/blob/main/SECURITY.md) for support information.
## Getting Started
The bare minimum for using highlight.js on a web page is linking to the
library along with one of the styles and calling [`highlightAll`][1]:
```html
<link rel="stylesheet" href="/path/to/styles/default.css">
<script src="/path/to/highlight.min.js"></script>
<script>hljs.highlightAll();</script>
```
This will find and highlight code inside of `<pre><code>` tags; it tries
to detect the language automatically. If automatic detection doesn’t
work for you, you can specify the language in the `class` attribute:
```html
<pre><code class="html">...</code></pre>
```
Classes may also be prefixed with either `language-` or `lang-`.
```html
<pre><code class="language-html">...</code></pre>
```
### Plaintext and Disabling Highlighting
To style arbitrary text like code, but without any highlighting, use the
`plaintext` class:
```html
<pre><code class="plaintext">...</code></pre>
```
To disable highlighting of a tag completely, use the `nohighlight` class:
```html
<pre><code class="nohighlight">...</code></pre>
```
### Supported Languages
Highlight.js supports over 180 different languages in the core library. There are also 3rd party
language plugins available for additional languages. You can find the full list of supported languages
in [SUPPORTED_LANGUAGES.md][9].
## Custom Scenarios
When you need a bit more control over the initialization of
highlight.js, you can use the [`highlightBlock`][3] and [`configure`][4]
functions. This allows you to better control *what* to highlight and *when*.
Here’s the equivalent of calling [`highlightAll`][1] using
only vanilla JS:
```js
document.addEventListener('DOMContentLoaded', (event) => {
document.querySelectorAll('pre code').forEach((block) => {
hljs.highlightBlock(block);
});
});
```
Please refer to the documentation for [`configure`][4] options.
### Using custom HTML elements for code blocks
We strongly recommend `<pre><code>` wrapping for code blocks. It's quite
semantic and "just works" out of the box with zero fiddling. It is possible to
use other HTML elements (or combos), but you may need to pay special attention to
preserving linebreaks.
Let's say your markup for code blocks uses divs:
```html
<div class='code'>...</div>
```
To highlight such blocks manually:
```js
// first, find all the div.code blocks
document.querySelectorAll('div.code').forEach(block => {
// then highlight each
hljs.highlightBlock(block);
});
```
Without using a tag that preserves linebreaks (like `pre`) you'll need some
additional CSS to help preserve them. You could also [pre and post-process line
breaks with a plug-in][brPlugin], but *we recommend using CSS*.
[brPlugin]: https://github.com/highlightjs/highlight.js/issues/2559
To preserve linebreaks inside a `div` using CSS:
```css
div.code {
white-space: pre;
}
```
## Using with Vue.js
Simply register the plugin with Vue:
```js
Vue.use(hljs.vuePlugin);
```
And you'll be provided with a `highlightjs` component for use
in your templates:
```html
<div id="app">
<!-- bind to a data property named `code` -->
<highlightjs autodetect :code="code" />
<!-- or literal code works as well -->
<highlightjs language='javascript' code="var x = 5;" />
</div>
```
## Web Workers
You can run highlighting inside a web worker to avoid freezing the browser
window while dealing with very big chunks of code.
In your main script:
```js
addEventListener('load', () => {
const code = document.querySelector('#code');
const worker = new Worker('worker.js');
worker.onmessage = (event) => { code.innerHTML = event.data; }
worker.postMessage(code.textContent);
});
```
In worker.js:
```js
onmessage = (event) => {
importScripts('<path>/highlight.min.js');
const result = self.hljs.highlightAuto(event.data);
postMessage(result.value);
};
```
## Node.js
You can use highlight.js with n
没有合适的资源?快使用搜索试试~ 我知道了~
资源推荐
资源详情
资源评论
收起资源包目录
毕业设计:基于ASP.NET的CMS系统.zip (668个子文件)
applicationhost.config 78KB
MyRuntimeViewCompiler.cs 18KB
Client.cs 14KB
RewriteUtil.cs 13KB
ThemeUtil.cs 9KB
PluginUtil.cs 7KB
DbStartup.cs 6KB
Util.cs 6KB
RazorPlugin.cs 5KB
ArticleService.cs 5KB
Struct.cs 5KB
MyViewCompiler.cs 5KB
PluginDialogService.cs 5KB
ArticleInstance.cs 4KB
IArticleService.cs 3KB
MyCompositeFileProvider.cs 3KB
IMenuService.cs 3KB
Array.cs 3KB
ArticleInstance.cs 3KB
Util.cs 3KB
MenuService.cs 3KB
ICommentService.cs 3KB
RewriteMiddleware.cs 3KB
Value.cs 3KB
CommentService.cs 3KB
SystemSettingsVm.cs 3KB
InstallValidator.cs 3KB
Startup.cs 3KB
AssemblyCache.cs 3KB
MenuTagHelper.cs 2KB
Login.razor.cs 2KB
UiConfigureOptions.cs 2KB
R.cs 2KB
ArticleService.cs 2KB
SettingsEntity.cs 2KB
ISettingsService.cs 2KB
ThemeExtensions.cs 2KB
ITagService.cs 2KB
IArticleService.cs 2KB
MyCompositeFileProvider.cs 2KB
MyRuntimeViewCompilerProvider.cs 2KB
MediaService.cs 2KB
ArticleEntity.cs 2KB
UIConfigureOptions.cs 2KB
ThemeStartup.cs 2KB
DefaultPlugin.cs 2KB
DateTimeValue.cs 2KB
ToolsController.cs 2KB
ResponsivePageMatcherPolicy.cs 2KB
WidgetCache.cs 2KB
Base64Data.cs 2KB
Service.cs 2KB
ClientOption.cs 2KB
ResponsivePageRouteModelConvention.cs 2KB
ThemeConfigService.cs 2KB
PageService.cs 2KB
RewriterModel.cs 2KB
CatalogService.cs 2KB
ArticleVm.cs 2KB
UserController.cs 2KB
IPageService.cs 2KB
IArticlePlugin.cs 2KB
ICatalogService.cs 2KB
IPluginService.cs 2KB
ParameterList.cs 2KB
TagService.cs 2KB
RewriteTemplate.cs 2KB
PluginService.cs 2KB
CommentEntity.cs 2KB
ThemeProvider.cs 2KB
ArchiveWidget.cs 2KB
PostInfo.cs 2KB
MenuUrlTagHelper.cs 2KB
AdminUserService.cs 2KB
BooleanValue.cs 2KB
PaginationService.cs 2KB
SettingsService.cs 2KB
IntegerValue.cs 2KB
Fault.cs 1KB
SidebarTagHelper.cs 1KB
ThemeSettings.cs 1KB
StringValue.cs 1KB
SettingsModel.cs 1KB
PostController.cs 1KB
DoubleValue.cs 1KB
MenuEntity.cs 1KB
DbConfig.cs 1KB
IPageService.cs 1KB
ModifyCatalogComponent.razor.cs 1KB
PageService.cs 1KB
TagController.cs 1KB
CatalogEntity.cs 1KB
CatalogController.cs 1KB
ImageController.cs 1KB
MenuAttribute.cs 1KB
TextWidget.cs 1KB
MethodResponse.cs 1KB
ISystemPlugin.cs 1KB
PageController.cs 1KB
Code.cs 1KB
共 668 条
- 1
- 2
- 3
- 4
- 5
- 6
- 7
资源评论
学术菜鸟小晨
- 粉丝: 1w+
- 资源: 5004
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功