正文

如何用JavaScript实现只加载可见区域的代码高亮

/0 浏览量
0704

在网页开发中，代码高亮是一个常见的功能，它可以帮助用户更好地阅读和理解代码。然而，如果页面包含大量的代码，一次性加载所有代码的高亮可能会影响页面的加载速度和性能。因此，只加载可见区域的代码高亮就变得尤为重要。以下是如何使用JavaScript实现这一功能的详细步骤。

1. 选择合适的代码高亮库

首先，你需要选择一个合适的代码高亮库。这里推荐使用Prism.js，因为它轻量级且易于使用。

<!-- 引入Prism.js -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/themes/prism.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/prism.min.js"></script>

2. 标记代码块

在HTML中，你需要为需要高亮的代码块添加<pre>和<code>标签，并使用data-line属性来标记每一行的行号。

<pre class="language-js">
  <code data-line="1">function helloWorld() {</code>
  <code data-line="2">  console.log("Hello, World!");</code>
  <code data-line="3">}</code>
</pre>

3. 监听滚动事件

接下来，你需要监听滚动事件，以便在用户滚动页面时动态地加载可见区域的代码高亮。

window.addEventListener('scroll', highlightVisibleLines);

4. 计算可见区域

在highlightVisibleLines函数中，首先计算可见区域的高度和顶部位置。

function getVisibleRegion() {
  const headerHeight = document.querySelector('header').offsetHeight;
  const footerHeight = document.querySelector('footer').offsetHeight;
  const windowHeight = window.innerHeight;
  const scrollTop = window.pageYOffset || document.documentElement.scrollTop;

  return {
    top: scrollTop + headerHeight,
    bottom: scrollTop + windowHeight + headerHeight + footerHeight
  };
}

5. 获取可见行

然后，根据可见区域的位置，获取所有可见的行。

function getVisibleLines(preElement) {
  const visibleRegion = getVisibleRegion();
  const lines = [];
  let lastLine = 0;

  Array.from(preElement.children).forEach((codeElement, index) => {
    const line = parseInt(codeElement.getAttribute('data-line'), 10);
    if (line >= lastLine && line <= visibleRegion.bottom) {
      lines.push(line);
      lastLine = line;
    }
  });

  return lines;
}

6. 高亮可见行

最后，使用Prism.js的highlightAll方法来高亮可见行。

function highlightVisibleLines() {
  const preElements = document.querySelectorAll('pre');
  preElements.forEach(preElement => {
    const visibleLines = getVisibleLines(preElement);
    Prism.highlightAllUnder(preElement, visibleLines);
  });
}

7. 初始化高亮

在页面加载完成后，调用highlightVisibleLines函数来初始化代码高亮。

document.addEventListener('DOMContentLoaded', highlightVisibleLines);

通过以上步骤，你就可以实现只加载可见区域的代码高亮功能了。这样，用户在滚动页面时，只有可见区域的代码会被高亮显示，从而提高页面的性能和用户体验。

-- 展开阅读全文 --