symfony - 简单的管理包。Trix 编辑器。更改代码段的包装标签。->

Answer 1

我遇到了完全相同的问题，不幸的是我不知道如何更新 Trix 源代码以在 pre 元素中添加 code 元素并添加类。我在这里问了这个问题，我将打开一个问题，看看 Trix 的好人是否会考虑添加这个功能。

所以，我整理了一个小技巧，当我向用户展示它们时，它们会改变 pre 元素。代码如下所示：

const applyFormattingToPreBlocks = function () {
  const preElements = this.showPostBody.querySelector('.trix-content').querySelectorAll('pre');
  preElements.forEach(function(preElement) {
    const regex = /(?!lang\-\\w\*)lang-\w*\W*/gm;
    const codeElement = document.createElement('code'); 
    if (preElement.childNodes.length > 1) {
      console.error('<pre> element contained nested inline elements (probably styling) and could not be processed. Please remove them and try again.')
    }
    let preElementTextNode = preElement.removeChild(preElement.firstChild);
    let language = preElementTextNode.textContent.match(regex);
    if (language) {
      language = language[0].toString().trim();
      preElementTextNode.textContent = preElementTextNode.textContent.replace(language, '');
      codeElement.classList.add(language, 'line-numbers');
    }
    codeElement.append(preElementTextNode)
    preElement.append(codeElement)
  })
};

我还写了一篇博文，详细介绍了这段代码的作用。我使用 Rails 6，帖子中有一个格式示例。如果您有任何问题，请告诉我。