Thêm đoạn có kiểu tùy chỉnh trong ô đánh dấu

Question

Tôi muốn thêm nhiều phần tử định dạng hơn số được cung cấp bởi Markdown synthax trong một IPython Notebook. Ví dụ: tôi muốn thêm "Hộp cảnh báo" hoặc "Hộp ghi nhớ" về cơ bản là đoạn văn có các kiểu khác nhau (ví dụ: màu nền, đường viền, biểu tượng, v.v ...) khác nhau.

Tôi đoán tôi có thể thêm mã HTML vào ô, ví dụ: <div> với kiểu nội tuyến. Nhưng cách "thích hợp" để làm điều đó là gì, tôi có nghĩa là một nhà phát triển ipython quảng bá?

Ví dụ được đánh giá cao.

NB: Tôi đang sử dụng phiên bản 1.0dev hiện tại từ git master.

Answer 1

Một cách đơn giản để thêm các hộp cảnh báo, ghi chú, thành công (v.v ...) (còn được gọi là các hộp cảnh báo hoặc cảnh báo) chỉ đơn giản là sử dụng bootstrap classes đã được bao gồm trong sổ ghi chép. Thông báo trước duy nhất là các liên kết và các kiểu khác (ví dụ: in đậm) phải được chỉ định bằng HTML bên trong hộp.

Ví dụ

Một ô markdown chứa mã này:

# Upload data files 
<p class="lead">This <a href="https://jupyter.org/">Jupyter notebook</a> 
shows how to upload data files to be converted 
to [Photon-HDF5](http://photon-hdf5.org) format. </p> 

<i>Please send feedback and report any problems to the 
[Photon-HDF5 google group](https://groups.google.com/forum/#!forum/photon-hdf5).</i> 

<br> 
<div class="alert alert-warning"> 
<b>NOTE</b> Uploading data files is only necessary when running the notebook online. 
</div> 

sẽ dẫn đến kết quả này:

Bạn có thể thay đổi alert-warning với alert-success, alert-info hoặc alert-danger để có được màu sắc khác nhau cho hộp.

Answer 2

Cập nhật: Kỹ thuật này không còn hoạt động trong IPython 4.0/Jupyter kể từ khi sổ ghi chép được thay đổi.

Tôi tin rằng cách tốt nhất để tạo kiểu như vậy là tạo mục nhập đánh dấu ở đầu tài liệu của bạn và để thu thập các kiểu của bạn ở đó. Kể từ khi một tế bào markdown có thể chứa bất kỳ mã HTML hợp lệ, nó có thể chứa (ví dụ)

<style> 
    .warning { color: red; } 
</style> 

Xem Matt Davis' PyCon 2013 talk, khoảng 22 phút ở trong Q & A cho một ví dụ về điều này trong sử dụng.

Answer 3

trả lời cho câu hỏi của riêng tôi ...

giải pháp khác

Jim đề nghị thêm một số phong cách CSS tùy chỉnh trong một tế bào markdown của mỗi máy tính xách tay. Giải pháp này hoạt động, nhưng không thuận tiện vì bạn cần nhúng kiểu trên mỗi sổ tay. Trong trường hợp của tôi, tôi muốn một phong cách toàn cầu và tôi không muốn sửa đổi tất cả các sổ ghi chép sau mỗi lần sửa đổi kiểu.

Một giải pháp tự nhiên sẽ sử dụng tệp tùy chỉnh (custom.css) chứa kiểu. Tuy nhiên sau khi thử these instructions kiểu không được áp dụng cho sổ ghi chép (có thể tải xuống từ máy chủ).

giải pháp tốt nhất (cho đến nay)

Tôi tìm thấy một giải pháp nhìn this impressive book viết như một tập hợp các máy tính xách tay IPython. Tác giả cho biết thêm ở phần cuối của mỗi máy tính xách tay các tế bào mã sau:

from IPython.core.display import HTML 
def css_styling(): 
    styles = open("./styles/custom.css", "r").read() 
    return HTML(styles) 
css_styling() 

Đưa một file custom.css trong thư mục máy tính xách tay của bạn (trong styles thư mục con), phong cách sẽ được nạp sau khi thực hiện ô đầu tiên. Hơn nữa, phong cách sẽ là được nạp một cách kỳ diệu mỗi khi sổ ghi chép được mở, mà không cần phải thực hiện lại ô!

Thủ thuật ma thuật này hoạt động vì kiểu được lưu trong ô ouput lần đầu tiên chúng ta thực hiện nó, và mặc dù bị ẩn, sẽ được lưu như bất kỳ đầu ra nào khác. Vì vậy, khi chúng tôi tải các máy tính xách tay, và conseguentely các tế bào đầu ra, phong cách sẽ được áp dụng.

mẫu CSS

Để hoàn thành câu trả lời tôi gửi một phong cách CSS tôi đã sử dụng để tạo ra một "hộp Cảnh báo":

<style> 
div.warn {  
    background-color: #fcf2f2; 
    border-color: #dFb5b4; 
    border-left: 5px solid #dfb5b4; 
    padding: 0.5em; 
    } 
</style> 

Lưu phong cách này và tải nó bằng cách sử dụng tế bào mã hiển thị trước. Bây giờ, để chèn một hộp cảnh báo trong việc sử dụng máy tính xách tay của bạn cú pháp sau:

<div class=warn> 
**Warning:** remember to do bookeping 
<div/> 

Điều đó sẽ được trả lại như thế này:

Đối với máy tính xách tay tổng quát hơn phong cách bạn có thể lấy cảm hứng từ các custom.css của cuốn sách được đề cập ở trên.

Answer 4

Các kiểu CSS tùy chỉnh này đã được thêm vào trong phiên bản ipython 2 trở lên.

<div class="alert"> 
As of IPython 2.0, the user interface has changed significantly 
</div> 

---

<div class="alert alert-success"> 
Enter edit mode by pressing `Enter` 
</div> 

---

<div class="alert alert-error"> 
Don't try to type into a cell in command mode 
</div> 

Chỉ cần dán này trong tế bào và thay đổi nó để loại markdown.

Kiểm tra this để biết các ví dụ và ipython in depth cho các tính năng cắt cạnh của ipython.

Answer 5

Một trung bình bao gồm chỉ đơn giản là tạo ra một chuỗi phong cách và mở nó với đối tượng ipython HTML trong một tế bào mã:

from IPython.display import HTML 
style = "<style>div.warn { background-color: #fcf2f2;border-color: #dFb5b4; border-left: 5px solid #dfb5b4; padding: 0.5em;}</style>" 
HTML(style) 

Sau đó, sử dụng nó trong một tế bào markdown:

<div class="warn">Warning!</div>