Dayana MIX
Вы хотите отреагировать на этот пост ? Создайте аккаунт всего в несколько кликов или войдите на форум.
Dayana MIX

Знакомства, общение, полезные сервисы.

Код нашего баннера



Последние темы
» Лирические стихи.
Подсветка синтаксиса EmptyВт 29 Мар - 7:21 автор Nataliya

» Шаман......
Подсветка синтаксиса EmptyВт 29 Мар - 7:19 автор Nataliya

» [Салаты] Пять ошибок при приготовлении оливье
Подсветка синтаксиса EmptyСр 26 Янв - 13:20 автор Scheila

»  Наша Беседка.. :)
Подсветка синтаксиса EmptyСб 18 Дек - 13:17 автор Феникс

» Супы из рыбы и морепродуктов
Подсветка синтаксиса EmptyВт 14 Дек - 22:26 автор Scheila

» Другие закуски
Подсветка синтаксиса EmptyВт 14 Дек - 22:25 автор Scheila

» Теперь мы есть в Telegram
Подсветка синтаксиса EmptyЧт 26 Авг - 7:59 автор Феникс

» мои клипы.
Подсветка синтаксиса EmptyСр 4 Авг - 20:55 автор Nataliya

» МОМЕНТЫ ЖИЗНИ
Подсветка синтаксиса EmptyСр 4 Авг - 20:44 автор Nataliya

Самые просматриваемые темы
Наша Беседка.. :)
Лирические стихи.
Загадки с ответами
Анекдоты и смешные истории
Записки Домового.
Салаты рыбные и из морепродуктов
Давление на «отлично»
Супы из рыбы и морепродуктов
Сонник Миллера
Музыка для души

Самые активные темы
Сонник Миллера
Салаты рыбные и из морепродуктов
Давление на «отлично»
Наша Беседка.. :)
Загадки с ответами
Анекдоты и смешные истории
Лирические стихи.
Записки Домового.
Рецепты бутербродов
Супы из рыбы и морепродуктов

Любимые темы
Загрузка избранного...


 :: Советы, хитрости, техподдержка... :: Технический раздел :: Учебники

Предыдущая тема Следующая тема Перейти вниз

  • 1

Подсветка синтаксиса

Сообщение автор  Вс 17 Янв - 1:00

Syntax Highlighter

Расположение- Предназначены для соответствующих мест, где вы научитесь применять эффекты JavaScript на форумах. В нашем случае, мы будем применять На всех страницах.
Код:
jQuery(function () {
var sCSS = '<style>' +
        '/***' +
'* Синтаксис маркера возможности для Forumotion!' +
'* В CSS: .сайта codebox ДД.cont_code' +
'* (с) http://balupton.github.io' +
'* Версия: 1.28082013-св1.9.1' +
'* Сделано в jscript - 2013/12/16' +
        '*/' +
'code.punbb_block, pre.punbb_block {' +
' background-color: #FAFAFA !important;' +
' border: 1px solid #C9C9C9 !important;' +
' color: #000000;' +
' font-family: Consolas,"Bitstream Vera Sans Mono","Andale Mono",Monaco,"DejaVu Sans Mono","Lucida Console",monospace !important;' +
' font-size: 11px !important;' +
' line-height: 100% !important;' +
' max-height: 100px !important;' +
' overflow: auto !important;' +
' padding: 5px !important;' +
' white-space: pre-wrap !important;' +
' width: 90% !important;' +
        '}' +
'.punbbtop {' +
' background-color: #FFDEAD !important;' +
' color: #1D3652;' +
' font-size: 10px;' +
' font-weight: bold;' +
' line-height: 110%;' +
' margin-top: 5px;' +
' padding: 2px 1px 2px 3px;' +
' width: 91% !important;' +
        '}' +
'.punbbtop button {' +
' background: -moz-linear-gradient(center top , #EDEDED 5%, #DFDFDF 100%) repeat scroll 0 0 #EDEDED;' +
' border: 1px solid #BBBBBB;' +
' border-radius: 3px 3px 3px 3px;' +
' color: #1D3652;' +
' cursor: pointer;' +
' display: inline-block;' +
' font-size: 10px;' +
' padding: 0 6px;' +
' text-decoration: none;' +
        '}' +
'.punbbtop button:hover {' +
' background: -moz-linear-gradient(center top , #DFDFDF 5%, #EDEDED 100%) repeat scroll 0 0 #DFDFDF;' +
' border-color: #9A9A9A;' +
' color: #3D70A3;' +
        '}' +
'.punbbtop button:active {' +
' position: relative;' +
' top: 1px;' +
        '}' +
'pre.punbb_block.expand, code.punbb_block.expand {' +
' max-height: 100% !important;' +
        '}' +
'.prettyprint ol.linenums {' +
' padding-left: 15px !important;' +
        '}' +
'</style>';
jQuery(sCSS).insertBefore('#page-body');

if (jQuery('.cont_code').length) {
var tagCode = jQuery('.cont_code');
} else {
if (jQuery('.cont_code').length) {
var tagCode = jQuery('.code');
} else {
var tagCode = jQuery('code');
        }
    }
tagCode.each(function () {
var sContent = jQuery(this).html();
var codebox = jQuery(this).parent().parent();
codebox.before('<div class="punbbtop">Код; <button onclick="punbbExpand(this); return false;">Развернуть</button><button style="display: none" onclick="punbbCollapse(this); return false;">Свернуть</button> <button onclick="punbbSelect(this); return false;">Выбрать</button> <button onclick="punbbPopup(this); return false;">Всплывающее окно</button></div><pre class="highlight punbb_block">' + sContent + '</pre>');
codebox.remove();
    });
jQuery.getScript('http://balupton.github.io/jquery-syntaxhighlighter/scripts/jquery.syntaxhighlighter.min.js', function () {
jQuery.SyntaxHighlighter.init({
'wrapLines': false
        })
    })
});
function punbbExpand(oThis) {
jQuery(oThis).css('display', 'none');
jQuery(oThis).next().css('display', '');
jQuery(oThis).parent().next('pre.punbb_block').addClass('expand');
}
function punbbCollapse(oThis) {
jQuery(oThis).css('display', 'none');
jQuery(oThis).prev().css('display', '');
jQuery(oThis).parent().next('pre.punbb_block').removeClass('expand');
}
function punbbPopup(oThis) {
var content = jQuery(oThis).parent().next('pre.punbb_block').html();
var my_window = window.open("","PunBB_Code","scrollbars=1,toolbar=no,menubar=no,personalbar=no,status=0,left=0,location=0,menubar=0,top=0,width=640,height=350");

my_window.document.write('<pre>'+content+'</pre>');
}

