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

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/jаvascript"></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, jаvascript, xml, sql или htaccess );
  • Скобки для тегов < > - прописывать нужно как &lt; &gt; соответственно;
  • Остальной код - прописываете как он и есть без форматирования и всяких изменений;
  • Если у вас на странице уже подключен скрипт jquery - то подключать <script src="http://ajax...1.8.3/jquery.min.js"></script> уже не обязательно.

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

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

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

Ссылка на файл: pre.zip

Комментарии 0
Добавить комментарий