Markdown Code Blocks in HTML

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: <link rel=”stylesheet” href=”style.css”&…


This content originally appeared on DEV Community and was authored by qui

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: <link rel="stylesheet" href="style.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 <style> tag

  • 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:

Screenshot

I changed background color manually.


This content originally appeared on DEV Community and was authored by qui


Print Share Comment Cite Upload Translate Updates
APA

qui | Sciencx (2024-06-24T07:18:52+00:00) Markdown Code Blocks in HTML. Retrieved from https://www.scien.cx/2024/06/24/markdown-code-blocks-in-html-2/

MLA
" » Markdown Code Blocks in HTML." qui | Sciencx - Monday June 24, 2024, https://www.scien.cx/2024/06/24/markdown-code-blocks-in-html-2/
HARVARD
qui | Sciencx Monday June 24, 2024 » Markdown Code Blocks in HTML., viewed ,<https://www.scien.cx/2024/06/24/markdown-code-blocks-in-html-2/>
VANCOUVER
qui | Sciencx - » Markdown Code Blocks in HTML. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/06/24/markdown-code-blocks-in-html-2/
CHICAGO
" » Markdown Code Blocks in HTML." qui | Sciencx - Accessed . https://www.scien.cx/2024/06/24/markdown-code-blocks-in-html-2/
IEEE
" » Markdown Code Blocks in HTML." qui | Sciencx [Online]. Available: https://www.scien.cx/2024/06/24/markdown-code-blocks-in-html-2/. [Accessed: ]
rf:citation
» Markdown Code Blocks in HTML | qui | Sciencx | https://www.scien.cx/2024/06/24/markdown-code-blocks-in-html-2/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts