Как сделать некоторый код в хтмл неактивным, в качестве наглядного примера?

@Gleb111 · Регистрация: 12.04.2014

Студворк — интернет-сервис помощи студентам

Скоро выпущу свой блог про вебмастеринг, на данный момент собираюсь написать учебник хтмл для начинающих, скажите, как в сделать так, чтобы хтмл код был неактивным, чтобы люди его могли увидеть (для примеров наглядных)??

@foxxxit · 12.05.2014, 12:44

Gleb111, самый простой способ - это использовать тег <pre>
а если хочется чего-то по-красивее, то можно взять скрипты, вот отсюда

@Gleb111 · 12.05.2014, 12:47 **[ТС]**

Спасибо огромное! То, что нужно!

@foxxxit · 12.05.2014, 12:49

Gleb111, всегда пожалуйста)

@Gleb111 · 12.05.2014, 12:54 **[ТС]**

Поспешил я.. Обрамил нужный код тегами пре, но код так и не стал видимым. Почему? А по - поводу скриптов - как их установить? Инструкции - то нету

@Excubitor · 12.05.2014, 13:11

да все вроде есть... например: https://code.google.com/p/syntaxhighlighter/.
Справа есть инструкция.
А насчет

Сообщение от Gleb111

Почему?

разумеется потому, что вы что-то неправильно сделали.

@Gleb111 · 12.05.2014, 13:19 **[ТС]**

Вот код:

HTML5
1
<pre><div>dd</div></pre>

И что неправильного быть может?

@Excubitor · 12.05.2014, 13:33

Вообще то этот тег внутрь блока добавляется. Сразу перед, собственно, текстом, который надо определить форматированным.

@Gleb111 · 12.05.2014, 13:39 **[ТС]**

Смотрите, сделал как Вы сказали. Результат:

Код:

HTML5
1
2
<div id="code"><pre><html></html></pre></div>Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.
</div>

Добавлено через 40 секунд
Тупо ничего не отображается.. Код должен быть в желтом блоке. Объясните, пожалуйста.

@Excubitor · 12.05.2014, 13:53

Аа... извините, не вникал в вашу задачу... для этого особо не нужны особые теги. Все что от вас требуется просто заменить символы "<" и ">" специальными обозначениями "&lt" и "&gt" соответственно.

Получится что-то типа:
http://jsbin.com/cukedano/1/edit

HTML5
1
 &lthtml&gtтест&lt/html&gt

@Gleb111 · 12.05.2014, 14:16 **[ТС]**

ОГРОМНОЕ СПАСИБО! ТО, ЧТО НАДО!!!

@Excubitor · 12.05.2014, 14:34

Не за что. Но если вы хотите создать нормальный, серьезный ресурс - лучше вам использовать скрипты, что давались выше.

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

Как сделать некоторый код в хтмл неактивным, в качестве наглядного примера?

Решение

Решение

@Gleb111 1 / 1 / 0 Регистрация: 12.04.2014 Сообщений: 51

	Как сделать некоторый код в хтмл неактивным, в качестве наглядного примера? 12.05.2014, 12:41. Показов 12202. Ответов 11 Метки нет (Все метки) Скоро выпущу свой блог про вебмастеринг, на данный момент собираюсь написать учебник хтмл для начинающих, скажите, как в сделать так, чтобы хтмл код был неактивным, чтобы люди его могли увидеть (для примеров наглядных)?? 0

@foxxxit 37 / 37 / 4 Регистрация: 17.07.2011 Сообщений: 200
	12.05.2014, 12:44
	Сообщение было отмечено Gleb111 как решение Решение Gleb111, самый простой способ - это использовать тег <pre> а если хочется чего-то по-красивее, то можно взять скрипты, вот отсюда 2

@Gleb111 1 / 1 / 0 Регистрация: 12.04.2014 Сообщений: 51
	12.05.2014, 12:47 [ТС]
	Спасибо огромное! То, что нужно! 0

@foxxxit 37 / 37 / 4 Регистрация: 17.07.2011 Сообщений: 200
	12.05.2014, 12:49
	Gleb111, всегда пожалуйста) 0

@Gleb111 1 / 1 / 0 Регистрация: 12.04.2014 Сообщений: 51
	12.05.2014, 12:54 [ТС]
	Поспешил я.. Обрамил нужный код тегами пре, но код так и не стал видимым. Почему? А по - поводу скриптов - как их установить? Инструкции - то нету 0

@Excubitor 9 / 9 / 3 Регистрация: 23.05.2013 Сообщений: 129
	12.05.2014, 13:33
	Вообще то этот тег внутрь блока добавляется. Сразу перед, собственно, текстом, который надо определить форматированным. 0

@Gleb111 1 / 1 / 0 Регистрация: 12.04.2014 Сообщений: 51
	12.05.2014, 14:16 [ТС]
	ОГРОМНОЕ СПАСИБО! ТО, ЧТО НАДО!!! 0

@Excubitor 9 / 9 / 3 Регистрация: 23.05.2013 Сообщений: 129
	12.05.2014, 14:34
	Не за что. Но если вы хотите создать нормальный, серьезный ресурс - лучше вам использовать скрипты, что давались выше. 0