function punbbSelect(oThis) {
var doc = document;
var text = jQuery(oThis).parent().next('pre.punbb_block')[0];
if (doc.body.createTextRange) {
var range = doc.body.createTextRange();
range.moveToElementText(text);
range.select();
} else if (window.getSelection) {
var selection = window.getSelection();
var range = doc.createRange();
range.selectNodeContents(text);
selection.removeAllRanges();
selection.addRange(range);
    }
}
Перевел на русский язык кнопочки и немного вырезал бесполезный код.


Последний раз редактировалось: Феникс (Вт 22 Ноя - 20:18), всего редактировалось 1 раз(а)
Феникс
Феникс
Администратор


Мужчина Посты : 1598
Очки : 6385
Возраст : 52
Откуда : Россошь

Вернуться к началу Перейти вниз

Подсветка синтаксиса Sdsd1110
  • 2

Подсветка от Яндекса

Сообщение автор  Вт 22 Ноя - 17:05

Скрипт :
Код:
$(function(){var a=$("dl.codebox dd").find("code, div.cont_code");0!=a.length&&$.ajax({url:"http://yandex.st/highlightjs/8.0/highlight.min.js",cache:!0,dataType:"script",success:function(){hljs.configure({useBR:!0});a.each(function(a,b){hljs.highlightBlock(b)})}})});

В таблицу стилей :
Код:
.hljs {
  display: inline-block;
  padding: 0.5em;
  color: #333;
  background: #f8f8f8;
}
 
.hljs-comment,
.hljs-template_comment,
.diff .hljs-header,
.hljs-javadoc {
  color: #998;
  font-style: italic;
}
 
.hljs-keyword,
.css .rule .hljs-keyword,
.hljs-winutils,
.javascript .hljs-title,
.nginx .hljs-title,
.hljs-subst,
.hljs-request,
.hljs-status {
  color: #333;
  font-weight: bold;
}
 
.hljs-number,
.hljs-hexcolor,
.ruby .hljs-constant {
  color: #099;
}
 
.hljs-string,
.hljs-tag .hljs-value,
.hljs-phpdoc,
.tex .hljs-formula {
  color: #d14;
}
 
.hljs-title,
.hljs-id,
.coffeescript .hljs-params,
.scss .hljs-preprocessor {
  color: #900;
  font-weight: bold;
}
 
.javascript .hljs-title,
.lisp .hljs-title,
.clojure .hljs-title,
.hljs-subst {
  font-weight: normal;
}
 
.hljs-class .hljs-title,
.haskell .hljs-type,
.vhdl .hljs-literal,
.tex .hljs-command {
  color: #458;
  font-weight: bold;
}
 
.hljs-tag,
.hljs-tag .hljs-title,
.hljs-rules .hljs-property,
.django .hljs-tag .hljs-keyword {
  color: #000080;
  font-weight: normal;
}
 
.hljs-attribute,
.hljs-variable,
.lisp .hljs-body {
  color: #008080;
}
 
.hljs-regexp {
  color: #009926;
}
 
.hljs-symbol,
.ruby .hljs-symbol .hljs-string,
.lisp .hljs-keyword,
.tex .hljs-special,
.hljs-prompt {
  color: #990073;
}
 
.hljs-built_in,
.lisp .hljs-title,
.clojure .hljs-built_in {
  color: #0086b3;
}
 
