Слияние кода завершено, страница обновится автоматически
iceCode — это плагин выделителя кода с минималистичным дизайном, который, вероятно, является первым в своем роде js-плагином выделения кода, созданным в Китае. Разработан чисто на JavaScript, он имеет очень компактный размер и не требует никаких зависимостей, достаточно одного файла .js. В данный момент этот плагин уже включает в себя выделение кода для таких популярных языков программирования как HTML, XML, CSS, JS, PHP, Python, JAVA, SQL, GO, C++, C#, C и других.
Современный дизайн, простота и скорость!
Вы, наверное, знаете такие JavaScript-плагины для выделения кода, как SyntaxHighlighter, Google Code Prettify и Highlight. Все эти известные плагины были созданы зарубежными специалистами. А есть ли что-то подобное из Китая? По крайней мере, мне известно, что среди наиболее используемых плагинов нет ни одного китайского. После завершения работы над iceEditor (richText editor) я начал исследовать принципы выделения кода. Это заняло около месяца два года назад, и я справился с задачей. Первый вариант был очень эффективным, но механизм плагина нуждался в доработке.
Например, часть кода на php:
echo "hello world"; // это комментарийПри использовании SyntaxHighlighter заметно, что комментарии не работают должным образом, поскольку после применения регулярного выражения комментарии становятся// это комментарий"; // это комментарий, а содержимое, заключённое в двойные кавычки, не обрабатывается корректно, следовательно, остальной код не подсвечивается. IceCode же решает эту проблему с регулярными выражениями идеально.Однако этого было недостаточно для меня. Я начал анализировать различные JavaScript-плагины для выделения кода, чтобы понять их принципы реализации. В результате я полностью перезаписал ядро iceCode, то есть третью версию. Теперь его производительность ещё выше, чем у SyntaxHighlighter, признанного лучшим JavaScript-плагином для выделения кода. Производительность iceCode превышает его более чем в три раза, и он уже включает в себя выделение кода для нескольких десятков популярных языков программирования, без необходимости использования дополнительных библиотек. Очень просто и лёгковесно.Сегодня iceCode полностью готов к использованию и открыт на gitee (не выбран GitHub потому что китайская платформа Gitee работает отлично, давайте поддерживать Gitee!). Я хочу сказать, что наши китайские плагины для выделения кода будут становиться все лучше и лучше. По крайней мере, на основе множества тестов можно констатировать, что они не уступают SyntaxHighlighter по качеству выделения кода, особенно когда дело доходит до настройки выделения для новых языков программирования.
data-id: отображает HTML-код для данного IDdata-width: позволяет установить ширинуdata-height: позволяет установить высоту<!-- Вставьте код внутрь тега template, установите класс, после iceCode укажите язык программирования -->
<template class="iceCode:php">
/* ---Пример кода--- */
function main() {
var a = "this is a example";
alert("hello world " + a);
}
/* ---Пример кода--- */
</template>
``````markdown
<!-- Если вам нужно показывать пример 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 равно указанному ID, таким образом, все HTML содержимое demo1 будет выделено,
что не повлияет на макет demo1 -->
<template data-id="demo1"></template>
```javascript
// Это всё, что нужно сделать, действительно просто
ice.code.light();
<!-- Вставьте код в тег template, установите класс, после iceCode через двоеточие укажите язык программирования -->
<template class="iceCode:demo2">
/* ---Пример кода--- */
function main() {
var a = 1024;
var b = "это пример кода";
console.log(a);
alert("Hello World " + b);
}
/* ---Пример кода--- */
</template>
// ice.code.languages — это правила синтаксического highlighting для кода, можно добавлять другие языки, используя несколько псевдонимов разделённых пробелами
// 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 code.replace(/\b([\d]+)\b/g, function(a) {
return ice.code.setCss('number', a);
});
}},
];
ice.code.light();
singleQuotes: одиночные кавычки
number: число
bracket: скобка
operator: оператор
url: URL-ссылка
htmlComment: множественный HTML-комментарий <! -- …… -->
xmlComment: множественный XML-комментарий <! [ …… [ …… ]]>
multiLineComment: универсальный множественный комментарий /* …… */
pythonComment: множественный Python-комментарий """ …… """
singleLineComment: однострочный комментарий // ……
singleLinePerlComment: однострочный Perl-комментарий # ……
script: форматированный JavaScript-код внутри тега script в HTML
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Комментарии ( 0 )