- Сообщений: 84
- Спасибо получено: 3
Sidebar
Вопрос Подсветка кода
- Unior82
-
Автор темы
- Не в сети
- Давно я тут
-
Меньше
Подробнее
9 года 7 мес. назад #1
от Unior82
Unior82 создал тему: Подсветка кода
Добрый день, скажите, как подсветить код на страничке джумла-сайта, чтобы было как
вот здесь
?
Пожалуйста Войти или Регистрация, чтобы присоединиться к беседе.
- Aleksej
-
- Не в сети
- Модератор
-
9 года 7 мес. назад - 9 года 7 мес. назад #2
от Aleksej
Aleksej ответил в теме Подсветка кода
Способов для этого немало, существуют для joomla и соответствующие расширения. Но я предпочел попросту скачать highlight.js с
сайта проекта
, что рекомендую и вам.
Содержимое загруженного архива помещаем где-либо в публичном каталоге вашего сайта; теперь, чтобы красиво подсветить код на страничке сайта - поступаем следующим образом: размещаем код как обычный текст, затем, не уходя со странички, отключаем редактор и обрамляем строчки кода следующим образом:
Создаем новый HTML-модуль и вписываем в него следующее:
Новый модуль очень удобно публиковать только на тех страничках, где предполагается публикация кода - посредством Modules Anywhere от Nonumber. К слову, вы легко можете подгружать 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>Пробуйте, все несложно. Вы даже можете выбрать стиль отображения из множества предложенных, см. демо .
Последнее редактирование: 9 года 7 мес. назад пользователем Aleksej.
Пожалуйста Войти или Регистрация, чтобы присоединиться к беседе.
- savage
-
- Не в сети
- Захожу иногда
-
Меньше
Подробнее
- Сообщений: 78
- Спасибо получено: 1
8 года 11 мес. назад #3
от savage
я так и сделал, но код уходит за пределы окна, не скроллится. Как сделать горизонтальный скроллинг на этом highlights.js ?
savage ответил в теме Подсветка кода
Aleksej пишет: Содержимое загруженного архива помещаем где-либо в публичном каталоге вашего сайта; теперь, чтобы красиво подсветить код на страничке сайта - поступаем следующим образом: размещаем код как обычный текст, затем, не уходя со странички, отключаем редактор и обрамляем строчки кода следующим образом:
я так и сделал, но код уходит за пределы окна, не скроллится. Как сделать горизонтальный скроллинг на этом highlights.js ?
Пожалуйста Войти или Регистрация, чтобы присоединиться к беседе.
- Aleksej
-
- Не в сети
- Модератор
-
8 года 11 мес. назад #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;
}Пожалуйста Войти или Регистрация, чтобы присоединиться к беседе.