Подсветка синтаксиса в тегах ‹pre›

Существуют ли какие-либо библиотеки, которые позволят мне отображать код в тегах <pre> и подсвечивать синтаксис в соответствии с языком? Я представляю что-то вроде этого:

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

...где CSS для pre.python соответствующим образом выделял код Python.

Существует ли что-то подобное?


python html css pre syntax-highlighting
person Joe Mornin    schedule 09.05.2012    source источник

Ответы (4)


arrow_upward
16
arrow_downward

Есть SyntaxHighlighter:

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

Существует также highlight.js, который имеет возможность автоматически определять синтаксис и подсвечивать его соответствующим образом; однако вам нужно будет использовать оба тега <pre><code> для переноса кода.

Если вам нужен пример на стороне сервера, есть GeSHi или Pygments для Python.

person Gio Borje    schedule 09.05.2012
comment
Вам не нужно использовать ‹pre›‹код› с highlight.js, вы можете использовать любую разметку, которую хотите. ‹pre›‹code› — это просто значение по умолчанию (и рекомендация HTML5, FWIW) - person isagalaev; 08.06.2012
comment
Переходя к последнему комментарию, вы можете сделать это с помощью следующего кода: ``` document.addEventListener('DOMContentLoaded', (event) =› { document.querySelectorAll('pre').forEach((el) =› { hljs.highlightElement(el);});}); ``` См. индивидуальное использование на highlightjs.org/usage. - person Mark Shust at M.academy; 16.07.2021

arrow_upward
4
arrow_downward

Я предпочитаю highlight.js. Он поддерживает 112 языков.

Предварительно просмотрите свою страницу с помощью этой инъекции кода из консоли браузера:

// 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)
person Cees Timmerman    schedule 23.03.2015
comment
Попробовал превью - Круто! Я не смог найти вариант для темного режима, но этот dracula.css отлично справляется со своей задачей. - person s3c; 24.11.2020
comment
Не работает для меня. - person BarryCap; 30.06.2021

arrow_upward
0
arrow_downward

Не уверен, что это то, что вам нужно, но когда мне нужны блоки кода с подсветкой синтаксиса в документе, я пишу документ в Pandoc-Markdown, затем используйте Pandoc для преобразования документа в HTML.

Вы получаете выделенный блок кода, используя синтаксис pandoc-markdown следующим образом:

~~~{.python}
class MyClass:
    """A simple example class"""
    i = 12345
    def f(self):
        return 'hello world'
~~~
person uvtc    schedule 09.05.2012

arrow_upward
0
arrow_downward

Да. Вы можете использовать SyntaxHighlighter. Он прост в использовании, именно то, что вам нужно. Просто добавьте тег code в свой блок pre.

Он выделяет около 23 языков, включая Python.

person Libin    schedule 09.05.2012