Оформление комментариев Disqus
- Подсветка синтаксиса
- Поддерживаемые языки
- Особенности использования блочных элементов
- Вывод по особенностям использования блочных элементов
Какие элементы HTML можно использовать
Элементы, которые не входят в список ниже, будут отображены как есть!
Реальное отображение всех поддерживаемых элементов можно посмотреть на полигоне ☺.
- <a>
- Ссылка
- <b> | <strong>
- Жирное начертание
- <blockquote>
- Длинная цитата
- <br>
- Перевод строки
- <caption>
- Заголовок таблицы
- <cite>
- Короткая цитата
- <code>
- Код
- <i> | <em>
- Курсивное начертание
- <p>
- Параграф
- <pre>
- Предварительно форматированный текст
- <s> | <strike>
- Перечёркнутое начертание
- <span>
- Выделение элемента
- <u>
- Подчёркнутое начертание
Два и более идущих подряд пробельных символа при выводе комментария преобразуются в один; исключением из этого правила являются элементы <blockquote> и <pre>: в первом элементе переводы строк (только они!) отображаются как есть, а во втором учитываются все пробельные символы. Исходный код всегда остаётся таким, каким его определил автор комментария, то есть преобразование влияет только на внешнее отображение.
Стоит также отметить, что любые атрибуты (кроме предназначенных для подсветки; см. ниже) внутри элементов работать не будут; то есть, например, задать стиль с помощью атрибута style или открытие ссылки в определённой(ом) вкладке(окне) с помощью атрибута target не получится.
Подсветка синтаксиса
Disqus поддерживает подсветку синтаксиса некоторых языков программирования и разметки. Чтобы использовать эту функцию, нужно поместить код в конструкцию <pre><code>:
<pre><code>
var foo = 'bar';
alert( foo ); // bar
</code></pre>
HTML / XML-код в конструкцию <pre><code> можно вставлять в явном виде, то есть НЕ преобразовывая спецсимволы (&, < и >). Исключением из этого правила выступает сама конструкция <pre><code>, для отображения которой спецсимволы < и > нужно заменить на соответствующие коды (< и >) или мнемоники (< и >); так как иначе она будет выступать в роли вложенной конструкции.
Коды и мнемоники можно свободно использовать в комментариях.
По умолчанию Disqus попытается сам определить язык кода, но можно также указать его непосредственно:
<pre><code class="javascript">
var foo = 'bar';
alert( foo ); // bar
</code></pre>Поддерживаемые языки
- Bash
- Diff
- JSON
- Perl
- C#
- HTML / XML
- Java
- Python
- C++
- HTTP
- JavaScript
- Ruby
- CSS
- Ini
- PHP
- SQL
Особенности использования блочных элементов
Этот момент не так важен, поэтому можно, если нет желания вникать в следующую таблицу, сразу перейти к выводу из её.
В таблице ниже, в секции «Внешний контент» показано представление окружающего блочный элемент контента в зависимости от наличия пробельных символов между ними; а в секции «Внутренний контент» — представление внутреннего контента блочного элемента в зависимости от окружающих его пробельных символов.
Блочными элементами являются <blockquote>, <p> и <pre>; в таблице под <element> подразумевается любой из них.
| Внешний контент | |
|---|---|
| Вид в исходном коде | Вид в пользовательском интерфейсе |
|
|
|
|
|
|
|
|
|
|
| Внутренний контент | |
| Вид в исходном коде | Вид в пользовательском интерфейсе |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Вывод по особенностям использования блочных элементов
Исходя из данных таблицы выше, можно сделать вывод о наиболее наглядном использовании кода, исключая тем самым «расползания» комментария при отображении в пользовательском интерфейсе (учитывая переводы строк!):
Lorem ipsum ...
<blockquote>Content</blockquote>
Lorem ipsum ...
<p>Content</p>
Lorem ipsum ...
<pre>
Content
</pre>
Lorem ipsum ...
<pre><code>
Content
</code></pre>
Lorem ipsum ...Если вы хотите поэкспериментировать над тем, как будут отображены комментарии в зависимости от исходного кода, то не стоит это делать ниже — я подготовил отдельный полигон ☺ для этих целей. Пишите там всё что угодно, а здесь — по делу ...