Главнаяhtml и cssPRE для сайта

PRE для сайта, как вывести html код на странице

PRE для сайта

Познакомлю, для тех кто не знает, как вывести html код на странице в виде текста с удобной и красивой подсветкой тегов, свойств, атрибутов и функций с помощью элемента PRE для сайта.

Функциональное предназначение его состоит в том, чтобы прописанный любой код с тегами, либо с функцией, браузер отображал его как текст на странице, а не воспроизводил в действие указанный код html, java или php.

 

Особенностью предлагаемого мной PRE для сайта является тот факт, что вы можете выводить любые теги html на странице в виде текста и использовать в нём неограниченное количество пробелов, что невозможно сделать во встроенном PRE.

Пример вывода html кода посредством PRE.


<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Вывод html кода на странице в виде текста</title>
  <link href="style.css" type="text/css" rel="stylesheet">
  <script src="script.js" type="text/javascript"></script>
</head>

<body>
<h1>Вывод html кода на странице в виде текста</h1>

<pre rel="html"><code>

     // Код HTML
<div class="my">
<img src="foto.jpg" alt="фото" />

     // Код CSS
<style>
  .my {margin: 10px;}
  img {float: left  !important;}
</style>

</code></pre>

</body>
</html>

Используйте вышеуказанный пример для вывода html кода на своей странице, не забыв скачать дополнительные файлы к элементу PRE для сайта: это файл style.css для оформления и небольшой java скрипт.

Обязательно!
  • В <pre rel="html"... - указываем какой код хотим вывести на страницу: (html, css, php, javascript, xml, sql или htaccess);
  • Скобки для тегов < > - прописывать нужно как &lt; &gt; соответственно;
  • Остальной код - прописываете как он и есть без форматирования и всяких изменений;
  • Если у вас на странице уже подключен скрипт jquery - то подключать <script src="http://ajax...1.8.3/jquery.min.js"></script> уже не обязательно.

Совет!
Откройте из скачанного архива файл style.css и допишите максимальную высоту для элемента PRE на сайте, изначально она не прописана. Это делается для удобного просмотра в виде текста выводимого html кода на странице, когда он слишком большой.

На этом обзор вывода форматированного текста на html странице закончен, что не получается или не понятно - спрашиваем.

Скачать PRE для сайта

Ссылка на файл: скачать PRE для сайта

Рейтинг: 4.0/5     Оценили: 18

Похожие публикации

Комментарии к статье 0