html 內聯樣式不再適用於 Jupyter 筆記本單元格

Question

當將style參數與<span>起始塊一起傳遞時，我在 Jupyter 筆記本的單個單元格中更改了font-size和font-family以及所有這些。 像這樣——

<span style="font-family:Verdana">Irrelavant text.</span>

或者

# Model Building                        <span style="font-size:12px">[Jump to Beginning](#top)</span>

直到大約一周前，我的筆記本中的所有style效果都消失了，它才運行良好。 代碼顯然仍然存在於降價單元格中，但它只是沒有顯示預期的結果。 在 Kaggle 或 JupyterLab 上運行時，相同的筆記本仍然可以工作並加載樣式。 Jupyter 筆記本是停止支持它還是我無意中更改了某些內容？ 在不更改代碼的情況下，有什么可能是解決方法，甚至是解決問題的方法？

它曾經看起來像這樣（避免黑色主題，截圖來自 JupyterLab）-

而現在看起來是這樣的——

如您所見， font-size:12px不再起作用。 font-family等也是如此。

編輯： 筆記本

Answer 1

Markdown 單元格中的內聯樣式在上個月早些時候解決不同的清理問題的安全修復程序中被暫時刪除，並在剛剛發布的v6.4.4 中恢復。 請更新您的筆記本安裝以使用 Markdown 中的舊樣式以再次工作。

Jupyter Lab 3.2.2、3.2.3 和 3.2.4 也受到類似問題的影響。 它已經在PR #11510中得到修復，它將包含在下一個補丁版本中。 現在的解決方法是堅持使用 JupyterLab 3.2.1。

Answer 2

我認為這不是您想要的答案，但它有效。 它也是可擴展的。 我通常在 RStudio 中使用 Python 和 Atom、XCode 或 RMarkdown，所以我不太熟悉 Jupyter 界面的來龍去脈。

首先，我注意到當我去打印預覽時，我可以看到按預期呈現的文本。 然而，我認為那是非常無用的。 你會怎樣做？ 每次寫東西都去打印預覽？ 那時交互式筆記本的目的是什么？

我離題了。

好的，所以我發現它有效......這絕不是一個最初是我的想法......

自定義 CSS

添加自定義 CSS 文件，但不是 Jupyter 幫助文件建議的“全部更改”...

步驟1）在與ipynb文件相同的目錄中創建一個styles文件夾。

步驟 2)在樣式文件夾中，創建一個 CSS 文件。

步驟 3)在該 CSS 文件中，編寫兩種標簽樣式以及您想要的任何其他樣式。

這是代碼（代碼圖片很煩人）。

div.verdana {    
    font-family:verdana;
}

div.bigger {
    font-size: 20pt;
}

在 ipynb 文件中

步驟 4)接下來，將div標簽添加到 Markdown 單元格中的 ipynb 文件中：

<div class='verdana'>This should be Verdana font.</div>

運行單元格后的結果：

第 5 步）用更大的字體做同樣的事情。 你強調了對font-size:20px的渴望； 我無意中做了font-size:20pt 。 只需將pt更改為px 。

將div標簽添加到 Markdown 單元格中的 ipynb 文件：

<div class="bigger">Font size 20px</div>

運行單元格后的結果：

步驟 6)在筆記本中的某處，您需要調用 CSS 文件的鏈接。 我只是將它添加到最后：

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

它可以在最后執行，因為整個內核最初執行（因此在調用標簽之前不需要執行此操作。

僅供參考，我確實嘗試使用magic ，但它不適用於字體系列：

%%html
<style>
// add your CSS styling here
div.verdana {    
    font-family:verdana;
}

div.bigger {
    font-size: 20pt;
}
</style>