我正在使用 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;
}
正如您可能想象的那样,这就是我现在正在努力实现的目标。我想在整个代码区域添加一些填充、边框和颜色,不仅仅是文本,我希望它看起来更像这样,但老实说,无论我尝试什么 - 它都不起作用......任何想法如何解决这个问题?
答案 0 :(得分: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>
答案 1 :(得分:0)
与大多数降价处理器一样,Marked 将代码块呈现为 <code>
标签在 <pre>
标签内。我认为您应该设置 <pre>
标签的样式,例如像这样:
pre {
background-color: #eee;
padding: 1em;
border: 1px solid black;
}
当然,如果您在其他地方使用 <pre>
标签,您可能需要更具体地使用您的选择器。
答案 2 :(得分:0)
向 <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>