Markdown 代码样式 - 为整个部分着色，而不仅仅是文本

Question

我正在使用 marked 创建简单的 Markdown 编辑器，并且我想向代码块添加一些额外的样式。 这是现在的样子

这是我当前的代码

<div class="container">
  <div class="card markdown-wrapper">
    <textarea class="editor" v-model="input" @input="update"></textarea>
    <div class="preview" v-html="compiledMarkdown"></div>
  </div>
</div>

.markdown-wrapper {
  min-height: 65vw;
  display: flex;
}

.editor {
  border: none;
  border-right: 1px solid lightgray;
  resize: none;
  outline: none;
  background-color: #f6f6f6;
  padding: 1rem;
  width: 50%;
}

.preview {
  padding: 0 1rem;
  width: 50%;
  word-break: break-all;
}

code {
  background-color: lightgray;
}

正如您可能想象的那样，这就是我现在正在努力实现的目标。我想在整个代码区域添加一些填充、边框和颜色，不仅仅是文本，我希望它看起来更像这样，但老实说，无论我尝试什么 - 它都不起作用......任何想法如何解决这个问题？

Answer 1

<code> 是内联级元素。内联元素不会从新行开始，并且只占用必要的宽度。

您需要将 <code> 的显示更改为 inline-block。

---

内联块

<块引用>

元素生成一个块元素框，将流过 周围的内容就好像它是一个单独的内联框（行为很多 就像被替换的元素一样）。 https://developer.mozilla.org

code {
  display: inline-block;
  background-color: lightgray;
}

---

示例

const c = document.getElementById('example').innerHTML;
document.getElementById('example').innerHTML = marked(c);

code {
    display: inline-block;
    background: lightgray;
    border: 1px solid;
    padding: 15px;
}

<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<div id="example">
  ```
  var s = "Code Example";
  alert(s);
  ```
</div>

Answer 2

与大多数降价处理器一样，Marked 将代码块呈现为 <code> 标签在 <pre> 标签内。我认为您应该设置 <pre> 标签的样式，例如像这样：

pre {
  background-color: #eee;
  padding: 1em;
  border: 1px solid black;
}

当然，如果您在其他地方使用 <pre> 标签，您可能需要更具体地使用您的选择器。

Answer 3

向 <pre><code></code></pre> 元素添加一些自定义 css：

const c = document.getElementById('content').innerHTML;
document.getElementById('content').innerHTML = marked(c);

pre {
    background: #f6f6f6;
    border: 1px solid lightgrey;
    width: fit-content;
    padding: 10px;
}

<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<div id="content">
  ## Marked.js
  ### CodeBlock styling Example
  ```
  const test = 123;
  console.log(test);
  ```
  <sub>[Marked.js Github](https://github.com/markedjs/marked)</sub>
  
</div>