17

Are there any libraries that will allow me to display code in <pre> tags and highlight the syntax according to the language? I'm imagining something like this:

<pre class="python">
class MyClass:
    """A simple example class"""
    i = 12345
    def f(self):
        return 'hello world'
</pre>

...where the CSS for pre.python would highlight the Python code appropriately.

Does something like this exist?

Improve this question

5 Answers 5

Reset to default
20

There's SyntaxHighlighter:

<pre class="brush: python">
   # python code here
</pre>

There's also highlight.js which has the option of automatically detecting the syntax and highlighting it appropriately; however, you would need to use both <pre><code> tags to wrap your code.

If you're looking for a server-side example, there's GeSHi or Pygments for Python.

Improve this answer
2
  • You don't need to use <pre><code> with highlight.js, you can use any markup you want. <pre><code> is just a default (and an HTML5 recommendation, FWIW)
    – isagalaev
    Commented Jun 8, 2012 at 6:03
  • Jumping onto the last comment, you can do this with code like the following: ``` document.addEventListener('DOMContentLoaded', (event) => { document.querySelectorAll('pre').forEach((el) => { hljs.highlightElement(el); }); }); ``` See "custom usage" at highlightjs.org/usage
    – Mark Shust at M.academy
    Commented Jul 16, 2021 at 15:23
6

I prefer highlight.js. It supports 112 languages.

Preview your page with this code injection from the browser console:

// Highlight 22 popular code types. TODO: Inline for speed and security.
function loadjscssfile(filename, filetype){  // http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml
    if(filetype=="js"){
        var fileref=document.createElement('script')
        fileref.setAttribute("type","text/javascript")
        fileref.setAttribute("src", filename)
    }
    else if(filetype=="css"){
        var fileref=document.createElement("link")
        fileref.setAttribute("rel", "stylesheet")
        fileref.setAttribute("type", "text/css")
        fileref.setAttribute("href", filename)
    }
    if(typeof fileref!="undefined") document.getElementsByTagName("head")[0].appendChild(fileref)
}
loadjscssfile("//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/styles/vs.min.css", "css")
loadjscssfile("//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/highlight.min.js", "js")
setTimeout("var a = document.querySelectorAll('.code'); for(var i=0; i < a.length; ++i) hljs.highlightBlock(a[i])", 600)
Improve this answer
1
  • Tried the preview - Awesome! I couldn't find an option for dark-mode, but this dracula.css does the job quite nicely.
    – s3c
    Commented Nov 24, 2020 at 9:59
1

First Download or Using CDN

    <link rel="stylesheet" href="{{asset("assets/css/prism.css")}}">
    <link rel="stylesheet" href="{{asset("assets/css/prism-unescaped-markup.min.css")}}">

<script src="{{asset("assets/js/prism.js")}}"></script>
<script src="{{asset("assets/js/prism-unescaped-markup.min.js")}}"></script>

With HTML only

<script type="text/plain" class="language-markup">
<!DOCTYPE html>
<html>
  <head>
    <title>Hello World!</title>
  </head>
  <body>
    <p>This text should be syntax highlighted.</p>
    <p>Lorem ipsum dolor sit amet.</p>
  </body>
</html>
</script>

With Any

<code class="language-css">
   p { color: red }
</code>
Improve this answer
1
  • Unsure, but {{ and }} is likely not meant to be in there, and the <!DOCTYPE html> doesn't seem to work inside the <script>
    – W D
    Commented May 2, 2023 at 9:26
0

Not sure if this is what you're after, but when I want syntax-highlighted code blocks in a document, I write the document in Pandoc-Markdown, then use Pandoc to process the doc into html.

You get the highlighted code block using pandoc-markdown syntax like this:

~~~{.python}
class MyClass:
    """A simple example class"""
    i = 12345
    def f(self):
        return 'hello world'
~~~
Improve this answer
0

Yes. You can use SyntaxHighlighter. It's easy to use, exactly the thing you need. Just add the code tag in your pre block.

It highlights about 23 languages including Python.

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.