ZorNet.Ru — сайт для вебмастера » Скрипты для uCoz » Красивый Сode с подсветкой синтаксиса сайте uCoz

Красивый Сode с подсветкой синтаксиса сайте uCoz

Много искал информации по теме подсветка и теперь Делаем красивый Сode с подсветкой на сайте uCoz и не чего не нужно заливать в файловый менеджер. Здесь не только будет подсветка, саму форму поменяем, как на картинке и добавим еще нужный код как Выделить все. Так уже было сказано, только белый фон подойдет по этой теме, темный здесь совершенно не подходит, своей гаммой.

И так давайте начнем:

Поменяем сам формат Сode, где будет находиться информация, где ставим стили в самый низ CSS.

Код

/*code kletku*/
.bbCodeName {padding:0!important; /* - запрещаем внутренние отступы */
margin-top:5px; /* - верхний внешний отступ */
margin-bottom:5px; /* - нижний внешний отступ */ }
.bbCodeBlock {
  margin: 5px 0 0 0;
  padding: 3px;
  font-size:12px !important;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  background: #f7f7f7 url('http://zornet.ru/SKRIPT/Kransel/code.gif') !important;
  border: 1px solid #8FB2CE !important;}
.codeMessage {
  padding:0;
  border: 0 !important;
overflow:hidden;
}

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

Заходим в низ сайта и в самый его подвал ставим этот код.

Код

<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('','<code>').replace('','<\/code>');
codediv[i].innerHTML=s;}}
</script>

Когда установили, смотрим все работает и чего то не хватает, да нет подсветка синтаксиса и нам ее нужно поставить.

Основном где коде переменятся, это модуль файла, у кого другой, то не проблема. Идем в админ панель и вид материала и комментарием открываем. Там вы поставите небольшой скрипт после - это почти с самом начале, и все теперь у вас совершенно изменился Сode с простого в яркий и красивый.

Код

На этом все, проверенно на тестовом сайте и работает отлично.

19 Августа 2015 Просмотров: 2784 Комментариев: (4)

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

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

Kosten

Похожие материалы

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

Комментарии: 4
Порядок вывода комментариев: Kosten 19 Августа 2015 03:52¹ 0 Кто поставил, отпишитесь плиз и ссылку дайте посмотреть. ZruBkul 05 Сентября 2015 18:41² 0 Сами Сode красивые а вот подсветку нужно ставить другую. kredit-oformi 06 Сентября 2015 09:27³ 0 Вот этот код конечно на 100% упрощает копирование материалов, даже не знаю как раньше без него обходились хотя если с точки CEO оптимизатора, то лучше чтобы пользователь подольше висел на проекте и можно было бы не ставить, но мы же за удобство пользователей боремся посмотреть тут работу скрипта. Kosten 08 Сентября 2015 01:06⁴ 0 Лучше ставить его без гирлянды, по мне так лучше будет в тетрадную одну клетку.