將Twitter Bootstrap樣式應用於CodeMirror？

Question

我有一個用戶可以寫一些代碼的textarea表單。我用CodeMirror代碼編輯器替換了該textarea，所以我想將Bootstrap樣式應用到它。

這是形式是什麼樣子，現在，這裏除了代碼編輯器中的所有表單元素具有引導花式：

所以特別，我想我需要給代碼編輯器圓角，邊框，正確的寬度（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構建Bootstrap，則可能有一種方法可以應用mixin以避免重複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; 
}