highlight.js 库介绍

库的基本信息

// highlight.js 是一个流行的代码高亮库
// 官方仓库：https://github.com/highlightjs/highlight.js
// npm 包：highlight.js

// 安装命令
npm install highlight.js
// 或
yarn add highlight.js

// 主要功能：
// - 支持 190+ 种编程语言
// - 提供 90+ 种样式主题
// - 自动语言检测
// - 轻量级，无依赖

使用场景

// 1. 博客/文档网站的代码高亮
// 2. 代码编辑器的预览功能
// 3. 在线代码演示工具
// 4. 技术文档系统

// 示例：知名项目使用 highlight.js
// - Vue.js 官方文档
// - React 官方文档
// - Stack Overflow
// - GitHub Gist

1. 代码示例

import hljs from 'highlight.js/lib/core'

这行代码是 按需导入 highlight.js 的核心功能，这是一种优化策略。

1.1 导入路径解析

highlight.js/
├── lib/                    # 编译后的代码
│   ├── core.js            # 核心功能（无语言支持）
│   ├── languages/         # 各种语言定义
│   └── styles/           # 样式文件
└── es/                   # ES6 模块版本

2. 与完整导入的区别

2.1 完整导入（不推荐）

// ❌ 导入整个库（包含所有语言，体积大）
import hljs from 'highlight.js'
// 文件大小：~400KB+（包含所有语言）

// 使用方式
hljs.highlightAll()  // 自动检测并高亮所有代码块

2.2 按需导入（推荐）

// ✅ 只导入核心功能
import hljs from 'highlight.js/lib/core'
// 文件大小：~20KB（仅核心）

// 然后按需导入需要的语言
import javascript from 'highlight.js/lib/languages/javascript'
import python from 'highlight.js/lib/languages/python'
import css from 'highlight.js/lib/languages/css'

// 注册需要的语言
hljs.registerLanguage('javascript', javascript)
hljs.registerLanguage('python', python)
hljs.registerLanguage('css', css)

3. 完整的配置示例

3.1 基础配置

// highlight.js 配置
import hljs from 'highlight.js/lib/core'

// 按需导入语言
import javascript from 'highlight.js/lib/languages/javascript'
import typescript from 'highlight.js/lib/languages/typescript'
import python from 'highlight.js/lib/languages/python'
import java from 'highlight.js/lib/languages/java'
import css from 'highlight.js/lib/languages/css'
import scss from 'highlight.js/lib/languages/scss'
import xml from 'highlight.js/lib/languages/xml'
import json from 'highlight.js/lib/languages/json'
import bash from 'highlight.js/lib/languages/bash'
import sql from 'highlight.js/lib/languages/sql'

// 注册语言
hljs.registerLanguage('javascript', javascript)
hljs.registerLanguage('typescript', typescript)
hljs.registerLanguage('python', python)
hljs.registerLanguage('java', java)
hljs.registerLanguage('css', css)
hljs.registerLanguage('scss', scss)
hljs.registerLanguage('xml', xml)
hljs.registerLanguage('html', xml)  // HTML 使用 XML 高亮
hljs.registerLanguage('json', json)
hljs.registerLanguage('bash', bash)
hljs.registerLanguage('sql', sql)

export default hljs

3.2 在 Vue 组件中使用

<template>
  <div>
    <pre><code class="language-javascript" ref="codeBlock">{{ code }}</code></pre>
    <button @click="highlightCode">高亮代码</button>
  </div>
</template>

<script>
import hljs from '@/utils/highlight'  // 导入配置好的 hljs 实例

export default {
  data() {
    return {
      code: `function hello() {
  console.log('Hello, world!');
  return 42;
}`
    }
  },
  methods: {
    highlightCode() {
      // 手动高亮代码块
      this.$nextTick(() => {
        const codeBlock = this.$refs.codeBlock
        hljs.highlightElement(codeBlock)
      })
    }
  },
  mounted() {
    this.highlightCode()
  }
}
</script>

<style>
@import 'highlight.js/styles/github.css';  /* 导入样式 */
</style>

4. 自动高亮配置

4.1 全局自动高亮

// main.js 或 highlight.js 配置文件
import hljs from 'highlight.js/lib/core'

// ... 导入和注册语言（同上）

// 配置 highlight.js
hljs.configure({
  tabReplace: '  ',       // 替换 TAB
  classPrefix: 'hljs-',   // CSS 类前缀
  languages: ['javascript', 'typescript', 'python', 'css'] // 检测的语言
})

// 自动高亮所有 <code> 标签
document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('pre code').forEach((block) => {
    hljs.highlightElement(block)
  })
})

export default hljs

4.2 Vue 指令封装

// directives/highlight.js
import hljs from '@/utils/highlight'

export const highlightDirective = {
  inserted(el, binding) {
    const code = el.textContent
    const language = binding.arg || 'plaintext'

    if (hljs.getLanguage(language)) {
      const highlighted = hljs.highlight(code, { language })
      el.innerHTML = highlighted.value
    }
  },

  componentUpdated(el, binding) {
    // 代码更新时重新高亮
    const code = el.textContent
    const language = binding.arg || 'plaintext'

    if (hljs.getLanguage(language)) {
      const highlighted = hljs.highlight(code, { language })
      el.innerHTML = highlighted.value
    }
  }
}

// 全局注册指令
import Vue from 'vue'
Vue.directive('highlight', highlightDirective)

<!-- 在组件中使用 -->
<template>
  <pre v-highlight:javascript>
    <code>{{ code }}</code>
  </pre>
</template>

5. 支持的语言列表

5.1 常用语言导入

// 前端开发常用语言
import javascript from 'highlight.js/lib/languages/javascript'
import typescript from 'highlight.js/lib/languages/typescript'
import css from 'highlight.js/lib/languages/css'
import scss from 'highlight.js/lib/languages/scss'
import xml from 'highlight.js/lib/languages/xml'        // HTML, XML
import json from 'highlight.js/lib/languages/json'
import bash from 'highlight.js/lib/languages/bash'
import yaml from 'highlight.js/lib/languages/yaml'
import markdown from 'highlight.js/lib/languages/markdown'

// 后端语言
import python from 'highlight.js/lib/languages/python'
import java from 'highlight.js/lib/languages/java'
import php from 'highlight.js/lib/languages/php'
import sql from 'highlight.js/lib/languages/sql'
import go from 'highlight.js/lib/languages/go'
import rust from 'highlight.js/lib/languages/rust'

// 配置语言
import nginx from 'highlight.js/lib/languages/nginx'
import dockerfile from 'highlight.js/lib/languages/dockerfile'

6. 样式主题配置

6.1 按需导入样式

// 只导入需要的样式
import 'highlight.js/styles/github.css'          // GitHub 风格
// 或者
import 'highlight.js/styles/vs2015.css'         // VS2015 风格
import 'highlight.js/styles/atom-one-dark.css'  // Atom Dark 风格

6.2 样式选择示例

/* github.css - 亮色主题 */
/* vs2015.css - 深色主题 */  
/* atom-one-dark.css - 流行的深色主题 */
/* monokai-sublime.css - Monokai 风格 */
/* solarized-light.css - Solarized 亮色 */

7. 性能优化建议

7.1 动态导入（进一步优化）

// 动态导入语言（按需加载）
async function highlightCode(code, language) {
  // 动态导入语言
  const langModule = await import(`highlight.js/lib/languages/${language}`)
  const hljs = await import('highlight.js/lib/core')

  hljs.registerLanguage(language, langModule.default)

  return hljs.highlight(code, { language }).value
}

// 使用
highlightCode('console.log("hello")', 'javascript')
  .then(html => {
    document.getElementById('code').innerHTML = html
  })

7.2 构建优化

// vite.config.js (Vite)
export default {
  build: {
    rollupOptions: {
      external: ['highlight.js'] // 外部化依赖
    }
  }
}

// webpack.config.js (Webpack)
module.exports = {
  externals: {
    'highlight.js': 'hljs'
  }
}

8. 完整实用示例

8.1 代码高亮组件

<template>
  <div class="code-highlighter">
    <div class="code-header">
      <span class="language-label">{{ language }}</span>
      <button @click="copyCode" class="copy-btn">复制</button>
    </div>
    <pre><code :class="`language-${language}`" ref="codeElement">{{ code }}</code></pre>
  </div>
</template>

<script>
import hljs from '@/utils/highlight'  // 配置好的 hljs 实例

export default {
  name: 'CodeHighlighter',
  props: {
    code: {
      type: String,
      required: true
    },
    language: {
      type: String,
      default: 'javascript'
    }
  },
  methods: {
    highlight() {
      this.$nextTick(() => {
        const codeElement = this.$refs.codeElement
        if (codeElement) {
          hljs.highlightElement(codeElement)
        }
      })
    },

    async copyCode() {
      try {
        await navigator.clipboard.writeText(this.code)
        alert('代码已复制到剪贴板！')
      } catch (err) {
        console.error('复制失败:', err)
      }
    }
  },
  watch: {
    code() {
      this.highlight()
    },
    language() {
      this.highlight()
    }
  },
  mounted() {
    this.highlight()
  }
}
</script>

<style scoped>
.code-highlighter {
  border: 1px solid #e1e4e8;
  border-radius: 6px;
  margin: 16px 0;
}

.code-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 16px;
  background: #f6f8fa;
  border-bottom: 1px solid #e1e4e8;
}

.language-label {
  font-size: 12px;
  color: #586069;
  text-transform: uppercase;
}

.copy-btn {
  background: #fff;
  border: 1px solid #d1d5da;
  border-radius: 3px;
  padding: 3px 12px;
  font-size: 12px;
  cursor: pointer;
}

.copy-btn:hover {
  background: #f3f4f6;
}

pre {
  margin: 0;
  padding: 16px;
  overflow: auto;
  background: white;
}

code {
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 14px;
}
</style>

总结

import hljs from 'highlight.js/lib/core' 的作用：

1. 按需加载：只导入核心功能，减少打包体积
2. 性能优化：避免包含所有语言的庞大体积
3. 灵活配置：可以精确控制需要支持的语言
4. Tree Shaking：支持现代构建工具的摇树优化

最佳实践：

• 在项目中创建统一的 highlight.js 配置文件
• 按需导入实际使用的语言
• 封装成 Vue 组件或指令便于使用
• 选择合适的代码样式主题