Áp dụng kiểu khởi động Twitter Bootstrap cho CodeMirror?

Question

Tôi có một biểu mẫu với vùng văn bản nơi người dùng có thể viết một số mã. Tôi đang thay thế vùng văn bản đó bằng một hộp soạn thảo mã CodeMirror, vì vậy tôi muốn áp dụng cách tạo kiểu Bootstrap cho nó.

Đây là những gì các hình thức trông giống như ngay bây giờ, nơi tất cả các yếu tố hình thức trừ trình soạn thảo mã có Bootstrap stylings:

Vì vậy, nói riêng, tôi nghĩ tôi cần phải cung cấp trình soạn thảo mã góc tròn, một biên giới , chiều rộng chính xác (input-xxlarge) và các điểm nổi bật màu xanh khi di chuột qua.

Làm cách nào để thực hiện việc này? Có cách nào để làm điều này ngoài việc sao chép thủ công trên CSS cần thiết?

CẬP NHẬT

tôi đã cố gắng sao chép qua CSS textarea từ Bootstrap, và tất cả có vẻ tốt trừ CSS tập trung khi tôi nhấp vào bên trong trình biên tập mã. Đây là những gì tôi nhận được:

Điểm nổi bật là ở bên trong, thay vì bên ngoài. Bất kỳ ý tưởng làm thế nào tôi sửa lỗi này?

Đây là CSS tôi đã thêm bằng cách sao chép từ Bootstrap:

.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 ẩn gốc textarea và tạo ra một (khá phức tạp) cấu trúc của div và pre yếu tố. Bạn có thể tạo kiểu ngoài cùng div có lớp .CodeMirror để đạt được hiệu quả tương tự.

Điều này sẽ yêu cầu tùy chỉnh biểu định kiểu CodeMirror hoặc thêm kiểu của riêng bạn cho lớp/phần tử. Nếu bạn đang xây dựng Bootstrap sử dụng LESS, có thể có cách để áp dụng mixin để tránh trùng lặp kiểu textarea, mặc dù số lượng trùng lặp có thể là tối thiểu.

Answer 2

(Mã số Gương/Bootstrap v3) theme textarea:
Liệu chưa có hỗ trợ cho các quốc gia xác nhận (có lỗi, có cảnh báo, có-thành công)

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