Eсли ваш сайт предусматривает размещение в статьях примеров HTML, Css, Javascript, тогда вы прекрасно знаете, что все эти коды смотрятся презентабельнее и понятнее, когда в них используeтся подсветка синтаксиса кодаподсветка кода, такая как, например, в Notepad++ или Dreamweaver.
На сайтах uCoz коды в статью вставляются с помощью специального BB кода CODE.
Это достаточно просто нужно в режиме BB-кодов сам код вставить между [code] и [/code]. Получится следующее:
1 2 |
А тут будет Ваш код, например: [code]<h1>Всем привет!</h1>[/code] |
Как я уже писала выше, сам код выглядит нагляднее, с учетом специальной подсветки. Подсветка кода для сайтов uCoz осуществляются следующим образом.
Javascript
Установите следующий скрипт на страницу, где необходимо подсветка перед закрывающимся тегом </body>
Например, Панель управления — Дизайн — Управление дизайном (шаблоны) — Каталог статей — Страница материала и комментариев к нему
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<script src="https://stepfor.top/js/backlight_code.js"></script> <script type="text/javascript"> function selectCode(a){ var e=a.parentNode.parentNode.getElementsByTagName('code')[0]; if(window.getSelection){ var s=window.getSelection(); if(s.setBaseAndExtent){ s.setBaseAndExtent(e,0,e,e.innerText.length-1); }else{ var r=document.createRange(); r.selectNodeContents(e); s.removeAllRanges(); s.addRange(r);} }else if(document.getSelection){ var s=document.getSelection(); var r=document.createRange(); r.selectNodeContents(e); s.removeAllRanges(); s.addRange(r); }else if(document.selection){ var r=document.body.createTextRange(); r.moveToElementText(e); r.select();}} // Замена Code на Выделить всё... codediv=document.getElementsByTagName('div'); for(i=0;i<codediv.length;i++){ if(codediv[i].className=="bbCodeBlock"){ s=codediv[i].innerHTML; s=s.replace(/>Code</g,'><a href="#" onclick="selectCode(this);return false;">Выделить всё<\/a><').replace('<!--uzc-->','<!--uzc--><code>').replace('<!--\/uzc-->','<\/code><!--\/uzc-->'); codediv[i].innerHTML=s;}} $(function() {prettyPrint();}); </script> |
CSS
Стили добавляются в самый конец CSS стилей вашего сайта
Панель управления — Дизайн — Управление дизайном (CSS)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
/* Подсветка кода ------------------------------------------*/ 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 */ /* Specify class=linenums on a pre to get line numbering */ ol.linenums { margin-top: 0; margin-bottom: 0; color: #AEAEAE } /* IE indents via margin-left */ li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8 { list-style-type: none } /* Alternate shading for lines */ li.L1,li.L3,li.L5,li.L7,li.L9 { } /* Выделение кода ------------------------------------------*/ /* webkit, opera, IE9 */ .codeMessage ::selection { background:#C0C0C0; } /* mozilla firefox */ .codeMessage ::-moz-selection { background:#C0C0C0; } |
Вот собственно и все. Теперь Ваш код будет подсвечен.
Чёт у меня сегодня вот не работает… Вижу что лет 9 прошло, но всё же?
У меня в редактировании новостей/статей вообще нет ни кнопки «код», ни режима BB.
А вот при комментировании есть… Я и комментов наставил, и скопировал в статьи/новости html с оставленных комментов — тишина…
Я вот долго не мог сообразить как подсвечивать синтаксы. Теперь понял div всему ГОЛОВА!.