Twitter BootstrapスタイリングをCodeMirrorに適用しますか？

Question

私は、ユーザーがコードを書くことができるテキストエリアを持つフォームを持っています。私はそのテキストエリアをCodeMirrorコードエディタボックスに置き換えているので、ブートストラップスタイリングを適用したいと思っています。

ので、特に、私はコードエディタを提供する必要があると思うの角を丸め、国境：コードエディタ以外のすべてのフォーム要素は、ブートストラップスタイリングを持って

これは、フォームが今のように見えるもので、 、正しい幅（input-xxlarge）、マウスオーバー時の青色のハイライトが含まれます。

どうすればよいですか？必要なCSSを手動でコピーする以外にこれを行う方法はありますか？

UPDATE

私は、ブートストラップからのtextarea CSSを超えるコピーを試みたが、私はコードエディタ内でクリックしたときに、すべてのフォーカスCSSを除いよさそうです。

ハイライトではなく、外の、内側にある：これは私が得るものです。どのように私はこれを解決する任意のアイデア？

これは私がブートストラップからコピーすることによって追加CSSである：

.CodeMirror { 
     line-height: 1.3em; 
     font-family: monospace; 

     /* Necessary so the scrollbar can be absolutely positioned within the wrapper on Lion. */ 
     position: relative; 
     /* This prevents unwanted scrollbars from showing up on the body and wrapper in IE. */ 
     overflow: hidden; 
     background-color: white; 
     width: 530px; 

     /* Copied from Bootstrap's textarea */ 
     display: inline-block; 
     padding: 4px 6px; 
     margin-bottom: 9px; 
     color: #555555; 
     border: 1px solid #ccc; 
     -webkit-border-radius: 3px; 
     -moz-border-radius: 3px; 
     border-radius: 3px; 
     -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); 
     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); 
     box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); 
     -webkit-transition: border linear 0.2s, box-shadow linear 0.2s; 
     -moz-transition: border linear 0.2s, box-shadow linear 0.2s; 
     -ms-transition: border linear 0.2s, box-shadow linear 0.2s; 
     -o-transition: border linear 0.2s, box-shadow linear 0.2s; 
     transition: border linear 0.2s, box-shadow linear 0.2s; 
    } 

    .CodeMirror-focused { 
     /* Copied from Bootstrap's textarea */ 
     border-color: rgba(82, 168, 236, 0.8); 
     outline: 0; 
     outline: thin dotted \9; 
     /* IE6-9 */ 

     -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); 
     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); 
       box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); 
    } 

Answer 1

CodeMirrorは、元textareaを隠し、divとpre要素の（かなり複雑な）構造を作成します。同じ効果を達成するために、.CodeMirrorのクラスを持つ最も外側のdivをスタイルすることができます。

これには、CodeMirrorスタイルシートをカスタマイズするか、クラス/要素に独自のスタイルを追加する必要があります。 LESSを使用してブートストラップを構築する場合は、textareaスタイルの複製を避けるためにミックスインを適用する方法があるかもしれませんが、複製の量はおそらく最小です。

Answer 2

（コードミラー/ v3のブートストラップ）のtextareaテーマ：
はまだ検証状態をサポートしていません（、エラーを持って、警告を持っている、持っている - 成功を）

.CodeMirror { 
    /* Bootstrap Settings */ 
    box-sizing: border-box; 
    margin: 0; 
    font: inherit; 
    overflow: auto; 
    font-family: inherit; 
    display: block; 
    width: 100%; 
    padding: 6px 12px; 
    font-size: 14px; 
    line-height: 1.42857143; 
    color: #555; 
    background-color: #fff; 
    background-image: none; 
    border: 1px solid #ccc; 
    border-radius: 4px; 
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); 
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; 
    /* Code Mirror Settings */ 
    font-family: monospace; 
    position: relative; 
    overflow: hidden; 
} 

.CodeMirror-focused { 
    /* Bootstrap Settings */ 
    border-color: #66afe9; 
    outline: 0; 
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6); 
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; 
}