pre标签展示代码块

pre样式

添加背景色、边框、以及调整了字体大小。

pre
{
border: 1px solid #999;
page-break-inside: avoid;
display: block;
padding: 3px 3px 2px;
margin: 0 0 10px;
font-size: 13px;
line-height: 20px;
word-break: break-all;
word-wrap: break-word;
/* white-space: pre; */
/* white-space: pre-wrap; */
background-color: #f5f5f5;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, 0.15);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
font-size: 12px;
color: #333333;
}

首行缩进问题解决

将代码块与标签放在同一行，换行会出现首行缩进的情况，如图

代码示例如下

<pre>{{ componentProps.redundantFields }}pre>

• 调整后展示效果如下