css | Wiki | PWODEV

highlight.js — лучшая подсветка синтаксиса кода

Paul Osmachko — Fri, 09 Aug 2019 13:25:44 +0000

Сравним какая подсветка синтаксиса кода лучше. На сегодняшний день мы имеем уже большее количество всяких скриптов которые делают это. Загуглим: code syntax highlighting. и рассмотрим список самых популярных скриптов подсветки синтаксиса:

Хотя….

Зачем тратить на это время. Нам нужно чтобы работало быстро, не нагружало страницу лишними скриптами, и заморачиваться не хочется с внедрением скрипта в сайт. Надо также чтобы отображалось красиво, как в нашем ide, типа PHPStorm или любом другом. Чтобы так, один раз поставил и забыл.

Отлично, я свой выбор сделал и тебе советую: highlight.js

Зацени как клево смотрится официальный сайт

Итак краткая инструкция по установке:

Добавляем в это:

Тут мы добавили css, js скрипт и запустили обработку этого скрипта.

Подсветка синтаксиса кода работает. По умолчанию скрипт применяется к такой html конструкции:

...

class=»html» — это не обязательно, но если хочется, можно написать язык кода, чтобы упростить распознавание скриптом, типа кода.

Тебе надо подсветить код в WordPress и ты ищешь какой-то вордпрессовский плагин? Не советую мусорить в Вордпрессе дополнительными плагинами. Просто добавь highlight.js в head и не заморачивайся. А вот тебе сразу инструкция: Как правильно добавлять скрипты в WordPress.

Более подробная документация по скрипту и дополнительные опции можно найти в официальной документации highlight.js. Там же можно найти много различных тем и стилей подсветки кода.

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

Сообщение highlight.js — лучшая подсветка синтаксиса кода появились сначала на Wiki | PWODEV.

Отцентровать popup с помощью css

Paul Osmachko — Thu, 25 Oct 2018 14:46:40 +0000

Ранее мы писали о том как привязать футер к низу страницы, сегодня мы рассмотрим как отцентровать popup с помощью css. Мы пересмотрели много различных методов, но ни один из них не удовлетворял нашим нуждам, поэтому было принято решение найти идеальный метод центрирования блока (попапа) по вертикале и горизонтали, средствами css, без использования js. Метод учитывает что высота попапа может быть разной: маленькой, большей, превышающей размер окна. В случае большей высоты попапа, появится скролл (scroll), и popup можно будет прокрутить. Также мы учли, что в этом случае должен быть не большей отступ сверху и снизу.

Этот метод был разработан совместно с Fullstack Developer Vitalii Zelenskyi — http://www.VitaliyZelenskiy.de

Метод как отцентровать popup с помощью css:

HTML код:


	
	
		
			
			text

CSS код:

.popup {
  align-items: flex-start;
  bottom: 0;
  display: flex;
  justify-content: center;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 10;
  overflow: auto;
}
.popup .popup_bg {
  background: #262626;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  opacity: 0.6;
}
.popup .popup_box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100%;
  padding: 30px;
}
.popup .popup_content {
  border: 2px solid #000;
  background: #fff;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -o-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
  position: relative;
  z-index: 2;
  width: 200px;
}

Скриншоты:

Уменьшим экран по высоте. Popup останется вверху с отступом и появится скролл (scroll).

Если прокрутить попап вниз, там будет тоже отступ:

Потестировать как работает метод можно по ссылке: http://test.pwodev.com/popup/

Этот метод будет постепенно усовершенствоваться. Но на данный момент, для нас это лучший метод. Если вы хотите предложить другие способы, или вы нашли ошибки в нашем методе, оставляйте комментарии.

Сообщение Отцентровать popup с помощью css появились сначала на Wiki | PWODEV.

Как привязать футер к низу страницы

Paul Osmachko — Tue, 19 Dec 2017 12:30:04 +0000

Сегодня найдем окончательное надежное решение вопроса как средствами css прижать футер к низу страницы с помощью css и html. Притянуть футер низ страницы. Также этим способом можно отцентровать контент content по середине страницы.

Для того чтобы прижать footer к низу страницы нужно создать определенную структуру html:

После того как структура страницы готова, приступаем к настройке css.

Нам нужно сделать так чтобы html и body занимали всю высоту страницы (full screen height). А блок wrapper имел минимально высоту экрана, а контент его бы растягивал как нужно. Дальше нам нужно прижать футер к низу страницы или к низу экрана так чтобы он всегда оставался ниже контента, а если контента мало но футер прижимается в низу экрана. Также контенту нужно сделать отступ внизу для футера.

Прижать футер к низу экрана css код:

html,
body{
     height: 100%;
}
.wrapper {
    position: relative;
    min-height: 100%;
}
.main {
    padding-bottom: 80px;
}
.footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 80px;
}

Этот способ работает только в случае фиксированного футера. Это означает что footer прижать к низу страницы будет сложнее если высота его динамическая, так как надо будет предусмотреть правильный нижний отступ для div с классом main. Тут уже нужен будет javascript и понадобится информация как в мобильном браузере получить высоту экрана.

