如何识别“markdown”命令生成的内联级别“<code>”与块级别“<code>”

Question

我正在尝试从 Markdown 文件生成网页。此示例生成所需的网页视觉呈现：

header.html

<!DOCTYPE html>
<html>
  <head>
  <style>
code {
  display: block;
  white-space: pre;
  padding: 20px;
  line-height: 125%;
  background: #eee;
  border: 1px solid #ccc;
  margin: 1em 0;
}
p:nth-of-type(1) code {
  display: inline-block;
  padding: 0;
  color: red;
}
  </style>
  </head>
  <body>

body.md

Assuming you have the IP `1.1.1.1` or `2.2.2.2`, then execute the following:

```
echo "hello world";
echo "another command here";
echo "you are done";
```

footer.html

</body>
</html>

当我运行命令时：

apt-get install markdown;
markdown body.md > body.html;
cat header.html body.html footer.html > index.html;

我在网络浏览器中看到这个：

这正是我想看到的！

但是，我想删除

p:nth-of-type(1) code

规则，因为我不想编写自定义 CSS 选择器来定位每个内联

<code>

块。我有数千页 Markdown 文档需要转换为 html。手动逐页浏览来找出哪个

<code>

块是内联的以及哪个是块级元素太耗时了。

有没有更简单的方法

a) 编写一个针对

p>code

的 CSS 选择器，当且仅当

有且仅有一个子元素，并且该子元素属于元素类型

code

或 b) 告诉

markdown

命令将 css 类添加到

<code>

元素

的方法

或者c）完全不同的东西让我编写一个通用的CSS规则来定位内联代码元素与块级代码元素？

Answer 1

a) 编写一个以 p>code 为目标的 CSS 选择器，当且仅当 p 有一个且仅有一个子元素，并且该子元素的元素类型为 code

您正在寻找的是伪类

:only-child

您想要的选择器就是

p > code:only-child

。

如何识别“markdown”命令生成的内联级别“<code>”与块级别“<code>”

问题描述投票：0回答：1

1个回答

最新问题

如何识别“markdown”命令生成的内联级别“<code>”与块级别“<code>”

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1