将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; 
}