Search code examples
htmlgithubmarkdowngithub-flavored-markdown

How to turn multiple small code blocks into one large one in Github Flavored Markdown

I have a piece of text that I would like to be inside a code block, but that also contains styling (specifically the tag for a strikethrough effect). The solution I tried is this rather messy approach.

<code><strike>Ꭷ</strike> - Ų</code><br>
<code><strike>Ꮽ</strike> - Ą̊</code><br>
<code><strike>ϑ</strike> - Ą</code><br>
<code><strike>ϱ</strike> - Ę</code><br>
<code><strike>⎲</strike> - Į</code><br>
<code><strike>🝥</strike> - Y̨</code>

But, since this is html the code blocks end up looking like this

and it's no better if I only have one large <code> block; all that does is introduce sharp corners instead of rounded ones.

This is what I would like it to look like--one large, continuous, and full-width code block. However, I'm not sure if or how I can have strikethrough text within a code block like this. enter image description here I know Github flavored markdown is rather limited, at least compared to full HTML + CSS, but considering that they now support some amount of HTML and inline styles, I'd like to ask if there is any way I can achieve what I'm seeking to do. Any and all ideas are much appreciated, but I'm not getting my hopes up.

Thank you all

Solution

  • You can make use of <pre> tag instead of <code> tag like so:

    <pre>
<strike>Ꭷ</strike> - Ų
<strike>Ꮽ</strike> - Ą̊
<strike>ϑ</strike> - Ą
<strike>ϱ</strike> - Ę
<strike>⎲</strike> - Į
<strike>🝥</strike> - Y̨
</pre>

    More info about <pre> tag: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/pre