- Сообщений: 84
- Спасибо получено: 3
Как создать и настроить свой веб-сервер на VDS (05 сен 2024)
Осенью самое время заняться установкой и тюнингом своего веб-сервера. Не правда ли?
Подсветка кода
- Unior82
- Автор темы
- Не в сети
- Давно я тут
Less
Больше
11 года 9 мес. назад #1
от Unior82
Unior82 создал тему: Подсветка кода
Добрый день, скажите, как подсветить код на страничке джумла-сайта, чтобы было как
вот здесь
?
Пожалуйста Войти или Регистрация, чтобы присоединиться к беседе.
- Aleksej
- Не в сети
- Модератор
11 года 9 мес. назад - 11 года 9 мес. назад #2
от Aleksej
Aleksej ответил в теме Подсветка кода
Способов для этого немало, существуют для joomla и соответствующие расширения. Но я предпочел попросту скачать highlight.js с
сайта проекта
, что рекомендую и вам.
Содержимое загруженного архива помещаем где-либо в публичном каталоге вашего сайта; теперь, чтобы красиво подсветить код на страничке сайта - поступаем следующим образом: размещаем код как обычный текст, затем, не уходя со странички, отключаем редактор и обрамляем строчки кода следующим образом:
Создаем новый HTML-модуль и вписываем в него следующее:
Новый модуль очень удобно публиковать только на тех страничках, где предполагается публикация кода - посредством Modules Anywhere от Nonumber. К слову, вы легко можете подгружать highlight.js и с Яндекса:
Пробуйте, все несложно. Вы даже можете выбрать стиль отображения из множества предложенных, см. демо .
Содержимое загруженного архива помещаем где-либо в публичном каталоге вашего сайта; теперь, чтобы красиво подсветить код на страничке сайта - поступаем следующим образом: размещаем код как обычный текст, затем, не уходя со странички, отключаем редактор и обрамляем строчки кода следующим образом:
Code:
<pre><code>vash_kod</code></pre>
Создаем новый HTML-модуль и вписываем в него следующее:
Code:
<link rel="stylesheet" href="highlight/styles/googlecode.css">
<script src="highlight/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
Новый модуль очень удобно публиковать только на тех страничках, где предполагается публикация кода - посредством Modules Anywhere от Nonumber. К слову, вы легко можете подгружать highlight.js и с Яндекса:
Code:
<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>
Пробуйте, все несложно. Вы даже можете выбрать стиль отображения из множества предложенных, см. демо .
Последнее редактирование: 11 года 9 мес. назад пользователем Aleksej.
Пожалуйста Войти или Регистрация, чтобы присоединиться к беседе.
- savage
- Не в сети
- Захожу иногда
Less
Больше
- Сообщений: 78
- Спасибо получено: 1
11 года 2 мес. назад #3
от savage
я так и сделал, но код уходит за пределы окна, не скроллится. Как сделать горизонтальный скроллинг на этом highlights.js ?
savage ответил в теме Подсветка кода
Aleksej пишет: Содержимое загруженного архива помещаем где-либо в публичном каталоге вашего сайта; теперь, чтобы красиво подсветить код на страничке сайта - поступаем следующим образом: размещаем код как обычный текст, затем, не уходя со странички, отключаем редактор и обрамляем строчки кода следующим образом:
я так и сделал, но код уходит за пределы окна, не скроллится. Как сделать горизонтальный скроллинг на этом highlights.js ?
Пожалуйста Войти или Регистрация, чтобы присоединиться к беседе.
- Aleksej
- Не в сети
- Модератор
11 года 2 мес. назад #4
от Aleksej
Aleksej ответил в теме Подсветка кода
Попробуйте файл
в самом верху дополнить этой строчкой -
так, чтобы получилось
Code:
/highlights/styles/googlecode.css
в самом верху дополнить этой строчкой -
Code:
overflow-x: auto;
так, чтобы получилось
Code:
/*
Google Code style (c) Aahan Krish <geekpanth3r@gmail.com>
*/
pre code {
display: block; padding: 0.5em;
background: white; color: black;
overflow-x: auto;
}
Пожалуйста Войти или Регистрация, чтобы присоединиться к беседе.