Слияние кода завершено, страница обновится автоматически
iceCode: код-подсветка JavaScript
iceCode — это простой и стильный плагин для подсветки кода JavaScript, который можно считать первым плагином для подсветки кода на JavaScript в Китае. Он разработан исключительно на основе JavaScript и не требует никаких зависимостей, кроме одного файла JavaScript. В настоящее время этот плагин поддерживает подсветку популярных языков программирования, таких как HTML, XML, CSS, JavaScript, PHP, Python, Java, SQL, GO, C++, C# и C.
Все знают такие плагины для подсветки кода, как SyntaxHighlighter, Google Code Prettify и Highlight. Все они созданы зарубежными разработчиками. Есть ли китайские аналоги? Насколько мне известно, ни один из наиболее часто используемых плагинов для подсветки кода не является китайским. После завершения работы над iceEditor, богатым текстовым редактором, я начал изучать принципы подсветки кода. Примерно через месяц после начала работы я создал первую версию, которая была очень эффективной. Однако механизм плагина был не совсем совершенным, и на этом работа остановилась.
Позже, примерно через два года, когда я снова начал использовать этот плагин, я потратил полдня на переписывание ядра, используя массивы для разделения кода на сегменты. Это решило проблему с подсветкой однострочных комментариев в SyntaxHighlighter.
Например, для фрагмента кода PHP:
echo "hello world//это комментарий"; //это комментарий
SyntaxHighlighter не сможет выделить комментарий, потому что после регулярного выражения для комментария //это комментарий двойные кавычки обрабатываются, и следующий код не будет выделен. iceCode идеально решает эту проблему с регулярными выражениями, но всё ещё не соответствует моим требованиям к совершенству. Я начал анализировать основные плагины для подсветки кода и их принципы реализации. Наконец, я переписал ядро iceCode в третий раз. На этот раз ядро стало более эффективным, производительность в три раза выше, чем у SyntaxHighlighter, самого известного плагина для подсветки JavaScript, и уже поддерживает множество популярных языков программирования без дополнительных ссылок, что делает его очень компактным и лёгким.
В настоящее время iceCode полностью разработан и открыт на gitee (я не выбрал GitHub, потому что китайский gitee работает очень хорошо, поэтому я призываю всех поддержать gitee!). Я хочу сказать, что наши китайские плагины для подсветки кода будут становиться всё лучше и лучше. По крайней мере, текущие обширные тесты показывают, что они не уступают SyntaxHighlighter, особенно при настройке подсветки для конкретных языков.
<!-- Поместите код в шаблонный тег и установите класс. iceCode использует двоеточие после имени класса для указания языка программирования -->
<template class="iceCode:php">
/* ---Пример кода----*/
function main() {
var a = "this is a example";
alert("hello world " + a);
}
/* ---Пример кода----*/
</template>
<!-- Если вы хотите отобразить пример HTML и связанный с ним код, это проще. -->
<div id="demo1">
<div class="title">Одинокая рыба</div>
<div class="content">
<div class="text">Никогда не думал, что я такой одинокий...</div>
<div class="time">2014-06-12</div>
</div>
</div>
<!-- Значение атрибута data-id совпадает с идентификатором выше, что позволяет выделить весь HTML-код в demo1, не влияя на стиль макета demo1 -->
<template data-id="demo1"></template>
//Вот так просто, вот так легко
ice.code.light();
<!-- Поместите код в шаблонный тег и установите класс. iceCode использует двоеточие после имени класса для указания языка программирования -->
<template class="iceCode:demo2">
/* ---Пример кода----*/
function main(){
var a = 1024;
var b = "this is a example";
console.log(a);
alert("hello world " + b);
}
/* ---Пример кода----*/
</template>
//ice.code.languages — правила подсветки кода, можно свободно устанавливать другие языки, разделяя несколько псевдонимов пробелами
//ice.code.regexLib — встроенная библиотека регулярных выражений, подробности см. в документации ниже
//regex принимает параметры регулярного выражения или функции (code), code — содержимое кода, css — класс содержимого
ice.code.languages['demo1 demo2 demo3'] = [
{regex:ice.code.regexLib.doubleQuotes, css:'string'},
{regex:ice.code.regexLib.operator, css:'operator'},
{regex:function(code){
//Получить число
return data.replace(/\b([\d]+)\b/g, function(a) {
return ice.code.setCss('number',a);
});
}},
];
ice.code.light();
doubleQuotes: двойные кавычки
singleQuotes: одинарные кавычки
number: число
bracket: скобки
operator: оператор
url: URL-ссылка
htmlComment: многострочный комментарий HTML <!-- …… -->
xmlComment: многострочный комментарий XML <![ …… [ …… ]]>
multiLineComment: универсальный многострочный комментарий /* …… */
pythonComment: многострочный комментарий Python """ …… """
singleLineComment: однострочный комментарий // ……
singleLinePerlComment: однострочный комментарий # ……
script: форматирование кода скрипта в HTML
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Комментарии ( 0 )