.hljs-preprocessor,
.hljs-pragma,
.hljs-pi,
.hljs-doctype,
.hljs-shebang,
.hljs-cdata {
  color: #999;
  font-weight: bold;
}
 
.hljs-deletion {
  background: #fdd;
}
 
.hljs-addition {
  background: #dfd;
}
 
.diff .hljs-change {
  background: #0086b3;
}
 
.hljs-chunk {
  color: #aaa;
}

Замечу, что "языков" для подсветки много.
Феникс
Феникс
Администратор


Мужчина Посты : 1598
Очки : 6385
Возраст : 52
Откуда : Россошь

Вернуться к началу Перейти вниз

Подсветка синтаксиса Sdsd1110
  • 3

Re: Подсветка синтаксиса

Сообщение автор  Сб 26 Ноя - 17:47

Найдите в шаблоне overall_header строчки :
Код:
<script src="{JQUERY_PATH}" type="text/javascript"></script>
<script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>


И добавьте ниже следующий код:
Код:
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.1.0/styles/github-gist.min.css">
<style>

dl.codebox:not(.spoiler) dt {
    display: none;
}
dl.codebox:not(.spoiler) dd {
    border: 0 none;
    background: #f8f8f8;
    position: relative;
    max-height: 100%;
}
.clipboard {
    display: block;
    color: #333;
    position: absolute;
    right: 4px;
    top: 4px;
    background: url(http://i.imgur.com/o9NOYtH.png) no-repeat center center #eee;
    border: 1px solid #D5D5D5;
    width: 30px;
    height: 30px;
    text-align: center;
    border-radius: 3px;
    transition: opacity 0.3s ease-in-out 0s;
    opacity: 0;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
    -webkit-appearance:none;
    cursor: pointer;
}
.clipboard.check-circle {
    background-image: url(http://i.imgur.com/CBEkyLH.png);
}
.clipboard.exclamation-triangle {
    background-image: url(http://i.imgur.com/QQkE9Wj.png);
}
dl.codebox:not(.spoiler) dd:hover .clipboard {
    opacity: 1;
}
.clipboard:hover {
    background-color:#ddd;
    border-color:#ccc;
}
.hljs {
    background: #f8f8f8;
}
dl.codebox:not(.spoiler) code,
.codebox:not(.spoiler) dd.cont_code {
    max-height: 100%;
    margin: 0;
}
.codebox:not(.spoiler) {
    background-color: transparent;
    border: 0 none;
    margin: 0;
}
</style>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.1.0/highlight.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.5/clipboard.min.js"></script>
<script>
/* Zzhljs - http://devs.forumvi.com */
jQuery(function($){
    var $code = $("code");
    if ($code.length) {
        hljs.configure({
            useBR: true
        });
        $code.each(function (i, block) {
            hljs.highlightBlock(block);
        });

        function fallbackMessage(action) {
            var actionMsg = '';
            var actionKey = (action === 'cut' ? 'X' : 'C');

            if (/iPhone|iPad/i.test(navigator.userAgent)) {
                actionMsg = 'No support!';
            } else if (/Mac/i.test(navigator.userAgent)) {
                actionMsg = 'Press ⌘-' + actionKey + ' to ' + action;
            } else {
                actionMsg = 'Press Ctrl-' + actionKey + ' to ' + action;
            }

            return actionMsg;
        }

        function afterClipboard(ele) {
            setTimeout(function(){
                ele.className = 'clipboard clipboard';
            }, 400);
        }

        var snippets = document.querySelectorAll('.codebox:not(.spoiler) > dd');

        [].forEach.call(snippets, function (snippet) {
            snippet.firstChild.insertAdjacentHTML('beforebegin', '<i class="clipboard clipboard" data-clipboard></i>');
        });

        var clipboardSnippets = new Clipboard('[data-clipboard]', {
            target: function (trigger) {
                return trigger.nextElementSibling;
            }
        });

        clipboardSnippets.on('success', function (e) {
            e.clearSelection();
            e.trigger.className = 'clipboard check-circle';
            afterClipboard(e.trigger);
        });

        clipboardSnippets.on('error', function (e) {
            e.trigger.className = 'clipboard exclamation-triangle';
            afterClipboard(e.trigger);
            alert(fallbackMessage(e.action));
        });
    }
});
</script>


Результат :

Подсветка синтаксиса Animat10

Как видите, при клике на иконку в правом верхнем углу контейнера кода, он копируется в буфер обмена.
Феникс
Феникс
Администратор


Мужчина Посты : 1598
Очки : 6385
Возраст : 52
Откуда : Россошь

Вернуться к началу Перейти вниз

Подсветка синтаксиса Sdsd1110

Предыдущая тема Следующая тема Вернуться к началу


Dayana MIX :: Советы, хитрости, техподдержка... :: Технический раздел :: Учебники

Коды ссылок на тему для вставки:
URL:
BBCode:
HTML:
 
Права доступа к этому форуму:
Вы не можете отвечать на сообщения