Search code examples
htmlcssmarkdown

how to identify inline level `<code>` vs. block level `<code>` generated by the `markdown` command

I'm trying to generate web pages from markdown files. This example produces the desired visual presentation of a web page:

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>

When I run the commands:

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

I see this in my web browser:

enter image description here

This is exactly what I want to see!

However, I want to delete the p:nth-of-type(1) code rule because I do not want to write custom CSS selectors to target every single inline <code> block. I have thousands of pages of markdown documents to convert to html. Manually going through page by page to pick out which <code> block is inline and which is a block level element is too time consuming.

Is there an easier way to either

a) write a CSS selector that targets p>code if and only if the p has one and only one child element and that one child element is of element type code

or b) a way to tell the markdown command to add a css class to <code> element

or c) something completely different to let me write a generic css rule to target inline code elements vs block level code elements?

Solution

  • a) write a CSS selector that targets p>code if and only if the p has one and only one child element and that one child element is of element type code

    What you are looking for is the pseudo-class :only-child

    Your desired selector is simply p > code:only-child.