Форматирование на javascript.ru

На сайте есть богатые возможности по форматированию, многие из которых уникальны.

Например, можно вставлять запускаемый javascript/html.

В этой статье представлен их список и подробное описание.

Оформление и запуск кода

Элементы кода, ключевые слова в тексте рекомендуется заключать в тэг <code>, получаются vot Takie переменные.

Подсветка кода

Подсветка кода осуществляется разметкой в квадратных скобках.

Например:

[js]
var hi = "Привет"
function sayHi() {
  alert(hi)
}

$(sayHi)
[/js]

Выглядит так:

var hi = "Привет"
function sayHi() {
  alert(hi)
}

$(sayHi)

Список языков:

[js] - javascript
[css] - css
[html] - html
[xml] - xml
[java] - java
[py] - python
[php] - php
[txt] - просто текст

Если код состоит из одной-двух строк и не выполняемый (см. ниже) - он будет выведен в облегченном варианте, как одна расцвеченая строка, без номера.

Запускаемый код

Маркеры [js] и [html] позволяют вставлять в сообщения ЗАПУСКАЕМЫЙ javascript-код.
Или просматриваемый HTML

Для этого нужно указать дополнительный атрибут run.

Этот атрибут даст возможность его запускать/просматривать отформатированный код.

Тег JS

Например:

[js run]
alert('123')
[/js]

Отобразится так:

alert('123')

Исполнение кода осуществляется в контексте текущей страницы.

Тег HTML

Аналогично работает инлайн-просмотр и подсветка для HTML.
При этом работают все элементы страницы, включая javascript:

[html run]
<input type="button" onclick="alert('WOW!')" value="click me!"/>
[/html]

Отобразится так:

<input type="button" onclick="alert('WOW!')" value="click me!"/>

Просмотр осуществляется в iframe. При показе он пытается самостоятельно подстроиться по высоте под размер документа, а по ширине - под тэг, в котором находится.

Если у него это не получается, или у вас свое мнение относительно ширины и высоты iframe для просмотра - используйте параметры width и height:

[html run height=200 width=300]
<h1>Привет мир!</h1>
[/html]

<h1>Привет мир!</h1>

Важный блок кода

Важные блоки кода можно выделить цветом.

Для выделения важных блоков кода указывайте строку с *!* до и */!* - после (без пробелов между *!*).

*!*
...
*/!*

Например:

var id = node.id

*!*
$.ajax({
   data: id,
   url: '/get.php'
})
*/!*

doSomething()

Выглядит так:

var id = node.id

*!*
$.ajax({
   data: id,
   url: '/get.php'
})
*/!*

doSomething()

Важный строковой участок кода

Можно выделить не блок, а часть строки.

Для этого выделяющие маркеры *!* ... */!* должны быть на одной строке.

Например, код

var id = *!* a+b */!*
if (!id) {
  alert("нет id")
} else {
  sayHi(*!* id */!*)
}

выглядит так:

var id = *!* a+b */!*
if (!id) {
  alert("нет id")
} else {
  sayHi(*!* id */!*)
}

Дополнительные возможности

У языковых меток есть ряд дополнительных параметров.

nolines

Отключает номера строк. Впрочем, посетитель может отключить их и сам, нажав на соответствующую кнопку во всплывающем меню. Например, для копирования.

Пример:

[js nolines]
$.ajax({
   data: id,
   url: '/get.php'
})
[/js]

Результат - код без номеров строк:

$.ajax({
   data: id,
   url: '/get.php'
})

hide

Код скрыт по умолчанию, но можно развернуть.

Пример:

[js hide]
$.ajax({
   data: id,
   url: '/get.php'
})
[/js]

Результат - код свернут по умолчанию:

$.ajax({
   data: id,
   url: '/get.php'
})

firstline

Можно указать номер для первой строки. По умолчанию это 1.

Пример:

[js firstline=267]
$.ajax({
   data: id,
   url: '/get.php'
})
[/js]

Результат:

$.ajax({
   data: id,
   url: '/get.php'
})

example.title: оформление примеров

Код можно оформить в виде примера с заголовком:

[js example.title="вывод оповещения" run]
alert('пример сработал');
[/js]

Выведет код в виде примера с заголовком, вот так:

Пример: вывод оповещения

alert('пример сработал');

Ссылка на справочник

Ссылка на справочник ставится очень просто:

• [:eval] (=>eval)
• или: [[:Array#slice] (=>slice) - для метода slice объектов типа Array

Если метод статический, то ставится точка, например:

• [:Date.parse] (=>Date.parse)

Можно добавить к ссылке свой текст через пайп |, вот так:

• [:eval|Смотри сюда] (=>Смотри сюда)

Если после пайпа не указан текст, то будет выведено полное название метода.

P.S. Кстати, прямые ссылки на справочник имеют тоже понятный вид: http://javascript.ru/eval, http://javascript.ru/Array/slice.

Допустимые HTML-теги для материалов сайта

В блогах, комментариях и других публикациях работают следующие теги:

<strike> <a> <em> <strong> <cite> <code>
<ul> <ol> <li> <dl> <dt> <dd> 
<u> <i> <b> <pre> 
<img> <abbr> <blockquote> 
<h1> <h2> <h3> <h4> <h5> 
<p> <div> <span> <sub> <sup>

Это довольно обширный список, и позволяет сделать почти все, что надо.
Параграфы (тэги <p>) генерируются автоматически по переводам строк.

Если вы по какой-то причине хотите отключить автоматическую генерацию параграфов для участка статьи - поместите его внутрь тэгов <noautop> ... </noautop>.

BB-коды для форума

На форуме вам пригодятся стандартные коды форматирования VBulletin.
Их список находится здесь: http://www.vbulletin.com/forum/misc.php?do=bbcode.