Javascript.RU

Форматирование на 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 run]
alert('123')
[/js]

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

alert('123')

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

Аналогично работает инлайн-просмотр и подсветка для 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

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

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

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

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

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

<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>.

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


Автор: Bnopnya (не зарегистрирован), дата: 3 апреля, 2015 - 03:24
#permalink

Всем привет.. Увидел у вас тут прикольный скрипт, есть предложение если интересно то отпишите на мыло..


Автор: Гость (не зарегистрирован), дата: 12 апреля, 2015 - 10:45
#permalink

ну что сказать про сайт, очень хороший сайт...


Автор: Гость (не зарегистрирован), дата: 3 августа, 2015 - 22:32
#permalink
class Animal {
	private $name;

	function __construct($name){
		$this->name = $name;
	}

	function getName(){
		return $this->name;
	}
}

class Cat extends Animal {
	function meow(){
		print "Cat {$this->getName()} is saying meow"; // getName() - это метод, а не свойство, поэтому нужны скобки
	}
}

$cat = new Cat();
$cat->meow();

Отправить комментарий

Приветствуются комментарии:
  • Полезные.
  • Дополняющие прочитанное.
  • Вопросы по прочитанному. Именно по прочитанному, чтобы ответ на него помог другим разобраться в предмете статьи. Другие вопросы могут быть удалены.
    Для остальных вопросов и обсуждений есть форум.
P.S. Лучшее "спасибо" - не комментарий, как все здорово, а рекомендация или ссылка на статью.
Содержание этого поля является приватным и не предназначено к показу.
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Разрешены 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>
  • Строки и параграфы переносятся автоматически.
  • Текстовые смайлы будут заменены на графические.

Подробнее о форматировании

CAPTCHA
Антиспам
6 + 4 =
Введите результат. Например, для 1+3, введите 4.
 
Поиск по сайту
Реклама
Содержание

Учебник javascript

Основные элементы языка

Сундучок с инструментами

Интерфейсы

Все об AJAX

Оптимизация

Разное

Дерево всех статей

Последние комментарии
Последние темы на форуме
Forum