首页 > 解决方案 > 如何在我的 Highlight.js 中添加更多语言

问题描述

根据代码示例,如何添加新语言,如 c#、php、java、sql 等。此示例由上个月回答我问题的人提供。我尝试添加新语言但无法正常工作。谢谢。

const container = document.querySelector('.container');

const removeTextNodes = el =>
   [...el.childNodes].forEach(child => child.nodeType !== 1 && el.removeChild(child))

const format = (text, language) => {
  switch (language) {
    case 'html': return html_beautify(text);
    case 'css': return css_beautify(text);
    case 'js': return js_beautify(text);
    default: return text;
  }
}

const preProcess = code => {
  removeTextNodes(code.closest('pre'));
  const language = [...code.classList].find(cls => /language-/.test(cls));
  const [ match, lang ] = language?.match(/language-(\w+)/);
  const content = code.innerHTML.trim();
  code.innerHTML = format(lang === 'html' ? _.escape(content) : content, lang);
};

const insertCode = (e) => {
  e.preventDefault();
  const content = e.target.elements.content.value.trim();
  const language = e.target.elements.language.value;
  if (content) {
    const formatted = format(content, language);
    const pre = document.createElement('pre');
    const code = document.createElement('code');
    code.classList.add(`language-${language}`, 'hljs');
    code.innerHTML = hljs.highlight(formatted, { language }).value;
    pre.append(code);
    container.prepend(pre);
  }
}

document.forms['add'].addEventListener('submit', insertCode);
document.querySelectorAll('code[class^="language-"]').forEach(preProcess);
hljs.highlightAll();

标签: javascriptjqueryhighlight.js

解决方案


推荐阅读