» »

Создать code c подсветкой на сайт uCoz

Создать 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 стили ставишь другие, то они не очень подходят на мобильные аппараты, здесь все отлично и корректно показывает.
22.12.2016 Просмотров: 763 Комментарий: (7)

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

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

Комментарий: 7
Kolinkor
Kolinkor 22.12.2016 03:051
0
На первом шаблоне стоял этот скрипт, но потом убрал его, так как больше статьи писались, чем скрипты, но отличается когда поставишь это точно, сразу заметно.
FeStemBer
FeStemBer 22.12.2016 03:092
0
Не понимаю, что под темный нельзя поставить, видно по стилям, что там можно цвета просто переписать под темный фон. Или здесь еще файл js, который как написано, должен правильно разделять цвета, посмотрел не мало в нем написано.
Сафрон
Сафрон 22.12.2016 03:143
0
Если на темный можно было сделать, то наверно давно можно было наблюдать. Просто на этот цвет на досуги они раз встречал и не факт, что на ucoz подошел он бы.
Kosten
Kosten 22.12.2016 03:184
0
Вот на темный также не встречал, просто раньше на прошлом шаблоне, хоть он был светлый, но поставил code темный, что стильно по мне смотрелось.

Если кто знает под темный дизайн, киньте ссылку в комментарий, просто на темном как то ярче будет.
csretven
csretven 22.12.2016 04:575
0
Простым стилем можно обойтись, здесь больше к дизайн относиться, вот на блог можно поставить, или если вы файлах применяете скрипты.
csretven
csretven 22.12.2016 04:586
0
Просто не видел на других сайтах, чтоб кто то менял, это только на юкоз идет такое.
Советник
Советник 22.12.2016 05:107
0
Но это не вариант, но не нравится мне что идет, больше темный нравится, этот можно поставить. Но полностью согласен, что некоторые вообше в оборот не берут изначально что то менять.
avatar