Javascript.RU

Форматирование на 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'
})
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

Для примеров есть специальный тег 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

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

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

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

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

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

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

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


Автор: Зик (не зарегистрирован), дата: 20 августа, 2017 - 08:36
#permalink

Нужна помощь с js скриптом, в нём я не особо разбираюсь, но я изменяю одну программу браузерную .

Body имеет background img , мне нужно при нажатии

home
, изменение background img на цвет #363636 и при повторном нажатии, возвращение на img .

<!DOCTYPE HTML>

<html>

<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<title>3uk</title>
	<script type="application/javascript" src="vendor/jquery.min.js"></script>
	<script type="application/javascript" src="vendor/masonry.pkgd.min.js"></script>
	<script type="application/javascript" src="lib/constants.js"></script>
	<script type="application/javascript" src="lib/sheets.js"></script>
	<script type="application/javascript" src="lib/portrait.js"></script>
	<script type="application/javascript" src="lib/pcstats.js"></script>
	<script type="application/javascript" src="lib/export.js"></script>
	<script type="application/javascript" src="accounts.js"></script>
	<script type="application/javascript" src="lib/realmapi.js"></script>
	<script type="application/javascript" src="lib/options.js"></script>
	<script type="application/javascript" src="lib/totals.js"></script>
	<script type="application/javascript" src="lib/mule.js"></script>
	<script type="application/javascript" src="lib/muledump.js"></script>
	<link type="text/css" rel="stylesheet" href="lib/dump.css">
	<link type="image/png" rel="shortcut icon" href="lib/favicon.png">
</head>

<body>
	<img id="renders" alt="renders" src="lib/renders.png" style="display:none">
	<span id="accopts" style="display: none;" class="menu"></span>
	<div id="main">
		<div id="top">
			<div id="cnt" style="display: none;">waiting requests: <span id="counter"></span></div>
			<div class="handle"><span>options</span><span id="options" class="menu"></span></div>
			<div id="reloader">reload all</div>
			<div class="handle"><span>export</span><span id="export" class="menu"></span></div>
			<div id="update">update</div>
			<div id="home">home</div>
		</div>
		<div id="totals"></div>
		<div id="errors"></div>
		<div id="stage"></div>
	</div>
</body>

</html>
body {
	background: url(pat.png);
	background-position: left bottom;
	background-repeat: repeat-y;
	color: #b3b3b3;
	padding: 10px;
	margin: 0;
	cursor: default;
	font: 12px Arial,sans-serif;

Если с возвращением сложно, то просто заменять при нажатии на цвет #363636 .


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

Приветствуются комментарии:
  • Полезные.
  • Дополняющие прочитанное.
  • Вопросы по прочитанному. Именно по прочитанному, чтобы ответ на него помог другим разобраться в предмете статьи. Другие вопросы могут быть удалены.
    Для остальных вопросов и обсуждений есть форум.
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
Антиспам
9 + 1 =
Введите результат. Например, для 1+3, введите 4.
 
Поиск по сайту
Содержание

Учебник javascript

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

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

Интерфейсы

Все об AJAX

Оптимизация

Разное

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

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