Форматирование styleguide

Превращение в html-руководства по стилю в single html:

  • Открываем руководство по стилю (форматированную версию или оффлайн) в браузере (FireFox) и сохраняем страницу «Веб-страница полностью»;
  • Копируем html в отдельную папку. Проверка: если открыть полученный html, то должны увидеть оглавление, и заголовки сдвинутые влево за границу экрана.
  • Открываем одиночный html файл в редакторе, перед закрывающим тэгом </head> добавляем пару тэгов <style></style>
  • между тэгов style добавляем содержимое файла *_files/styleguide_ru.css
  • в стилях в формате для pre добавляем строку:
    color:#000;
  • подменяем линки на картинку: ищём link.png и затем полный путь до файла (например 444_files/links.png ) подменяем на требуемый (например, /wp-content/uploads/2024/08/link.png )
  • полученный html отправляем на css inliner. Например, сюда: https://automattic.github.io/juice/. Результат сохраняем как html-файл.
  • прогоняем через html бьютифаер. Например, здесь: https://www.freeformatter.com/html-formatter.html#before-output
  • изменяем отступы — заменить строку:
    left: -46px;
    на:
    left: 0px;
  • у полученного html-файла копируем внутреннее содержимое body и вставляем в страницу на сайте.