html代码扭曲字,Jupyter Notebook RISE扭曲了演示文稿的HTML/CSS布局

我想在朱庇特做一个完整的演讲。我已经在浏览器中尝试了一些HTML-CSS,在浏览器中几乎可以正常工作:

HTML格式

index.html

:

title

This is a long miltiline title for a random topic which nobody cares about!

---

twitter

body {

position: relative;

min-height: 90vh;

}

#content-wrap {

padding-bottom: 2.5rem;

}

.text {

font-family: computer Modern;

}

#firstSlideTitle {

width: 80%;

font-size: 300%;

font-weight: bold;

text-align: center;

margin: auto;

margin-top: 40px;

border-style: solid;

border-radius: 15px;

}

#firstSlidePic {

width: 50%;

height: auto;

padding: 40px;

}

.center {

display: block;

margin-left: auto;

margin-right: auto;

}

footer {

position: absolute;

bottom: 0px;

width: 100%;

height: 2.5rem;

}

#twitter{

float: right;

width: 33.3%;

text-align: right;

}

结果几乎是可以的:

我试着把CSS代码放在

在Jupyter的代码单元中标记,配备

%%html

魔法。也不得不改变所有

id

s至

classe

因为Python Jupyter无法处理

#

s,将它们视为python注释。你可以在

this Github Gist

. 然而,结果更令人失望:

我试过一些变通办法,但都不够好。如果你能帮助我知道怎么做,我将不胜感激。