User:Remember the dot/Syntax highlighter/uk
Я створив сценарій, який барвисто виділяє синтаксис у вікні редагування. На відміну від інших сценаріїв підсвічування синтаксису на кшталт wikEd, AceWikiEditor і CodeMirror, цей:
- Оновлює підсвічування автоматично під час набору.
- Не ламає кнопки «Скасувати» та «Повторити».
- Не ламає перевірку орфографії.
- Сумісний із більшістю інший сценаріїв, які впливають на вікно редагування.
Встановлення
[edit]Будь ласка, обов'язково прочитайте розділ «Відомі проблеми» перед установленням сценарію.
Для кінцевого користувача, якщо встановлено у Вікіпедії
[edit]Якщо підсвічувальник синтаксису доступний як додаток у вашій Вікіпедії, то перейдіть до своїх налаштувань і увімкніть його.
Для кінцевого користувача, якщо не встановлено у Вікіпедії
[edit]Якщо встановлення як додатку недоступне, то додайте ці рядки до своєї сторінки common.js:
//syntax highlighter
mw.loader.load('//www.mediawiki.org/w/index.php?title=MediaWiki:Gadget-DotsSyntaxHighlighter.js&action=raw&ctype=text/javascript');
Наприклад, якщо Українська Вікіпедія не надає підсвічувальник синтаксису як додаток, то ви додали б його до
https://uk.wikipedia.org/wiki/User:Your_Username/common.js
Для адміністраторів сайтів Вікімедіа
[edit]У своїй Вікіпедії створіть сторінку MediaWiki:Gadget-DotsSyntaxHighlighter.js з кодом
mw.loader.load('//www.mediawiki.org/w/index.php?title=MediaWiki:Gadget-DotsSyntaxHighlighter.js&action=raw&ctype=text/javascript');
Потім додайте на сторінку MediaWiki:Gadgets-definition новий рядок
* DotsSyntaxHighlighter[ResourceLoader]|DotsSyntaxHighlighter.js
та створіть сторінку MediaWiki:Gadget-DotsSyntaxHighlighter з текстом
[[mw:User:Remember the dot/Syntax highlighter|Syntax highlighter]]: Барвисто виділяє синтаксис у вікні редагування.
Для адміністраторів поза-Вікімедійних сайтів
[edit]У своїй Вікіпедії створіть сторінку MediaWiki:Gadget-DotsSyntaxHighlighter.js та скопіюйте на неї початковий код із User:Remember the dot/Syntax highlighter.js. Потім додайте на сторінку MediaWiki:Gadgets-definition новий рядок
* DotsSyntaxHighlighter[ResourceLoader]|DotsSyntaxHighlighter.js
і створіть сторінку MediaWiki:Gadget-DotsSyntaxHighlighter з текстом
[https://www.mediawiki.org/wiki/User:Remember_the_dot/Syntax_highlighter Syntax highlighter]: Барвисто виділяє синтаксис у вікні редагування.
Необхідний MediaWiki 1.22 або вище.
Відомі проблеми
[edit]Сумісність
[edit]- Підсвічувальник найліпше працює в останній версії Firefox.
- Підсвічувальник працює майже весь час в останніх версіях Chrome, Safari й Opera, але не працює правильно в тексті, написаному в певних написаннях, зокрема тайському та тибетському.
- Підсвічувальник не працює в Internet Explorer або Edge (їхні помилки занадто суворі). Підсвічувальник навіть не намагається працювати, якщо виявлено один із цих веб-браузерів.
- Підсвічувальник несумісний із деякими додатками, браузерними додатками й іншими налаштуваннями.
Синтаксичний аналіз
[edit]- З метою продуктивності підсвічувальник вимагає від усіх тегів правильності XML. Наприклад, переконайтеся, що, почавши тег
<p>, ви закінчили його</p>, і викоирстовуйте<br/>замість<br>. - З метою продуктивності підсвічувальник синтаксису не може обробляти
'''apostrophe italic''чи''italic apostrophe'''— він вважає їх недійсним синтаксисом. Я пропоную натомість використовувати'<i>apostrophe italic</i>і<i>italic apostrophe'</i>. - Теги
<pre>, створені шляхом розміщення пробілу на початку рядка, не підсвічуються. Це так, тому що підсвічувальник недостатньо розумний, аби сказати, коли пробіл на початку рядка є просто пропуском усередині шаблону. - Перемикачі поведінки на кшталт
__NOTOC__не підсвічуються. - Зовнішні посилання, створені за допомогою
{{fullurl:}}або шаблонів, не підсвічуються. Ви бачитимете[{{fullurl:Веб-сторінка}} зовнішнє посилання]замість[{{fullurl:Веб-сторінка}} зовнішнє посилання].
Різне
[edit]- Підсвічувальник не працює добре при редагуванні довгих статей та автоматично вимикатиметься, якщо затримується на понад 50 мс. Якщо так сталося, то з'явиться повідомлення з поясненням того, що сталося, та пропозицією, як обійти його чи збільшити тайм-аут.
- Підсвічувальник не виконується під час завантаження файлів.
- Підсвічувальник може перекривати ваші користувацькі стилі, пов'язані з вікном редагування.
Налаштування
[edit]Кольори
[edit]Легко змінити підсвічувальник для використання інших кольорів або непідсвічування певних синтаксисів. Доступні такі налаштування кольорів:
| defaultColor | для розпізнаних синтаксичних елементів без визначеного конкретного кольору |
| boldOrItalicColor | '''жирний''' ''курсив''
|
| wikilinkColor | [[вікіпосилання]]
|
| externalLinkColor | [http:// іменоване зовнішнє посилання], [http://numbered-external-link.com], http://bare-external-link.com
|
| headingColor | == Заголовок ==, ; Малий заголовок
|
| listOrIndentColor | * маркований список, # нумерований список, : відступ
|
| signatureColor | ~~~~
|
| tableColor | {| таблиця |}
|
| templateColor | {{шаблон}}
|
| parameterColor | {{{параметр шаблону}}}
|
| hrColor | ----
|
| tagColor | <tag>...</tag>, <tag/>
|
| commentColor | <!-- коментар -->
|
| entityColor | &entity;
|
| backgroundColor | колір тла вікна редагування |
| foregroundColor | колір тексту у вікні редагування |
Наприклад, аби зробити вікіпосилання блакитним, а зовнішні посилання помаранчевим, помістіть наступне до свого common.js (якщо встановлено підсвічувальник як додаток, опустивши перші два рядки, або ваш веб-браузер зависатиме):
// підсвічувальник синтаксису
mw.loader.load('//www.mediawiki.org/w/index.php?title=MediaWiki:Gadget-DotsSyntaxHighlighter.js&action=raw&ctype=text/javascript');
syntaxHighlighterConfig = {
externalLinkColor: "#FFCC66", // помаранчевий
wikilinkColor: "#E6FFFF", // блакитний
}
Аби не підсвічувати синтаксис, встановіть його колір у "". Наприклад, аби вимкнути підсвічування зовнішніх посилань:
// підсвічувальник синтаксису
mw.loader.load('//www.mediawiki.org/w/index.php?title=MediaWiki:Gadget-DotsSyntaxHighlighter.js&action=raw&ctype=text/javascript');
syntaxHighlighterConfig = {
externalLinkColor: "",
}
Аби не підсвічувати жоден синтаксис, за винятком того, що ви явно хочете, встановіть defaultColor у "", а колір кожного бажаного синтаксису у підсвічування. Якщо ви просто хочете звичайний колір, встановіть його у "normal". Наприклад, для підсвічування тільки тегів:
// підсвічувальник синтаксису
mw.loader.load('//www.mediawiki.org/w/index.php?title=MediaWiki:Gadget-DotsSyntaxHighlighter.js&action=raw&ctype=text/javascript');
syntaxHighlighterConfig = {
defaultColor: "",
tagColor: "normal",
}
Тайм-аут
[edit]Ви можете вказати timeout, який замінює тайм-аут за замовчуванням 20 мс. Наприклад, якщо у вас усе гаразд із млявістю під час набору тексту, і ви хочете вимкнути підсвічування лише, якщо воно займає понад 30 мс, помістіть наступне до свого common.js:
// підсвічувальник синтаксису
mw.loader.load('//www.mediawiki.org/w/index.php?title=MediaWiki:Gadget-DotsSyntaxHighlighter.js&action=raw&ctype=text/javascript');
syntaxHighlighterConfig = {
timeout: 30,
}
Якщо ви встановили підсвічувальник як додаток, то опустіть перші два рядки, або ваш веб-браузер зависатиме.
Поза-вікітекстові теги
[edit]Деякі теги на кшталт <math> і <source> не використовують вікітекст, а тому жоден вікітекст не підсвічуватиметься всередині них. Ви можете налаштувати список тегів на кшталт source шляхом установлення sourceTags у масив назв тегів. Наприклад, для вимкнення підсвічування синтаксису всередині гіпотетичного тегу <foo> на додачу до замовчувань помістіть наступне до свого common.js:
// підсвічувальник синтаксису
mw.loader.load('//www.mediawiki.org/w/index.php?title=MediaWiki:Gadget-DotsSyntaxHighlighter.js&action=raw&ctype=text/javascript');
syntaxHighlighterConfig = {
sourceTags: ["math", "syntaxhighlight", "source", "timeline", "hiero", "foo"],
}
Інші теги на кшталт <pre> та <nowiki> не виокристовують вікітекст, але виконують обробку символьних сутностей ( , наприклад). Список тегів на кшталт nowiki контролюється властивістю nowikiTags. Наприклад, для підсвічування лише символьних сутностей усередині тегу <abbr> помістіть наступне до свого common.js:
// підсвічувальник синтаксису
mw.loader.load('//www.mediawiki.org/w/index.php?title=MediaWiki:Gadget-DotsSyntaxHighlighter.js&action=raw&ctype=text/javascript');
syntaxHighlighterConfig = {
nowikiTags: ["nowiki", "pre", "abbr"],
}
В обох прикладах, якщо ви встановили підсвічувальник як додаток, опустіть перші два рядки, або ваш веб-браузер зависатиме.
Замовчування сайту
[edit]Всі властивості, які можна вказувати у змінній syntaxHighlighterConfig, можна вказувати й у змінній syntaxHighlighterSiteConfig. syntaxHighlighterSiteConfig призначено для замовчувань сайту, а syntaxHighlighterConfig для користувацьких налаштувань. Властивості syntaxHighlighterConfig мають пріоритет над властивостями syntaxHighlighterSiteConfig, а властивості syntaxHighlighterSiteConfig мають пріоритет над вбудованими замовчуваннями.
Наприклад, якщо ваш сайт не має жодного встановленого розширення MediaWiki, ви можете захотіти видалити підтримки тегів на кшталт source. Для цього додайте наступне наприкінці MediaWiki:Gadget-DotsSyntaxHighlighter:
syntaxHighlighterSiteConfig = {
sourceTags: [],
}
Звітування про помилки
[edit]- Увага: Пам'ятайте перевіряти, чи є помилка, про яку ви хочете звітувати, вже у відомих проблемах.
Звітуючи про помилки мені, будь ласка, включайте:
- Детальний опис проблеми.
- Посилання на сторінку, де видно помилку, або зразок вікітексту, що викликає проблему.
- Інформацію про User-Agent вашого веб-браузера.
- Оформлення MediaWiki, яке ви використовуєте.
- Список додатків, які ви увімкнули.
- Список будь-яких нетипових JavaScript або CSS, які ви увімкнули.
- Список будь-яких розширень веб-браузера, які ви увімкнули.
Початковий код
[edit]Для зменшення часу завантаження й оскільки ResourceLoader автоматично не скорочує сценарії, імпортовані з інших Вікіпедій, сам MediaWiki:Gadget-DotsSyntaxHighlighter.js тримається у скороченому вигляді. Дійсний початковий код доступний на User:Remember the dot/Syntax highlighter.js.
Огляд підходу
[edit]Даний сценарій створює фоновий div під назвою wpTextbox0, який вставлено за вікном редагування wpTextbox1. wpTextbox0 і wpTextbox1 синхронізовані за стилем, і тло wpTextbox1 зроблено прозорим так, що wpTextbox0 видно крізь нього. Потім, блоки тексту додаються до wpTextbox0 як елементи span. Текст на блоках прозорий, але тло блоків розфарбоване. Використання того ж тексту у wpTextbox0 як у wpTextbox1 ліквідує будь-які аномалії позиціювання від динамічно складуваних символів. Оскільки wpTextbox0 і wpTextbox1 (теоретично) ідеально синхронізовані, кольорове тло з'являється користувачеві якби воно було додано прямо до wpTextbox1.
Текст у wpTextbox0 насправді не додається до textContents елементів span. Натомість, він додається до псевдоелементів :before й :after кожного span за допомогою динамічно генерованих таблиць стилів CSS. Це усуває проблеми під час спроби використати можливість браузера пошуку на сторінці, оскільки, якщо б textContent використовувався замість умісту CSS, браузер сприймав би і дійсний текст у wpTextbox1, і прозорий у wpTextbox0 на сторінці.