jekyll使用highlight.js对代码块进行高亮

// 找到没有任何类的<pre>元素
let preWithoutLanguages = [];
let allPres = document.querySelectorAll(".post-content pre");
allPres.forEach((pre) => {
  if (pre.classList.length === 0) {
    preWithoutLanguages.push(pre);
  }
});
// 为这些<pre>元素外层添加一个.highlighter-rouge的div
preWithoutLanguages.forEach((pre) => {
  // 先看看它的<code>元素是否有language-开头的class
  let language = Array.from(
    pre.getElementsByTagName("code")[0].classList
  ).find((c) => c.startsWith("language-"));
  if (!language) {
    language = "language-plaintext";
  }
  let div = document.createElement("div");
  div.classList.add("highlighter-rouge");
  div.classList.add(language);
  // 内层还有一层div
  let innerDiv = document.createElement("div");
  innerDiv.classList.add("highlight");
  div.appendChild(innerDiv);
  pre.parentNode.insertBefore(div, pre);
  innerDiv.appendChild(pre);
});

let preContainers = document.querySelectorAll(
  ".post-content div.highlighter-rouge"
);
let codeDataList = [];
let codeList = [];
preContainers.forEach((preContainer) => {
  // 从自身的class列表中提取语言类别, language-开头的class
  let language = Array.from(preContainer.classList).find((c) =>
    c.startsWith("language-")
  );
  if (!language) {
    language = "plaintext";
  }
  let code = preContainer.getElementsByTagName("code")[0];
  code.classList.add(`language-${language.replace("language-", "")}`);
});
// 代码高亮
hljs.highlightAll();

// worker.js
onmessage = (event) => {
  importScripts("/assets/js/highlight/highlight.min.js");
  const result = [];
  event.data.forEach((codeData) => {
    let language = codeData.language;
    // 如果语言类型不在 highlight.js 支持的语言列表中，则使用 plaintext
    if (self.hljs.getLanguage(language) === undefined) {
      language = "plaintext";
    }
    result.push(
      self.hljs.highlight(codeData.code, { language: language }).value
    );
  });
  postMessage(result);
};

// 用上一步中的代码获取到的 preContainers
preContainers.forEach((preContainer) => {
  // ...
  let code = preContainer.getElementsByTagName("code")[0];
  codeDataList.push({
    language: language.replace("language-", ""),
    code: code.textContent,
  });
  codeList.push(code);
});
worker.onmessage = (event) => {
codeList.forEach((code, i) => {
  code.innerHTML = event.data[i];
});
};
worker.postMessage(codeDataList);

// 放在之前 web worker 的 onmessage 事件中
codeList.forEach((code, i) => {
  code.innerHTML = event.data[i];
  // ... other code
  // 显示语言类别
  let codeHeader =
    `<div class="code-header">` +
    `<span class="language">${codeDataList[i].language}</span> | ` +
    `<span class="change-wrap-btn"><i class="fa fa-rotate-right"></i>自动换行</span> | ` +
    `<span class="copy-btn"><i class="fa fa-copy"></i>复制</span>` +
    `</div>`;
  // 通过 insertAdjacentHTML 在代码块前面插入代码块头部
  code.parentNode.insertAdjacentHTML("afterbegin", codeHeader);
});
// 默认隐藏顶部按钮，鼠标放在代码块上时显示
preContainers.forEach((preContainer) => {
  const codeHeader = preContainer.querySelector(".code-header");
  codeHeader.classList.add("hidden");
  preContainer.onmouseover = () => {
    codeHeader.classList.remove("hidden");
  }
  preContainer.onmouseleave = () => {
    codeHeader.classList.add("hidden");
  }
});

document.querySelectorAll(".copy-btn").forEach(copyBtn => {
  copyBtn.onclick = () => {
    let parent = copyBtn.parentNode.parentNode;
    let codeTable = parent.querySelector(".hljs-ln tbody");
    let codeRows = codeTable.querySelectorAll("tr");
    let text = "";
    codeRows.forEach((row) => {
      // 忽略行号, 直接找.hljs-ln-code元素
      let code = row.querySelector(".hljs-ln-code");
      text += code.textContent + "\n";
    });
    copyText(text);
  }
});

function copyText(text) {
  if (navigator.clipboard) {
    // clipboard api 复制
    navigator.clipboard.writeText(text);
  } else {
    var textarea = document.createElement("textarea");
    document.body.appendChild(textarea);
    // 隐藏此输入框
    textarea.style.position = "fixed";
    textarea.style.clip = "rect(0 0 0 0)";
    textarea.style.top = "10px";
    // 赋值
    textarea.value = text;
    // 选中
    textarea.select();
    // 复制
    document.execCommand("copy", true);
    // 移除输入框
    document.body.removeChild(textarea);
  }
}

document.querySelectorAll(".change-wrap-btn").forEach((changeWrapBtn, i) => {
  changeWrapBtn.onclick = () => {
    const pre = changeWrapBtn.parentNode.parentNode;
    const code = pre.getElementsByTagName("code")[0];
    code.classList.toggle("wrap");
  }
});