Взгляните на библиотеку Prettify JavaScript . Это тот, который обычно используется людьми (например, тот, который используется здесь, в SO).
Вы бы использовали его так:
В вашем элементе
:
<link href="prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="prettify.js"></script>
В вашем элементе
:
<body onload="prettyPrint()">
<!-- any HTML you like here... -->
<pre class="prettyprint">
def say_hi():
print("Hello World!")
</pre>
<!-- any HTML you like here... -->
</body>
Это для простого использования библиотеки. Если вы используете другой JavaScript на своей странице, я бы порекомендовал другие методы для включения библиотеки Prettify (т. Е. Не используйте атрибут onload
элемента
.) Например, если вы используете jQuery, я написал этот плагин jQuery, который я обычно использую для синтаксического выделения определенных элементов:
// Extend jQuery functionality to support prettify as a prettify() method.
jQuery.fn.prettify = function () { this.html(prettyPrintOne(this.html())); };
Используется следующим образом:
$('#my-code-element').prettify();