Как подсветить программный код без плагина

Сообщение сайта

(Сообщение закроется через 3 секунды)

Здравствуйте, гость (

| Вход | Регистрация )

SEO форум MaulTalk.com > Веб-строительство > Программная часть

Как подсветить программный код без плагина

Опции

Gerga_rs

Topic Starter сообщение

26.3.2015, 22:03; Ответить: Gerga_rs

Сообщение #1

Завсегдатай

Группа: User
Сообщений: 911
Регистрация: 18.1.2012
Из: Одесса
Поблагодарили: 0 раз
Репутация:

Всем привет!
На сайте под WordPress необходимо было убрать плагин "WP SyntaxHighlighter" и, вместо какой-то мудреной альтернативы, нужно было сделать подсвечивание программного кода с нумерацией строк, и, чтобы при желании, можно было легко "понакрутить". И так, сейчас сделаем подобное на JS и CSS.

Понадобится .each() (используем для обходе элементов), forEach (перебор массива).

Собственно решение:
JS
[spoiler="JS"]

jQuery.noConflict();
(function($) {
    $(function() {
        if( $('pre').length > 0 ) {
            // Получаем pre
            var $pre = $('pre');
            // Перебираем полученные pre
            $pre.each(function(){
                var $this = $(this)
                var result = '';
                   var s = $this.text();
                // разбиваем на массив по переносу
                var arr = s.split('\n');
                // выполняем действия над каждым элементом массива
                arr.forEach(function(entry){
                    if ( entry != '' )
                        result = result + '<li><XMP style="margin:0; height: 15px">' + entry + '</XMP></li>';
                })
                $this.html('<ul class="new_pre">'+result+'</ul>');
            })
        }
    })
})(jQuery)

[/spoiler]
Стили:
[spoiler="Стили"]

        * {margin: 0; padding: 0}
        pre {
            max-height: 200px;
            overflow: auto
        }
        ul.new_pre {
            counter-reset: num;
            margin: 10px 0;
        }
        ul.new_pre li {
            padding: 0 0 0 57px;
            position: relative;
            list-style-type: none
        }
        ul.new_pre li:after {
            content: counter(num);
            counter-increment: num;
            position: absolute; z-index: 99;
            top: 0; right: auto; bottom: 0; left: 0;
            display: block;
            width: 30px;
            height: 100%;
            padding: 0 7px 0 2px;
            border-right: 3px solid #6ce26c !important;
            text-align: right;
            color: #AFAFAF;
        }

[/spoiler]
HTML:
[spoiler="HTML"]

<pre>
function hello()
{
return "Hello!";
}
</pre>

[/spoiler]
Итого:
[spoiler="HTML"]

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Заголовок</title>
    <link href="style.css" rel="stylesheet" />
    
</head>
<body class="wrapper">
<pre>
function hello()
{
    return "Hello!";
}
</pre>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>

[/spoiler]

Теперь код, которого необходимо подсветить, оборачиваем тегом <pre></pre>. Архив с рабочим вариантом во вложении.

Давно не писал :)

Эскизы прикрепленных изображений

Ответить с цитированием данного сообщения

zmoe

16.8.2015, 0:41; Ответить: zmoe

Сообщение #2

Новичок

Группа: User
Сообщений: 5
Регистрация: 15.7.2015
Из: Лида
Поблагодарили: 0 раз
Репутация:

Я тоже вчера убрал этот плагин, но не заморачивался так сильно, просто заменил на блок черный с белым текстом кому нужны эти прибамбасы?

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой

или обратитесь к любому из модераторов.

« Предыдущая тема · Программная часть · Следующая тема »

1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)

Пользователей: 0

Похожие темы

Тема	Ответов	Автор	Просмотров	Последний ответ
Большие базы Semrush кейвордов по разным тематикам! Много кейвордов с трафиком и без конкуренции! Volume, KD, CPC	23	Krok	6870	Сегодня, 5:58 автор: Krok
Как в пушсетках покупают по 100-200 тысяч кликов за день?	2	Boymaster	686	Вчера, 17:52 автор: Boymaster
Настройка яндекс директ рекламы БЕЗ РАСХОДОВ БЮДЖЕТА Количество продаж будет ОГРАНИЧЕННО!	22	ITstaf	4420	23.4.2024, 21:00 автор: 100ftd
Как вы отдыхаете от работы за компом	151	adw-kupon.ru	19854	23.4.2024, 13:52 автор: Vmir
Как вы бросили работу и перешли на заработок с сайтов?	20	uahomka	3465	23.4.2024, 11:54 автор: Skyworker

Режим отображения: Стандартный · Переключить на: Линейный · Переключить на: Древовидный

Подписка на тему · Сообщить другу · Версия для печати · Подписка на этот форум

Текстовая версия

Сейчас: 25.4.2024, 8:13

Дизайн