1. Форум
  3. Форум
  5. Joomla
  7. Extensions joomla
  9. Подсветка кода
×
Разворачиваем клиента API Google Cloud Text-To-Speech на Heroku. Легко и просто (17 июнь 2020)

Скринкаст работы написанного на основе фреймворка Ruby on Rails несложного механизма, позволяющего качественную (основано на алгоритмах сверточной нейронной сети) конвертацию текста в звуковые файлы посредством обращения к бесплатному (аж целый год с момента регистрации!) API Google Cloud Text-To-Speech - положил начало живейшему обсуждению в англоязычном youtube на канале автора, что одновременно и обрадовало и огорчило.

Вопрос Подсветка кода

Больше
7 года 9 мес. назад #1 от Unior82
Unior82 создал тему: Подсветка кода
Добрый день, скажите, как подсветить код на страничке джумла-сайта, чтобы было как вот здесь ?

Пожалуйста Войти или Регистрация, чтобы присоединиться к беседе.

Больше
7 года 9 мес. назад - 7 года 9 мес. назад #2 от Aleksej
Aleksej ответил в теме Подсветка кода
Способов для этого немало, существуют для joomla и соответствующие расширения. Но я предпочел попросту скачать highlight.js с сайта проекта , что рекомендую и вам.

Содержимое загруженного архива помещаем где-либо в публичном каталоге вашего сайта; теперь, чтобы красиво подсветить код на страничке сайта - поступаем следующим образом: размещаем код как обычный текст, затем, не уходя со странички, отключаем редактор и обрамляем строчки кода следующим образом:

<pre><code>vash_kod</code></pre>

Создаем новый HTML-модуль и вписываем в него следующее:

<link rel="stylesheet" href="highlight/styles/googlecode.css">
<script src="highlight/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

Новый модуль очень удобно публиковать только на тех страничках, где предполагается публикация кода - посредством Modules Anywhere от Nonumber. К слову, вы легко можете подгружать highlight.js и с Яндекса:

<link rel="stylesheet" href="http://yandex.st/highlightjs/7.3/styles/default.min.css">
<script src="http://yandex.st/highlightjs/7.3/highlight.min.js"></script>

Пробуйте, все несложно. Вы даже можете выбрать стиль отображения из множества предложенных, см. демо .
Последнее редактирование: 7 года 9 мес. назад пользователем Aleksej.

Пожалуйста Войти или Регистрация, чтобы присоединиться к беседе.

Больше
7 года 2 мес. назад #3 от savage
savage ответил в теме Подсветка кода

Aleksej пишет: Содержимое загруженного архива помещаем где-либо в публичном каталоге вашего сайта; теперь, чтобы красиво подсветить код на страничке сайта - поступаем следующим образом: размещаем код как обычный текст, затем, не уходя со странички, отключаем редактор и обрамляем строчки кода следующим образом:


я так и сделал, но код уходит за пределы окна, не скроллится. Как сделать горизонтальный скроллинг на этом highlights.js ?

Пожалуйста Войти или Регистрация, чтобы присоединиться к беседе.

Больше
7 года 2 мес. назад #4 от Aleksej
Aleksej ответил в теме Подсветка кода
Попробуйте файл
/highlights/styles/googlecode.css

в самом верху дополнить этой строчкой -
overflow-x: auto;

так, чтобы получилось
/*

Google Code style (c) Aahan Krish <geekpanth3r@gmail.com>

*/

pre code {
  display: block; padding: 0.5em;
  background: white; color: black;
  overflow-x: auto;
}

Пожалуйста Войти или Регистрация, чтобы присоединиться к беседе.

  1. Форум
  3. Форум
  5. Joomla
  7. Extensions joomla
  9. Подсветка кода