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



 

Здравствуйте, гость ( Вход | Регистрация )

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


Бывалый
****

Группа: User
Сообщений: 348
Регистрация: 2.5.2011
Из: Санкт-Петербург
Поблагодарили: 79 раз
Репутация:   12  


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

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


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


Участник
***

Группа: User
Сообщений: 247
Регистрация: 15.2.2013
Из: Одесса
Поблагодарили: 168 раз
Репутация:   43  


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

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>



--------------------
Разработка на WordPress -> Верстка/Натяжка/Добавление функционала в шаблонах на WP
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
z17
z17
Topic Starter сообщение 9.9.2015, 3:15; Ответить: z17
Сообщение #3


Бывалый
****

Группа: User
Сообщений: 348
Регистрация: 2.5.2011
Из: Санкт-Петербург
Поблагодарили: 79 раз
Репутация:   12  


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


--------------------
PHP-разработчик
Мой блог


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


http://http://http://http
*****

Группа: Active User
Сообщений: 992
Регистрация: 15.12.2009
Из: /dev/null
Поблагодарили: 221 раз
Репутация:   62  


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


Участник
***

Группа: User
Сообщений: 247
Регистрация: 15.2.2013
Из: Одесса
Поблагодарили: 168 раз
Репутация:   43  


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

Сообщение отредактировал Gerga - 9.9.2015, 11:51


--------------------
Разработка на WordPress -> Верстка/Натяжка/Добавление функционала в шаблонах на WP
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
z17
z17
Topic Starter сообщение 9.9.2015, 12:38; Ответить: z17
Сообщение #6


Бывалый
****

Группа: User
Сообщений: 348
Регистрация: 2.5.2011
Из: Санкт-Петербург
Поблагодарили: 79 раз
Репутация:   12  


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

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


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


Свернуть

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

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) SimplePay: Прием платежей на сайте для юридических и физических лиц
4 kuprum 529 15.12.2017, 14:07
автор: kuprum
Горячая тема (нет новых ответов) Рекомендую: размещение статьи на сайте, ТИЦ 325, PR 6, траст XT 8
44 rumblade 10692 14.12.2017, 15:45
автор: rumblade
Открытая тема (нет новых ответов) 17 вещей на вашем сайте, которые ненавидят
Один из постулатов маркетинга — не раздражать людей
25 PostBrigada 3629 12.12.2017, 21:44
автор: alexandrrr
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыПрибыль с видео на сайте и в соц сетях
Как получить доп доход с нативного контента
14 maxim_krasovskiy 2835 12.12.2017, 12:05
автор: maxim_krasovskiy
Открытая тема (нет новых ответов) ALFAcoins.com - Приём криптовалюты на вашем сайте
17 ALFAcoins 3703 11.12.2017, 23:07
автор: ALFAcoins


 



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