代码框样式

段落中内嵌小代码

段内内嵌小代码用 code class=”inline” 实现，中蓝灰底色，白字：

有时候，您希望某些内容根据它在文档中的位置而有所不同。这里有很多选择器可以为您提供帮助，但现在我们只介绍几个选择器。在我们的文档中有两个<em>元素 ——一个在段落内，另一个在列表项内。仅选择嵌套在<li>元素内的<em>我们可以使用一个称为包含选择符的选择器，它只是单纯地在两个选择器之间加上一个空格。

独立代码框

用 pre class=”wp-block-code” 并列 code 实现，同样中蓝灰底色，白字，预设最大高度260，代码超过这个范围就自动出现滚动条。暂定边框有细微内嵌风格。

tt,
kbd,
pre,
code {
  font-family: "Andale Mono", AndaleMono, Consolas, Monaco, monospace;
  color: #859093;
  border: 1px solid #f3f4f5;
  padding: 1px 3px;
  padding: 0.0625rem 0.1875rem;
  word-spacing: -1px;
  word-spacing: -0.0625rem;
}
.wp-block-code {
  background: #9fb0b5;
	border: 2px solid #d8e4e8;
	border-style: inset;
	border-radius: 0px;
	padding: 0px;
	width: 90%;
	max-height: 260px;
	margin: 0 auto;
}

代码所需高度少于260的边框高度自动变小。

code {
	color: white;
	margin: 10px;
	line-height: 1.5;
}

有时候，您希望某些内容根据它在文档中的位置而有所不同。这里有很多选择器可以为您提供帮助，但现在我们只介绍几个选择器。在我们的文档中有两个<em>元素 ——一个在段落内，另一个在列表项内。仅选择嵌套在<li>元素内的<em>我们可以使用一个称为包含选择符的选择器，它只是单纯地在两个选择器之间加上一个空格。

ul无序列表和ol有序列表

这是列表A，ul无序列表：

• 这是列表第一行
• 这是列表第2行
• 这是列表第III行

无序列表结束。这是列表B，ol有序列表：

1. 这是列表第一行
2. 这是列表第2行
3. 这是列表第III行

有序列表结束。

· 上页 ·