How to add a syntax-highlighted code block to a README.md file using raw HTML rather than MarkDown's fenced code blocks?

[ItaiBDalet]

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:

    public class MyFirstClass
    {
        public static void main(String ... args)
        {
            System.out.println("Hello, world!");
        }
    }

using code similar to the following. (This is how you could do it in Replit, but it doesn't work in GitHub.)

<pre>
  <code class="language-java">
    public class MyFirstClass
    {
        public static void main(String ... args)
        {
            System.out.println("Hello, world!");
        }
    }
  </code>
</pre>

[seyLu]

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.

• you can read more on:
  • Github discussion why css is not allowed
  • Allowed HTML tags in Github Markdown
  • Github Markdown official docs

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

[aartaka]

A hidden feature: <pre lang=LANG> worked for me:

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

[matanox]

Is there anything that works out of the box for syntax highlighting shell commands in documentation markdown pages?
Just for giving some color to command arguments, in avoiding one bland long gray line.

[aartaka]

sh?

[matanox]

don't think so. or I'm doing it wrong.

foo -a 3 --quiet

[aartaka]

Yeah, there's not much sh highlights. No luck, I guess 🤷‍♂️

[matanox]

Thanks anyway :-)