Создать code c подсветкой на сайт uCoz
 | |
| На сайте вы можете создать красивый code c подсветкой и плюс нумерация будет присутствовать. Это под светлый дизайн сайта идет только. Иногда нам по умолчанию code при создание сайта не нравится веб мастерам. И здесь кто то просто меняет стили и ставит оригинальный. Здесь вы сразу установим уникальный дизайн, где будет присутствовать номера, а точнее цифры под каждую строку. Но и думаю самое главное, это гамма цвета, которая будет реально разнообразно под каждый скрипт и стили. Но основном если брать стили, том больше зеленого оттенка. По кодам он разный, это очень во первых смотрится красиво. А кто понимает операторы и коды, тому просто легче будет понять. Сами цифры идут с право и будут в малиновом цвете, что кому то не подойдет, и вы можете вывести как вам нужно, а лучше сделать их темными или оставить как есть. Углы будут сразу закругленные идти, но немного, где то на 3 пикселя. Но и сама установка будет понятная, что даже начинающий может поставить на свой ресурс. Ранее на сайт был залит похожий материал, просто кому не нужна под цвета кодов, то переходим на этот материал, и там вам представлен похожий скрип со стилями с номерами, но черно белый. Переходим к установке: В CSS: Код /* Подсветка кода ------------------------------------------*/ div .codeMessage .nocode {background-color:none; color: #555 } div .codeMessage .str {color: #cd5c5c } /* string - pink */ div .codeMessage .kwd {color: #000080; font-weight: bold } div .codeMessage .com {color: #00853E } /* comment - skyblue */ div .codeMessage .typ {color: #00853E } /* type - lightgreen */ div .codeMessage .lit {color: #cd5c5c } /* literal - darkred */ div .codeMessage .pun {color: #555 } /* punctuation */ div .codeMessage .pln {color: #555 } /* plaintext */ div .codeMessage .tag {color: #5c71cd; font-weight: bold } /* html/xml tag - lightyellow */ div .codeMessage .atn {color: #cd5c5c; font-weight: bold } /* attribute name - khaki */ div .codeMessage .atv {color: #555} /* attribute value - pink */ div .codeMessage .dec {color: #98fb98 } /* decimal - lightgreen */ В низ сайта: Здесь установим 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 src="http://zornet.ru/Aben/Gsa/zornet/uLight.js"></script> PS - иногда когда code стили ставишь другие, то они не очень подходят на мобильные аппараты, здесь все отлично и корректно показывает. | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 7 | |
|
| |
