Красивое оформление кода

SUAREZ добавил 1400911336 в раздел UCOZ Другие скрипты

Довольно симпатичное оформление кода для uCoz. Огромным плюсом данного решения является то, что справа отображается номер текущая строка - выглядит очень эффектно. Скрипт подойдет для сайтов самых различных порталов, от новостных порталов, до персональных блогов.

Посмотреть данный вариант можно в конце материала!

Установка:
Приступим к установке Красивого оформления кода для uCoz.

1. Переходим в стили: ПУ -> Управление дизайном сайта -> Таблица стилей (CSS) и вставляем в самый низ следующий код:

Код
.bbCodeName {display: none;}
.codeMessage {
position: relative;
margin: 5px 0 10px 0 !important;
padding: 16px 20px 16px 35px;
background: #fff url(http://forum.ucoz.ru/images/codeblock.gif) repeat-y;
border: 0 !important;
font: 11px/18px 'Courier New' !important;
color: #404040;
border-radius: 5px;
box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.13);
}
.codenumbers {
position: absolute;
top: 0;
left: 0;
width: 25px;
padding: 16px 0;
text-align: center;
font: 10px/18px 'Courier New' !important;
color: #afafaf !important;
}

 


Если вы устанавливали до этого другие оформления, то необходимо его удалить. Если даже после удаления стилей, решение отображается не так, как на скриншоте, то удалите все стили, принадлежащие классам: bbCodeName, codeMessage, bbCodeBlock.

2. Теперь, где вы будете выводить блоки с кодом, нужно подключить следующий небольшой скрипт (вы можете ещё подключить в верхнем или нижнем глобальном блоке, что-бы скрипт работал на всех страницах сайта):

Код
<script>
$('.codeMessage').each(function () {
codeH = (this.scrollHeight - 32)/18;
$(this).append(' <div class="codenumbers"> </div> ');
for (i = 1; i <= codeH; i++) {
$(this).find('.codenumbers').append(i + '<br /> ');
}
});
</script>

 


Дополнительно:
Демонстрационный пример представлен ниже:

Код
<script type="text/javascript" src="http://updatesite.ru/demo/js/timestamp.js"></script>
<script type="text/javascript" >
$( document ).ready(function() {
var times=$("span.timestaamp");
for(var i=0; i<times.length; i++) {
var curt=$("span.timestaamp:eq("+i+")").html();
$("span.timestaamp:eq("+i+")").html(timeElapsedString( +curt));
}
}); </script> <script type="text/javascript" src="http://updatesite.ru/demo/js/timestamp.js"></script> <script type="text/javascript" >$( document ).ready(function() { var times=$("span.timestaamp"); for(var i=0; i<times.length; i++) { var curt=$("span.timestaamp:eq("+i+")").html(); $("span.timestaamp:eq("+i+")").html(timeElapsedString( +curt)); } }); </script>

 

Если вдруг кому-нибудь понравится подсветка определенной строки, как показано в фрагменте выше, пишем в комментариях. Реализовывается это не очень сложным способом, и если кому будет нужно, реализуем.

 

+17
Теги: Код, ucoz, оформление, code
Автор: SUAREZ
Источник: http://updatesite.ru
Зарегистрируйтесь или авторизуйтесь, чтобы добавлять комментарии, оценивать материалы и сохранять их в личном кабинете.
Вы не можете добавлять комментарии

1 комментариев

  1. ZekaPentagon ZekaPentagon

    1403080792 | | IP | Редактировать | Удалить

entry
Свернуть
Развернуть мини-чат
0