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

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

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

В этой статье представлен их список, начиная с самых уникальных и дальше

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

Обычная подсветка

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

Например:

[js]
var i = 3;
[/js]

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

var i = 3;

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

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

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

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

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

Как и раньше, для подсветки можно использовать и т.п., но JS и 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.

Важные блоки кода.

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

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

*!*
...
*/!*

Например:

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*/!*" выглядит так:

var id = *!*a+b*/!*

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

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

nolines

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

Пример:

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

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

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

Пример:

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

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

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

Пример:

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

Результат:

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

Оформление примеров: тег example

Для примеров есть специальный тег example.

У него есть атрибуты:

lang

язык: php/js/xml/css/html/..., по умолчанию JS

title

название, по умолчанию отсутствует

run

сделать пример запускаемым, для языков JS и HTML

Например:

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

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

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

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

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

Ссылка на справочник ставится очень просто (пробел перед двоеточием убрать):

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

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

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

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

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

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

• [ :Array#slice|] (=>Array#slice)

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

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

Вообще, на сайте разрешается HTML, хотя и не все теги/атрибуты (конечно, если вы не редактор сайта - тогда вам можно все).

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