Jump to content
  • 0

SyntaxHighlighter 3.0.83 - подсветка кода


paska
 Share

Question

Всем здрасте. Использую замечательную библиотеку для подсветки кода. Здесь пример.

есть вопросы:

1. как добавить кнопки в toolbar. В примере (по умолчанию) загружется toolbar справа, в котором только 'help'. я так понял, что это осуществляется при помщи js и методов, описанных в shCore.js. но не могу понять как именно.

2. есть ли возможность вывести эти кнопки за пределы панели (или саму панель переместить). в примере см. линки - 'view source' и 'copy to clipboard'.

не так уж сильно рублю в js, что бы понять как работает эта библиотека.

заранее СПС.

Link to comment
Share on other sites

7 answers to this question

Recommended Posts

  • 0
Может разработчикам эти вопросы задать, а не людям, которые не имеют отношения к созданию библиотеки?

обращение было к тем, кто возможно юзал эту библиотеку

Вот ссылка на вики, может там что написано. Вот ссылка на SVN, можно попробовать счекаутить не пожатый код.

сори, сразу не выложил. есть не пожатый код - shCore.js.

это по сути и есть мануал, но я в нем не могу разобраться((

Link to comment
Share on other sites

  • 0

Сам использовал когда-то эту библиотеку, но отказался от нее по ряду причин. Насколько помню, многие вещи можно делать через настройки, без прямого вмешательства в код.

Вот здесь параметры описаны.

http://alexgorbatchev.com/SyntaxHighlighte.../configuration/

Link to comment
Share on other sites

  • 0

на сайте я смотрел настройки сразу как начал работать с этой библиотекой. но по toolbar там есть вкл / выкл, а так же описан новый copy to clipboard без исользования flash контейнера в разделе What's new. тулбар появляется со старта по умолчания, с одной кнопкой help.

дополнительные кнопки можно добавлять при помощи некой ф-ии конструктора (как мне уже удалось выяснить):

	function (e) {
this.create = function () { // функция, вызывающаяся при создании кнопки. Возвращает содержимое ссылки-кнопки либо сразу DOM узел
if (e.getParam('collapse') != true) return;
return k.config.strings.expandSource
};
this.execute = function (element, event) { // функция, вызывающаяся при клике по кнопке
}
}

я же не могу понять как эту ф-ю применять (как и где ее вызывать и что за аргумент e)

Link to comment
Share on other sites

  • 0

Всем привет!

Как я понял в версии 2.x toolbar был с 4 кнопками (view source, copy, print, help (смотрите статью)), но в 3 версии от этого отказались (SyntaxHighlighter not showing toolbar).

Кнопки для тулбара задаются в shCore.js переменной toolbar.items:


...
items : {
// Ordered lis of items in the toolbar. Can't expect `for (var n in items)` to be consistent.
list: ['expandSource', 'help'],

expandSource: {
getHtml: function(highlighter)
{
if (highlighter.getParam('collapse') != true)
return '';

var title = highlighter.getParam('title');
return sh.toolbar.getButtonHtml(highlighter, 'expandSource', title ? title : sh.config.strings.expandSource);
},

execute: function(highlighter)
{
var div = getHighlighterDivById(highlighter.id);
removeClass(div, 'collapsed');
}
},

/** Command to display the about dialog window. */
help: {
execute: function(highlighter)
{
var wnd = popup('', '_blank', 500, 250, 'scrollbars=0'),
doc = wnd.document
;

doc.write(sh.config.strings.aboutDialog);
doc.close();
wnd.focus();
}
}
}
},
...

Нужно копать в этом направлении..

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Обсуждения

    • Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com Портфолио https://www.behance.net/d4d4186e Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ    
    • Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com   Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ   Портфолио https://www.behance.net/d4d4186e
    • Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение.  .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } }  
    • Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy