vue官网的展示代码是怎么利用highlight.js处理的

Vue.js 官网使用了 highlight.js 库来处理代码高亮。在 Vue.js 官网中，你可以看到在每个代码块的上方都有一个选择语言的下拉框，这个下拉框可以让你为你的代码块选择不同的语言，例如 HTML、CSS、JavaScript 等。

Vue.js 官网使用 highlight.js 来实现这个功能，具体步骤如下：

1. 引入 highlight.js 库和对应的样式文件：

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.4.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.4.0/highlight.min.js"></script>

2. 在页面加载时将所有代码块进行高亮处理：

document.addEventListener('DOMContentLoaded', (event) => {
  document.querySelectorAll('pre code').forEach((block) => {
    hljs.highlightBlock(block);
  });
});

3. 监听下拉框的变化，为选中的代码块重新设置语言：

document.addEventListener('DOMContentLoaded', (event) => {
  document.querySelectorAll('pre code').forEach((block) => {
    hljs.highlightBlock(block);
  });

  document.querySelectorAll('.language-selector').forEach((select) => {
    select.addEventListener('change', (event) => {
      const codeBlock = event.target.closest('.code-block').querySelector('pre code');
      codeBlock.className = `language-${event.target.value}`;
      hljs.highlightBlock(codeBlock);
    });
  });
});

其中，第一步是引入 highlight.js 库和对应的样式文件；第二步是在页面加载时将所有代码块进行高亮处理；第三步是监听下拉框的变化，为选中的代码块重新设置语言，并重新进行高亮处理。