Home  >  Article  >  Web Front-end  >  Markdown Code Blocks in HTML

Markdown Code Blocks in HTML

WBOY
WBOYOriginal
2024-07-17 16:05:371108browse

Hello! I love Markdown code blocks but in default, we don't have Markdown code blocks in HTML. We'll do it with CSS.

1. Adding CSS

1.1. Using Another file for CSS

  • Add this to your CSS:
  • And put this code in style.css:
.code {
    width: auto;
    max-width: 80%;
    background-color: #2d2d2d;
    color: #ffffff;
    border: 1px solid #444;
    border-radius: 8px;
    padding: 20px;
    margin: 0 auto;
    font-family: 'Courier New', Courier, monospace;
    font-size: 14px;
    line-height: 1.5;
    overflow-x: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
    margin-bottom: 15px;
}

.code pre {
    margin: 0;
}

.code code {
    display: block;
}

1.2. Using

  • Add this in the style tag:
.code {
    width: auto;
    max-width: 80%;
    background-color: #2d2d2d;
    color: #ffffff;
    border: 1px solid #444;
    border-radius: 8px;
    padding: 20px;
    margin: 0 auto;
    font-family: 'Courier New', Courier, monospace;
    font-size: 14px;
    line-height: 1.5;
    overflow-x: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
    margin-bottom: 15px;
}

.code pre {
    margin: 0;
}

.code code {
    display: block;
}

2. Using It

<p class="code">
   your text here
</p>

For example, I used it in my website: https://modvim.quitaxd.online/installation

If it isn't alive, I am giving a screenshot:

Markdown Code Blocks in HTML

I changed background color manually.

The above is the detailed content of Markdown Code Blocks in HTML. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn