2017-02-19 6 views
1

У меня есть два текстовых поля: один с кодом HTML, а другой с CSS-кодом, но режим для CodeMirror (режим HTML) применяется для всей страницы, поэтому код CSS просто не подсвечивается.Использование Codemirror дважды на одной странице (HTML и CSS) приводит к применению только одного режима подсветки

Ссылка на режим Codemirrors CSS: Codemirror CSS Mode

я никак не мог найти решение в руководстве CodeMirror, это все, что я нашел:

режим: строка | приемлю Режим использования , Если не указано, это будет по умолчанию для первого загруженного режима. Это может быть строка, которая либо просто называет режим, либо является типом MIME, связанным с этим режимом. В качестве альтернативы, это может быть объект, содержащий параметры конфигурации для режима, с именем, которое определяет режим (например, {name: "javascript", json: true}). Демо-страницы для каждого режима содержат информацию о том, какие параметры конфигурации поддерживает режим . Вы можете спросить CodeMirror, какие режимы и типы MIME были , определяемые путем проверки объектов CodeMirror.modes и CodeMirror.mimeModes . Названия режимов первой карты в своих конструкторах, и второй карты MIME типы в режиме спецификации

Link to the above info in Codemirrors manual

Мой TextField код и идентификаторы:

<body> 

<a id="header-text">You will be redirected to the page in 5 seconds...</a> 

<textarea id='code2' name='code2'> 
#demo_input { 
    display: none; 
} 
body { 
    background-color: #272822; 
} 
body > .CodeMirror { 
    margin: auto; 
    border: 1px solid #cccccc; 
    width: 45%; 
} 
</textarea> 

<textarea id="code" name="code"> 
&lt;html style="color: green"&gt; 
    &lt;!-- this is a comment --&gt; 
    &lt;head&gt; 
    &lt;title&gt;HTML Example&lt;/title&gt; 
    &lt;/head&gt; 
    &lt;body&gt; 
    The indentation tries to be &lt;em&gt;somewhat &amp;quot;do what 
    I mean&amp;quot;&lt;/em&gt;... but might not match your style. 
    &lt;/body&gt; 
&lt;/html&gt; 
</textarea> 
    </body> 

Примечание: Это а не мой код, просто изображение того, как выглядит сайт, код выше.

enter image description here

+0

Я добавил яваскрипт тега, поскольку CodeMirror полностью написан на JavaScript, и я считаю, вот где решение лежит. – Omnitored

+0

Кроме того, ваше последнее редактирование не является необходимым и менее читаемым. Лучше на английском языке сказать «Я есть», а не «у меня есть», поскольку последнее было бы необходимо, только если вы хотели бы подчеркнуть «сделать». Это было бы полезно, если бы кто-то ранее противоречил этому утверждению, например. – halfer

+2

Не могли бы вы вставить часть кода с включением Codemirror, ее режимов и инициализации ваших текстовых областей? –

ответ

3

Я создал следующий рабочий пример на JSFiddle. Удостоверьтесь, что:

  • Используйте последнюю версию CodeMirror.
  • Включить следующие необходимые JavaScript модули из CodeMirror:
    • Для CSS, просто включите mode/css/css.js.
    • Для HTML, включает в себя как mode/htmlmixed/htmlmixed.js (HTML + CSS + JS) и mode/xml/xml.js (XML требуется для разбора HTML)

 Смежные вопросы

  • Нет связанных вопросов^_^