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



 

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

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

Открыть тему
Тема закрыта
> Простая подстветка кода на вашем сайте, Моё решение
z17
z17
Topic Starter сообщение 8.9.2015, 22:19; Ответить: z17
Сообщение #1


С год назад я обновлял свой блог и понял что там не хватает подстветки синтаксиса кода.
Есть куча готовых решение, но бОльшая часть из них громоздка, поэтому я решил написать своё. Работает на основе jquery, подсвечивает php, js, css, html.
Может кому-то пригодится)
Код можно взять на github
Для WP могу объяснить и привести пример как поставить удобную кнопку в визуальный редактор.
Пример работы можно посмотреть на моём блоге.

Буду рад критике и предложениям)


--------------------
Мой блог
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Gerga
Gerga
сообщение 9.9.2015, 2:54; Ответить: Gerga
Сообщение #2


Еще проще:
Развернуть/Свернуть

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)


css:
Код
        * {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;                                    
        }


html:
Код
<pre>
function hello()
{
   return "Hello!";
}
</pre>


итого:
Код
<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
    <title>Заголовок</title>
    <link href="style.css" rel="stylesheet" />
    <!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->    
</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 src="script.js"></script>
</body>
</html>

Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
z17
z17
Topic Starter сообщение 9.9.2015, 3:15; Ответить: z17
Сообщение #3


Gerga, это не совсем то.
Ваше решение просто добавляет нумерацию строк, а не подсветку синтаксиса.


--------------------
Мой блог


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
asAlbert
asAlbert
сообщение 9.9.2015, 7:44; Ответить: asAlbert
Сообщение #4


А где можно увидеть, как будет подсвечиваться?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Gerga
Gerga
сообщение 9.9.2015, 11:51; Ответить: Gerga
Сообщение #5


asAlbert, мое решение тут http://jsfiddle.net/xvondvt5/ можете наблюдать, поле "Result".

Сообщение отредактировал Gerga - 9.9.2015, 11:51
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
z17
z17
Topic Starter сообщение 9.9.2015, 12:38; Ответить: z17
Сообщение #6


asAlbert, в репозитории, если его выкачать, есть файл index.html с примером.

Либо можно посмотреть, к примеру, эту статью в моём блоге, где встречается код.

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


--------------------
Мой блог
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
2 чел. читают эту тему (гостей: 2, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Горячая тема (нет новых ответов) CryptoCloud — прием USDT, BTC, ETH, LTC на любом сайте
34 CryptoCLoud 10071 18.3.2024, 16:56
автор: CryptoCLoud
Открытая тема (нет новых ответов) Странный трафик на сайте длительное время
26 TABAK 7520 16.3.2024, 17:31
автор: Boymaster
Горячая тема (нет новых ответов) Тема имеет прикрепленные файлыБыстрый и качественный обмен на сайте Baksman.org
Обмен Bitcoin, BTC-e, PM, Qiwi, Yandex money, Карты банк
51 Baksman 33208 15.3.2024, 21:14
автор: Baksman
Открытая тема (нет новых ответов) Алтуально ли заработок на сайте?
Оцение пожалуйста идею
10 hitman20 1780 1.2.2024, 5:37
автор: Liudmila
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыГотовые комплекты для создания узконишевых сайтов | (Готовые статьи, семантическое ядро) | Опубликуйте статьи на сайте и получите трафик из ПС без затрат на продвижение
8 rainbowinthedark 2818 14.7.2023, 16:08
автор: rainbowinthedark


 



RSS Текстовая версия Сейчас: 29.3.2024, 2:10
Дизайн