» »

Оформление кода под скрипты с нумерацией


Оформление кода под скрипты с нумерацией

Думаю все вы видели, где скрипт стоит в коде и под нумерацией еще. Это смотрится красиво и теперь вы можете сделать у себя на светлом дизайн сайте. Здесь сразу подчеркну, что на форуме работать не будет, только на каталогах файлы, статьи, блог. Но вообщем на том, где у нас всегда основная информация и находиться. Выставлю как есть, если кто решит, что то поменять, думаю это возможно, так как под это стили идут. А также сразу говорю, изображение с тестового сайта и все проверенно.

Установка:

В низ сайта ставим скрипт:

Код
<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 + '
');
}
});
</script>


Потом нам нужно прописать CSSстили:
Код

.bbCodeName {display: none;}  
.codeMessage {  
position: relative;  
margin: 5px 0 10px 0 !important;  
padding: 16px 20px 16px 35px;  
background: #fff url(http://zornet.ru/Ajaxoskrip/SN/Drean/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;  
}


Вот такая не хитрая установка.
04.01.2016 Просмотров: 450 Комментарий: (14)

Поделиться в социальных сетях

Материал разместил

Комментарий: 14
Сопрано
Сопрано 04.01.2016 23:471
0
Подскажите, мне одному кажется, что в низу нет завершающийся полосы. Но хотя это не сильно важно, так видел давно в интернете скрипт, только вот с тестового как то всегда лучше наблюдать, зная что он рабочий.
Kvint
Kvint 04.01.2016 23:492
0
Все правильно, так и должно все быть, давно этот скрипт уже установил.
Kosten
Kosten 04.01.2016 23:523
0
Да что то по стилям прошелся, все как и должно, потом зашел на пару сайтов, где точно такой же код уже в системе стоит, и все также, но не стал голову ломать, прописал как есть.
FeStemBer
FeStemBer 04.01.2016 23:545
0
Да, не нужно так все близко принимать, но не очень она показывается, это у всех так, так что все работает как нужно. Сами цифры можно вывести в другой цвет, но лучше оставить все как есть.
Kosten
Kosten 04.01.2016 23:534
0
Хотя проверяя первый код, все нормально появилось, но вот номеров не было, как не крутил, пришлось с другого источника попробовать и здесь они появились.
workman
workman 04.01.2016 23:586
0
Нужно еще сделать подсветку кодов и вообще бы данному скрипту цены бы небыло
AnTron
AnTron 04.01.2016 23:597
0
workman, ты меня опередил, толькохотел написать, что с подсветкой, смотрелось намного лучше.
nikolla76
nikolla76 05.01.2016 00:028
0
Да с подсветкой, это совершенно другое, нонужно понимать, что и так нормально, мне вообще нравиться, когда что то подчитывает, но здесь стоит так для красоты.
workman
workman 05.01.2016 00:049
0
Да нет не для красоты, а если общаются вебмастера то чтобы понимали в объяснении где и какую строка исправить или поменять
AnTron
AnTron 05.01.2016 00:1510
0
workman, все для красоты, а у кого что то не правильно, то он сам все сделает, а что по цвету обьеснять, он не из того теста, ему сразу подовай правильный код, или он обидеться и не когда не зайдет на сайт.
csretven
csretven 05.01.2016 00:1911
0
Оформление видно что отличается от других, не говорю что оно красивое, там не чего такого не наблюдаю, но явно отличее на лицо и видно.
Kosten
Kosten 05.01.2016 00:4112
0
Хотя можно на время поставить, чтоб изображение взять на этот сайт, но нужно убирать, лучше на тестовый вывести цвета и там сделать. Но думаю должно многим пригодиться, также в блоге потом все вместе поставить и этот скрипт и визуальность и написать мануал, как что делать, все по полочкам.
Snoopak
Snoopak 03.02.2016 16:5313
0
Отличный скрипт happy
Kosten
Kosten 04.02.2016 05:4614
0
Но, кому как, не сильно видел, чтоб его ставили.
avatar