無法在Angular 2應用程序中使用Codemirror HTML語法突出顯示工作

試圖讓我的angular-cli（Angular 2）應用程序中的CodeMirror的HTML突出顯示正常工作（正如我所見，這對一些人來說也是一個問題）。無法在Angular 2應用程序中使用Codemirror HTML語法突出顯示工作

這是我有：

app.component.html

<codemirror [(ngModel)]="code" [config]="config"></codemirror> 
<div [innerHTML]="code"></div>

app.component.ts

export class AppComponent { 
    code = `<p>My HTML</p>\n<!-- hello -->\n<p>Your HTML</p>`; 

    config = { 
    mode: 'htmlmixed', 
    lineWrapping: false, 
    lineNumbers: true, 
    theme: 'monokai' 
    }; 
}

角cli.json（僅列出相關部分）

"addons": [ 
    "../node_modules/codemirror/mode/xml/xml.js", 
    "../node_modules/codemirror/mode/javascript/javascript.js", 
    "../node_modules/codemirror/mode/htmlmixed/htmlmixed.js" 
],

/.../

"styles": [ 
    "../node_modules/codemirror/lib/codemirror.css", 
    "../node_modules/codemirror/theme/monokai.css" 
],

app.module.ts

imports: [ 
    /* ... */ 
    CodemirrorModule, 
],

我試圖傳遞模式作爲對象或字符串的各種語法圖案，並且 - 如您所見 - 確保xml首先被加載。不走 - 重點不在那裏。在每次編輯angular-cli.json之後，我總是確保重新啓動ng serve。

有誰知道問題可以埋在哪裏？

來源

2016-11-07 user776686

您需要添加<script src="node_modules/codemirror/lib/codemirror.js"></script>到index.html，你需要導入你想在你的組件使用mode：

import 'codemirror/mode/htmlmixed/htmlmixed'; <-- this 

export class AppComponent { 
code = `<p>My HTML</p>\n<!-- hello -->\n<p>Your HTML</p>`; 

config = { 
    mode: 'htmlmixed', 
    lineWrapping: false, 
    lineNumbers: true, 
    theme: 'monokai' 
}; 
}

來源

2016-11-07 11:19:47

感謝。這顯然有幫助。看起來像搞亂angular-cli.json並不需要js庫，只是爲了附加css。 – user776686

@nuton是的，這是有點問題，不知道你是否會相信這一點，但我浪費了一整天的時間來找出如何突出顯示的工作。 :-) –

我會的。這種時間浪費在我每隔一天就會發生......現在，當我用非標準字體來設計客戶化主題時，我正在努力應對字體指標和不正確的文本寬度。不知道需要多長時間。咄。感謝分享。 – user776686

無法在Angular 2應用程序中使用Codemirror HTML語法突出顯示工作

回答

相關問題