ZorNet.Ru — сайт для вебмастера » HTML и CSS » Оформление кода под скрипты с нумерацией

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

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

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

Установка:

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

Код
<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 Января 2016 Просмотров: 1700 Комментариев: (14)
Поделиться в социальных сетях

Материал разместил
Kosten
Похожие материалы

Оставь свой отзыв

Комментарии: 14
Сопрано
Сопрано 04 Января 2016 23:471
0
Подскажите, мне одному кажется, что в низу нет завершающийся полосы. Но хотя это не сильно важно, так видел давно в интернете скрипт, только вот с тестового как то всегда лучше наблюдать, зная что он рабочий.
Kvint
Kvint 04 Января 2016 23:492
0
Все правильно, так и должно все быть, давно этот скрипт уже установил.
Kosten
Kosten 04 Января 2016 23:523
0
Да что то по стилям прошелся, все как и должно, потом зашел на пару сайтов, где точно такой же код уже в системе стоит, и все также, но не стал голову ломать, прописал как есть.
FeStemBer
FeStemBer 04 Января 2016 23:545
0
Да, не нужно так все близко принимать, но не очень она показывается, это у всех так, так что все работает как нужно. Сами цифры можно вывести в другой цвет, но лучше оставить все как есть.
Kosten
Kosten 04 Января 2016 23:534
0
Хотя проверяя первый код, все нормально появилось, но вот номеров не было, как не крутил, пришлось с другого источника попробовать и здесь они появились.
workman
workman 04 Января 2016 23:586
0
Нужно еще сделать подсветку кодов и вообще бы данному скрипту цены бы небыло
AnTron
AnTron 04 Января 2016 23:597
0
workman, ты меня опередил, толькохотел написать, что с подсветкой, смотрелось намного лучше.
Марковичь
Марковичь 05 Января 2016 00:028
0
Да с подсветкой, это совершенно другое, нонужно понимать, что и так нормально, мне вообще нравиться, когда что то подчитывает, но здесь стоит так для красоты.
workman
workman 05 Января 2016 00:049
0
Да нет не для красоты, а если общаются вебмастера то чтобы понимали в объяснении где и какую строка исправить или поменять
AnTron
AnTron 05 Января 2016 00:1510
0
workman, все для красоты, а у кого что то не правильно, то он сам все сделает, а что по цвету обьеснять, он не из того теста, ему сразу подовай правильный код, или он обидеться и не когда не зайдет на сайт.
csretven
csretven 05 Января 2016 00:1911
0
Оформление видно что отличается от других, не говорю что оно красивое, там не чего такого не наблюдаю, но явно отличее на лицо и видно.
Kosten
Kosten 05 Января 2016 00:4112
0
Хотя можно на время поставить, чтоб изображение взять на этот сайт, но нужно убирать, лучше на тестовый вывести цвета и там сделать. Но думаю должно многим пригодиться, также в блоге потом все вместе поставить и этот скрипт и визуальность и написать мануал, как что делать, все по полочкам.
1 2 »
Войдите:
avatar