Gists nhúng có ngắt dòng phụ

Question

Tôi đã nhúng một github gist vào blog của tôi và mã kết quả có thêm một số ngắt dòng ở trên cùng và dưới cùng mà tôi muốn xóa. Blog của tôi sử dụng css từ dự án bootstrap, và nó cũng tweaks font:

body { 
    font: 100%/1.5 sans-serif; 
} 

Tôi đã created this fiddle như một bản demo của vấn đề này.

Cách tốt nhất để loại bỏ các ngắt là gì? Tôi có nên tạo kiểu cho phông chữ của gist được nhúng không? Cảm ơn!

Answer 1

Tôi đã tìm ra, đó là chiều cao dòng. Bạn sẽ cần đảm bảo rằng chiều cao dòng cho số dòng mã danh sách khớp với chiều cao dòng cho chính mã đó.

Answer 2

Tôi không chắc chắn nếu đây là những gì bạn đang tìm kiếm.

hãy có một cái nhìn về vấn đề này jsFiddle

/* Your Css */ 
    body { 
      font: 100%/1.35 sans-serif; 
    } 

Tôi đã có được những gì bạn nghĩa là gì? Các dòng phụ ở trên cùng và ở dưới cùng?

Answer 3

Điều này xảy ra do khác nhau line-height trong số dòng và dòng mã. Và đó là vì bạn sử dụng tương đối line-height (phụ thuộc vào kích thước phông chữ) và kích thước phông chữ khác nhau cho số dòng (kích thước phông chữ) và mã dòng (bootstrap ghi đè font-size và line-height cho các yếu tố pre và code). Để khắc phục điều này, bạn có thể thiết lập lại phong cách bootstrap cho GIST github:

UPD:

.gist pre, 
.gist code { 
    font: inherit; 
    white-space: pre; 
} 

bằng chứng: http://jsfiddle.net/W25px/8/

Answer 4

Ngoài câu trả lời Sody, nơi bạn phải thiết lập lại phông chữ, bạn cũng có thay đổi hành vi thuộc tính white-space để căn chỉnh mã và số dòng.

Với:

.gist pre, 
.gist code { 
    font: inherit; 
    white-space: pre; 
} 

ý chính của bạn sẽ hiển thị một cách hoàn hảo: JsFiddle

Answer 5

Thêm phong cách này trước khi chọn cơ thể * {line-height: normal;}

Xem này Fiddle

bạn cũng có thể sử dụng line-height: 100% hơn bình thường (một littl e khác biệt bạn sẽ thấy)

Và như đã đề cập như trong câu trả lời khác, bạn cũng có thể sử dụng line-height có bên

.gist pre, 
.gist code { 
    line-height: 100%; 
} 

Nếu điều này cũng không giải quyết được vấn đề của bạn, lợi nhuận hoặc giá trị đệm có thể có đã được thiết lập. Sửa đổi rằng margin: 0; padding: 0;

Answer 6

Dường như tập lệnh nhúng github đã nhúng sai chiều cao dòng 1,5 một cách thú vị.

<div class="gist"> 
    <script src="https://gist.github.com/yosemitebandit/5295069.js?file=train.py"> 
    </script> 
</div> 

.gist { 
    font:100%/1 sans-serif; 
} 

có vẻ là một sửa chữa đơn giản.