четверг, 27 октября 2016 г.

Дополнительные возможности в комментариях Disqus

В качестве системы комментирования для своих сайтов я использую Disqus. Данная система обладает полезными возможностями, позволяющие форматировать текст, например, сделать его жирным.

Еще меня радует возможность вставлять код с подсветкой синтаксиса. А недавно позволили прятать текст под спойлером. Также на некоторых сайтах разрешено вставлять картинки.

В этой статье я расскажу вам как этим воспользоваться.

При вставке ссылок, disqus ведет себя следующим образом. Если это ссылка на youtube ролик, то ролик будет отображаться в виде превьюшки в теле комментария. А если это обычная ссылка, то она автоматически оборачивается тегом <a>, правда с атрибутом rel="nofollow".

Еще в Disqus имеется возможность ручной вставки html тегов. Такая возможность описана в их официальной документации: What HTML tags are allowed within commen... | DISQUS.

Можно вставлять одиночный тег <br />, который устанавливает перевод строки в месте нахождения этого тега. Также можно вставлять и следующие парные теги:

<a>Тег для создания ссылок(атрибут target обрезается, title разрешен)</a>

<blockquote>Длинная цитата</blockquote>

<cite>Цитата (обычно помечается просто курсивом)</cite>

<q>Цитата (закрывает текст в кавычки)</q>

<b>Жирный текст</b>

<strong>Акцентирование текста (обычно выделяет жирным начертанием)</strong>

<span>Определение строчных элементов в документе</span>

<em>Курсив (логическая разметка)</em>

<i>Курсив (физическая разметка)</i>

<p>Параграф</p>

<s>Перечеркнутый текст</s>

<strike>Аналог <s>, тоже делает текст перечеркнутым</strike>

<u>Подчеркнутый текст</u>

<pre>Предварительно отформатированный шрифт</pre>

<code>Программный код</code>

Для подсветки же синтаксиса кода нужно его просто обернуть в теги <pre><code>. По-умолчанию Disqus будет сам определять язык, обернутый этими тегами, но есть также и возможность явно задать используемый язык.

<pre><code class="javascript">
var foo = 'bar';
alert('foo');
</code></pre>

Disqus поддерживает следующие языки: Bash, Diff, JSON, Perl, C#, HTML/XML, Java, Python, C++ , HTTP, JavaScript, Ruby, CSS, Ini, PHP, SQL.

Недавно Disgus реализовал возможность прятать текст в комментариях, используя тег <spoiler>

<spoiler>Hello, world</spoiler>

Для просмотра спрятанного текста необходимо будет щелкнуть по спойлеру.