Все для сайта: HTML
ads

Свежие материалы

Post Top Ad

Your Ad Spot
Показаны сообщения с ярлыком HTML. Показать все сообщения
Показаны сообщения с ярлыком HTML. Показать все сообщения

понедельник, 27 ноября 2017 г.

Вставка образца кода на свой сайт с подсветкой синтаксиса

15:39 0
Вы наверняка замечали такие окна с примерами кода. В этой статье я расскажу как просто и быстро создавать окно для вставки примера кода с подсветкой синтаксиса. Вариант подойдет абсолютно для любого сайта, в том числе и Blogger.

Вставка образца кода на свой сайт с подсветкой синтаксиса
Итак, чтобы создавать подобные окна на своем сайте/блоге нам потребуется подключить Java-script библиотеку SyntaxHighlighter. Сделать это очень просто. Достаточно разместить между тегами <head></head> следующий код
Чтобы сделать это в блоггере перейдите во вкладку Темы Изменить HTML. Вставьте между тегами код выше и нажмите сохранить.
Теперь чтобы добавить окно с подсвеченным кодом, нужно просто заключить его в тег 



. Как это будет на примере:




 

 ВАШ КОД 





После brush: указываем язык кода: html, js, css и т. д. 









Read More









Автор:



на







Комментариев нет:
  




















Ярлыки:
,
,
























Как создать отдельное окно с полосой прокрутки HTML












               
                















12:33



1






















Иногда возникает необходимость создания на странице отдельного окна с полосой прокрутки (или без нее), например для выделения отдельного фрагмента текста или вставки кода. В этой статье мы рассмотрим различные способы создания таких окон.









1. Отдельное окно с полосой прокрутки на HTML





Такое окно просто создать при помощи тега div





Создать окно с полосой прокрутки на HTML при помощи тега div
Создать окно с полосой прокрутки на HTML при помощи тега div
Создать окно с полосой прокрутки на HTML при помощи тега div
Создать окно с полосой прокрутки на HTML при помощи тега div




Изменяя параметры height и width - вы можете регулировать ширину и высоту окна. Это самый простой вариант.





Выглядеть это будет так:







Создать окно с полосой прокрутки на HTML при помощи тега div
Создать окно с полосой прокрутки на HTML при помощи тега div
Создать окно с полосой прокрутки на HTML при помощи тега div
Создать окно с полосой прокрутки на HTML при помощи тега div
Создать окно с полосой прокрутки на HTML при помощи тега div






С помощью тега div так же можно создать на странице сайта отдельное окошко с фоном, используя подобный код:










ВАШ ТЕКСТ











Выглядеть это будет так:











ВАШ ТЕКСТ











2. Создание отдельного окна c полосой прокрутки на HTML при помощи тега textarea.

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




Пример кода:




 




Атрибут cols="30" отвечает за ширину окошка. Меняем цифру "30" на нужную нам.

Атрибут rows="1" отвечает за высоту. Высоту окошечка можно менять на удобную вам.






На выходе мы получим следующее:







 










Можно изменить фон окна добавив атрибуты, например:










Выглядеть это будет следующим образом:













Вместо lightsalmon можно поставить любой другой цвет. Таблицу цветов для HTML и CSS можно посмотреть ЗДЕСЬ.



Также можно изменить цвет и толщину контура окна. Пример кода:











Выглядеть это будет так:









background-color: lightslategrey- цвет фона

#800000- цвет контура, меняем на любой другой

border: 2px - это толщина контура в пикселях, можно поставить любое другое значение.

Значения цветов опять же берем из таблицы.




Узнать как создавать окно для вставки образца кода с подсветкой синтаксиса вы можете в следующей статье:

➤ Как вставлять образец кода на свой сайт.









Read More









Автор:



на







1 комментарий:
  




















Ярлыки:
,

















        

      




















Post Top Ad





 Your Ad Spot