Как добавить ключевые слова (и изменить их цвет) в CodeMirror?

Question

В настоящее время я использую скобки (редактор кода) для создания некоторых исходных файлов C. Он использует CodeMirror для обработки подсветки синтаксиса, и я пытаюсь на какое-то время попытаться добавить к нему ключевые слова.

Мне удалось добавить 'printf' в качестве ключевого слова, изменив this code here и добавив 'printf' к ключевым словам. Однако я хотел бы изменить его цвет и не смог этого сделать. Как я могу это сделать?

Кроме того, так же, как строки, такие как «//» выделяют всю строку, я хотел бы также сделать это, если строка начинается с «#», меняя цвет.

Я уверен, что мне нужно изменить файл clike.js, чтобы добавить новые ключевые слова и еще один .css-файл, чтобы изменить цвета, но я просто не могу его обработать.

Спасибо за любую помощь.

Answer 1

Решено.

Во-первых, я изменил the 'clike.js' file, добавив следующие блоки «if», чтобы обрабатывать изменения, которые я хотел.

function tokenBase(stream, state) { 
    var ch = stream.next(); 
    if (ch == "#") { 
     if (stream.eat("i")) { 
     stream.skipTo(" ") 
     return "include"; 
     } 
     else if (stream.eat("p")) { 
     stream.skipToEnd(); 
     return "pragma"; 
     } 
    } 
    ... 

Так как файл анализируется, внешний блок проверяет наличие «#». Когда один обнаружен, он затем проверяет, является ли следующая буква «i» или «p».
Это потому, что я хотел бы выделить либо:

#include ... 

или

#pragma ... 

Если «я» встречается в качестве следующего символа, я использую stream.skipTo(" "), чтобы перейти к следующему пробельных так, что только #include подсвечивается.
Если найдено «p», вместо этого я использую stream.skipToEnd(), чтобы выделить всю строку.

Оператор return возвращает строку, относящуюся к тому, что было найдено, и соответствующий стиль в ваших файлах .css тем указывает такие вещи, как цвет или стиль.
Например, в моем случае скользящая по умолчанию тема темы находится по адресу Brackets.app/Contents/www/extensions/default/LightTheme/main.less.
В этом файле я добавил следующие строки:

.cm-pragma {color: #a50000;} 
.cm-include {color: #A0522D;} 

Это определяет то цвет, который вы хотите, чтобы текст был, но я полагаю, другие вещи, которые могут быть заданы, а также, например, полужирный, курсив, может быть, шрифт и т.д.

Если вы хотели бы сделать новый тип возвращаемого значения «тест», вы бы return "test"; в вашем файла JavaScript и ваш соответствующий стиль в файле темы будет называться .cm-include {...};.

Надеюсь, это может помочь любому, кто хочет сделать то же самое.