Как форматировать код в html/css/js/php

Я ищу способ автоматического форматирования и цветового кода, который я пишу в HTML-документе. Я знаю, что wikipedia делает это, например, на странице: http://en.wikipedia.org/wiki/Nested_function

Я уверен, что есть библиотеки, чтобы сделать это, но я не могу для жизни, найти его. У кого-нибудь есть предложения?

Ответы

Ответ 1

Посмотрите на Prettify JavaScript. Это тот, который обычно используется людьми (это тот, который используется здесь, например, на SO.)

Вы бы использовали его следующим образом:

В элементе <head>:

<link href="prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="prettify.js"></script>

В элементе <body>:

<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 элемента <body>). Например, если вы используете 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();

Ответ 2

Это старый вопрос, но, поскольку он впервые появился в Google для меня, я подумал, что добавлю еще один вариант. Пока Prettify по-прежнему является исправным вариантом, он показывает свой возраст немного. Более новая библиотека, с которой я столкнулась, Prism, и, похоже, она работает довольно хорошо. Это более семантический и дает более тонкий контроль над тем, как отформатировать ваш код. Он также поддерживает плагины, и его темы выглядят лучше, чем Prettify.

Ответ 3

Я думаю, что более простое и мощное решение highlight.js. Он поддерживает 169 языков в это время и 77 стилей кода (например, Solarized dark and light). Еще несколько:

  • автоматическое определение языка
  • выделение нескольких языков
  • доступен для node.js
  • работает с любой разметкой
  • совместим с любой инфраструктурой js

Быстрая настройка:

1 - В заголовке HTML:

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

2 - В вашем HTML-контенте

<pre>
   <code class="html">
      <p>This is your HMTL sample</p>
      <p>You can use classes like "html", "php", "css", "javascript" too..</p>
   </code>
</pre>

Вы можете проверить языки и стили здесь.