Published
Edited
Jan 19, 2021
Importers
1 star
Insert cell
Insert cell
Insert cell
Insert cell
myCSS = html`
<style>
.marker {
background-color: #fef4a9;
}

.keyword {
border : 1px black solid;
padding : 0px 8px;
border-radius : 8px;
background-color: #ee0000;
color : #ffffff;
}

.code {
border : 1px black solid;
padding : 0px 8px;
border-radius : 4px;
font-weight : bold;
background-color: pink;
}

.youtube {
width : 640px;
height: 360px;
border: 1px solid #333;
border-radius:4px;
}
</style>
`
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
md`例如:${innerlink("myTOC", "回主目錄")}`
Insert cell
Insert cell
innerlink("myTOC", "回主目錄")
Insert cell
md`請「${innerlink("myTOC", "回主目錄")}」`
Insert cell
Insert cell
gohome = () => html`
⬆️ <a href="#myTOC">回主目錄</a>
`
Insert cell
gohome()
Insert cell
Insert cell
Insert cell
key = k =>
html`<span class='keyword'>${k}</span>`
Insert cell
md`例如:這是一個 ${key("keyword")}`
Insert cell
Insert cell
Insert cell
marker = x =>
html`<span class='marker'>${x}</span>`
Insert cell
md`
例如:這是「${marker("重要的一段話")}」
`
Insert cell
Insert cell
Insert cell
code = c => html`
<span class="code"><code>${c}</code></span>
`
Insert cell
md`例如:這是一個 ${code("code")}`
Insert cell
Insert cell
Insert cell
Insert cell
youtube = url => html`
<iframe
class="youtube"
src="https://www.youtube-nocookie.com/embed/${url}"
frameborder="1"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
`
Insert cell
Insert cell
youtube("lO_YNkPH2wo")
Insert cell
Insert cell
Insert cell
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more