Как написать код текстом на HTML странице
Что я имею ввиду под вопросом: Как написать код текстом на HTML странице? Я хочу показать вам код изображения: , но вместо тега img вы видите, зевающего смайлика.
Как написать тег в тексте
Компактная программа CoderHTML делает тоже самое.
Тег
Дополнительно можно применить тег . По умолчанию, любое количество пробелов идущих на HTML странице подряд показывается как один. Для преодоления этого эффекта, используется свойство white-space, символ или тег .
шпаргалка блоггера
шпаргалка блоггера
Для данного тега можно задать CSS стиль (для Blogger нужно указать .post-body перед pre — подробнее как это сделать — см. скриншот ниже):
pre < margin: 10px 0px 10px 10px; padding: 10px; color: #3f0309; font: 14px normal helvetica, sans-serif; border-left: 4px solid #d2bf94; white-space: pre-wrap; /* перенос длинных строк */ word-wrap: break-word; /* перенос длинных слов в Internet Explorer 5.5+ */ >
Здесь я показала значения, которые использую сама. Вы можете поменять их на свой вкус.
Тег
Показывает, что фрагменты внутри него представляют из себя программный код. По умолчанию ему задан моноширинный шрифт.
Тег <code>
Итог оформления кода текстом
После того, как был преобразован код изображения зевающего смайла и заданны стили тегу pre, я могу показать его читателю блога:
18 комментариев:
altersego 1.Для вставки кода в посты вместо CoderHTML можно еще использовать online-сервисы, я пользуюсь http://centricle.com/tools/html-entities/
2. Вы забыли упомянуть, что правка "родных" таблиц стилей - не лучшая практика, как потом искать и исправлять эти заплатки? Я обычно вставляю свои "хаки" в виде дополнительных таблиц стилей перед закрывающим тегом
Но это тоже - не лучшая практика, поскольку Blogger не оптимизирует (как мне кажется?) файлы и элементы шаблона с CSS. Не исследовали ли вы этот вопрос? NMitra 1. Верно. Но я как-то привыкла уже к этому инструменту - всегда под рукой.
2. Я уже почти весь код перерыла, поэтому мне не составляет труда найти нужный фрагмент. Стили для удобства делятся на Content (общий вид), Header (заголовок), Tabs (верхнее поле меню под названием блога), Headings (элементы наподобие даты), Main (основная часть), Posts (тело статьи), Widgets (внешний вид гаджетов), Footer (нижняя часть блога). Размещайте добавленные стили по разделам.
Перед /head не советую, так как вы можете дублировать уже имеющиеся CSS. Уж лучше заменять. Оригинал всегда можно посмотреть на блоге, созданном для тестовых целей.
Нет, не оптимизирует. Этим приходится заниматься вручную. Например, не
background-color: #fc0;
background-image: url('images.png');
background-repeat: repeat-y;
background: #fc0 url('images.png') repeat-y; Андрей Извините, не нашел нужного раздела. Как мне в коде шаблона изменить отступы от текста в сообщении, слева и справа? Спасибо! NMitra Для