How to add a syntax-highlighted code block to a README.md file using raw HTML rather than MarkDown's fenced code blocks? #65381
Replies: 7 comments 1 reply
This comment was marked as off-topic.
This comment was marked as off-topic.
-
To expand on @talha4real's answer:Generally, you don't want to write non-markdown code in github README.md.It doesn't support css and js for security reasons. And support for html tags and attributes is very limited, again, for security reasons.
This fenced code block for example:```bash python==3.11 ``` would get compiled to:<div class="highlight highlight-source-shell notranslate position-relative overflow-auto" dir="auto">
<pre>python==3.11</pre>
<div class="zeroclipboard-container position-absolute right-0 top-0">
<clipboard-copy aria-label="Copy" class="ClipboardButton btn js-clipboard-copy m-2 p-0 tooltipped-no-delay" data-copy-feedback="Copied!" data-tooltip-direction="w" value="python==3.11" tabindex="0" role="button" style="display: inherit;">
<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-copy js-clipboard-copy-icon m-2">
<path d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z"></path>
<path d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path>
</svg>
<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-check js-clipboard-check-icon color-fg-success d-none m-2">
<path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"></path>
</svg>
</clipboard-copy>
</div>
</div> and rendered as:python==3.11 However, if you meant rendering markdown in another website and you want to mimic the syntax highlighting of github flavored markdown, then you can check out highlight.js website or their github page |
Beta Was this translation helpful? Give feedback.
-
A hidden feature: <pre lang=lisp>(trivial-toplevel-prompt:set-toplevel-prompt "~*~a~@[(~d)~]: ")
;; CL-USER(7):
</pre> (trivial-toplevel-prompt:set-toplevel-prompt "~*~a~@[(~d)~]: ")
;; CL-USER(7): |
Beta Was this translation helpful? Give feedback.
-
Is there anything that works out of the box for syntax highlighting shell commands in documentation markdown pages? |
Beta Was this translation helpful? Give feedback.
-
don't think so. or I'm doing it wrong. foo -a 3 --quiet |
Beta Was this translation helpful? Give feedback.
-
Yeah, there's not much sh highlights. No luck, I guess 🤷♂️
|
Beta Was this translation helpful? Give feedback.
-
Thanks anyway :-) |
Beta Was this translation helpful? Give feedback.
-
Select Topic Area
Question
Body
How can I add a syntax-highlighted code block to a README.md file using raw HTML rather than MarkDown's fenced code block?
I want to achieve the following effect:
using code similar to the following. (This is how you could do it in Replit, but it doesn't work in GitHub.)
Beta Was this translation helpful? Give feedback.
All reactions