- Сообщений: 83
- Репутация: 3
- Спасибо получено: 3
×
Программист в стране гулливеров (08 мая 2020)
Дискуссионная статья о тяжелых буднях профессионального кодера.
Вопрос Подсветка кода
- Unior82
-
Автор темы
- Не в сети
- Expert Boarder
-
Меньше
Больше
7 года 6 мес. назад #1
от Unior82
Unior82 создал тему: Подсветка кода
Добрый день, скажите, как подсветить код на страничке джумла-сайта, чтобы было как
вот здесь
?
Пожалуйста Войти или Регистрация, чтобы присоединиться к беседе.
- Aleksej
-
- Не в сети
- Moderator
-
7 года 6 мес. назад - 7 года 6 мес. назад #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>Пробуйте, все несложно. Вы даже можете выбрать стиль отображения из множества предложенных, см. демо .
Последнее редактирование: 7 года 6 мес. назад пользователем Aleksej.
Пожалуйста Войти или Регистрация, чтобы присоединиться к беседе.
- savage
-
- Не в сети
- Senior Boarder
-
Меньше
Больше
- Сообщений: 78
- Репутация: 1
- Спасибо получено: 1
6 года 10 мес. назад #3
от savage
я так и сделал, но код уходит за пределы окна, не скроллится. Как сделать горизонтальный скроллинг на этом highlights.js ?
savage ответил в теме Подсветка кода
Aleksej пишет: Содержимое загруженного архива помещаем где-либо в публичном каталоге вашего сайта; теперь, чтобы красиво подсветить код на страничке сайта - поступаем следующим образом: размещаем код как обычный текст, затем, не уходя со странички, отключаем редактор и обрамляем строчки кода следующим образом:
я так и сделал, но код уходит за пределы окна, не скроллится. Как сделать горизонтальный скроллинг на этом highlights.js ?
Пожалуйста Войти или Регистрация, чтобы присоединиться к беседе.
- Aleksej
-
- Не в сети
- Moderator
-
6 года 10 мес. назад #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;
}Пожалуйста Войти или Регистрация, чтобы присоединиться к беседе.
Masterpro.ws © 2009 - 2020 Ruby and PHP Development. Web Studio