В большинстве случаев footer футре в низу страницы фиксированной высоты, поэтому этот способ работает без проблем.

Если вы знаете более простой способ, или нашли ошибки в этом способе — регистрируйтесь и пишите комментарии. Будем вместе искать идеальный рабочий способ привязки футера к низу страницы.

Сообщение Как привязать футер к низу страницы появились сначала на Wiki | PWODEV.

Настройка PhpStorm pug (jade) и less Watchers

Paul Osmachko — Fri, 01 Dec 2017 10:11:07 +0000

Ранее на мы уже рассматривали как в PhpStorm включить отображение скрытых файлов, сегодня мы настроем в PhpStorm Watchers вочеры для pug и less.

Скачать PhpStorm можно на официальном сайте: https://www.jetbrains.com/phpstorm/

Настройка pug / Jade Watchers.

Для начала нам нужно установить поддержку pug.

PhpStorm -> Preference -> Plugins

Дальше ищем плагин Pug (ex- Jade) и устанавливаем его.

Чтобы правильно настроить в PhpStorm вочер pug делаем простые манипуляции в настройках:

PhpStorm -> Preference -> Tools -> File Watchers

Добавляем вочер Pug и заполняем настройками как на скриншоте:

Важно в аргументах поставить галочку на против Track only root files

Также нужно заполнить аргументы (Arguments):

--pretty --out ../ $FileName$

—pretty — этот аргумент означает что выдаваемый html код будет структурированный. Если этот параметр не поставить то код будет в одну строку.
—out ../ — это путь куда будет генерироваться html код. ../ — означает на одну папку выше чем текущий файл.

Настройка less Watchers.

Чтобы правильно настроить less вочер идем по тому же пути что и pug.

PhpStorm -> Preference -> Tools -> File Watchers

Вводим настройки что на скриншоте:

Опять же важно поставить галочку на против Track only root files чтобы не создавать мусора, и следить только за основным файлом, и не учитывать подключенные файлы.

Чтобы выбрать папку где будет копмилироваться css файл, настраиваем параметр Output path to refresh:

../css/$FileNameWithoutExtension$.css

Эта настройка скажет что нужно выйти на папку выше создать там папку css и сохранить там сгенерированный файл.

Также есть версия этого вочера где генерируется map. В таком случае оставляем все как есть кроме поля Arguments:

$FileName$
../css/$FileNameWithoutExtension$.css

Если нам надо сжать css файл в одну строчку нам необходимо дополнение к less. Его можно установить этой командой в командной строке:

npm install -g less-plugin-clean-css

после этого в настройках аргументов пишем опцию:

--clean-css --no-color $FileName$

На этом все, вочеры pug и less настроены и можно приступать к работе.

Настройка SASS/SCSS Watchers.

Все похоже как в настройке less только в аргументах пишем:

--no-cache --update $FileName$:../css/$FileNameWithoutExtension$.css --style expanded

Если у вас есть дополнения или новые идеи к этой статье, пишите их в комментариях. Также для того чтобы написать на нашем сайте свою статью — у нас открыта регистрация по ссылке http://wiki.pwodev.com/wp-admin

Сообщение Настройка PhpStorm pug (jade) и less Watchers появились сначала на Wiki | PWODEV.

Текст в одну строку и троеточие в конце CSS

Paul Osmachko — Thu, 16 Nov 2017 06:40:57 +0000

Текст в одну строку и троеточие в конце. Как это сделать? Text in one line and ellipses at the end.

Для этого есть замечательное CSS3 свойство text-overflow.

Это свойство определяет параметры видимости текста в блоке, если текст полностью не помещается в область видимости. Есть 2 варианта: текст просто обрезается, или текст обрезается и к концу строки добавится многоточие. text-overflow работает только если блоку присвоено свойство overflow со значением hidden или auto или scroll. Также нужно применить свойство white-space с параметром nowrap что скажет браузеру не переносить текст на новую строку.

Значения text-overflow:

clip — Текст который не помещается обрезается.

ellipsis — Текст обрезается и в конце мы увидим троеточие.

Пример использования:

div{
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    width: 200px;
}

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

Сообщение Текст в одну строку и троеточие в конце CSS появились сначала на Wiki | PWODEV.

Viewport — мета тег для нормальной верстки для мобильного устройства.

Paul Osmachko — Tue, 24 Oct 2017 09:19:16 +0000

Viewport это штука без которой нельзя обойтись. Если вы верстаете под мобильное устройство iPhone или Android да и вообще любое другое устройство, правильно чтобы верстка отображалась одинаково на всех видах экрана, чтобы не было косяков и все было корректно по дизайну.

Если вы верстаете правильно, а так и надо, то вам пригодится очень важный тег который позволит убрать стандартное увеличение, зум (zoom) и чтобы ширина (width) и высота (height) на мобильном (mobile) устройстве отображалась пиксель в пиксель, только тогда мы сможем видеть реальные размеры на лубом размере экрана.

Вот собственно сам мета тег:

Вставлять его надо в самом вверху после открытия

Сообщение Viewport — мета тег для нормальной верстки для мобильного устройства. появились сначала на Wiki | PWODEV.