如何将CSS文件导入Google Colab笔记本(Python3) [英] How to import CSS file into Google Colab notebook (Python3)

问题描述

我正在 Google Colab 中使用Python 3笔记本.我想使用CSS文件来更改标题样式(颜色，字体等)，并将编号的子列表更改为字母顺序. 我需要将CSS导入Colab笔记本中的帮助.

I am working on a Python 3 notebook in Google Colab. I would like to use a CSS file to change the header styles (color, font, etc.) and change numbered sub-lists to alphabetical. I need help importing the CSS into a Colab notebook.

这是Markdown代码:

Here is the Markdown code:

# List
1. item
1. item
1. item
  1. sub-item
  1. sub-item
  1. sub-item

它呈现为:

1. 项目
2. 项目
3. 项目

1. item
2. item
3. item

1. 子项
2. 子项
3. 子项

这是CSS:

ol ol {
  list-style-type: lower-roman;
}
h1 {
  color: red;
}

我希望它呈现为:

1. 项目
2. 项目
3. 项目
   a)子项目
   b)子项目
   c)子项

1. item
2. item
3. item
   a) sub-item
   b) sub-item
   c) sub-item

推荐答案

这是一个骇人听闻的答案，但似乎可行.在Colab的advanced_outputs示例中，引用了

This is a hacky answer, but it seems to work. In the advanced_outputs example from Colab, there is a reference to how to enable MathJax in Colab. This requires adding a handler that is triggered on each cell creation. This method can be changed to add in a CSS element instead of including the MathJax JavaScript source.

from IPython.display import Math, HTML, display

def set_css_in_cell_output():
  display(HTML("""<style>
ol ol {
  list-style-type: lower-roman;
}
h1 {
  color: red;
}
</style>"""))

get_ipython().events.register('pre_run_cell', set_css_in_cell_output)

运行此单元格后，笔记本中每个新的输出单元格都将添加CSS.根据我自己的经验，我经常不得不在规则上使用!important，因为CSS层次结构可能会变得非常复杂.

After running this cell, every new output cell in your notebook will have that CSS added to it. From my own experience, I often end up having to use !important on rules because the CSS hierarchy can get quite complicated.

这篇关于如何将CSS文件导入Google Colab笔记本(Python3)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！