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

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

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

24
html pretty-print

3 ответов

посмотреть 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 (т. е. не используйте на <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();
39

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

9

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

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

Быстрые настройки:

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>

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

1