| theme | title | subtitle | presenter | brand | logo | highlighter | themeConfig | ||||
|---|---|---|---|---|---|---|---|---|---|---|---|
./ |
Quantitative Finance |
Quant Finance 24 Lectures |
Aaron Yang |
量化风云 |
shiki |
|
<Device kind="apple-watch-s8"
autoplay
loop="forever"
:scale=0.6>
<Video src="*.mp4"/>
</Device>Powered by Device.css | Video source: Pixabay
- iphone-14-pro
- iphone-x
- iphone
- imac
- ipad-pro
- apple-watch-ultra
- more ... Device.css
<Audio name="typer" controls />
<Audio src="*.mp3" :at=1 :volume=0.5 />## Links
- [Website](https://markmap.js.org/)
- [GitHub](https://github.com/gera2ld/markmap)
## Related Projects
- [coc-markmap](https://github.com/gera2ld/coc-markmap) for Neovim
- [markmap-vscode](https://marketplace.visualstudio.com/items?itemName=gera2ld.markmap-vscode) for VSCode
- [eaf-markmap](https://github.com/emacs-eaf/eaf-markmap) for Emacs
## Features
Note that if blocks and lists appear at the same level, the lists will be ignored.
### Lists
- **strong** ~~del~~ *italic* ==highlight==
- `inline code`
- [x] checkbox
- Katex: $x = {-b \pm \sqrt{b^2-4ac} \over 2a}$ <!-- markmap: fold -->
- [More Katex Examples](#?d=gist:af76a4c245b302206b16aec503dbe07b:katex.md)
- Now we can wrap very very very very long text based on `maxWidth` option
### Blocks
``js
console.log('hello, JavaScript')
``
| Products | Price |
| -------- | ----- |
| Apple | 4 |
| Banana | 2 |
Powered by Markmap
<Markmap class="abs top-400px left-50px w-full">
` ``
## level1
### level2
## level1
` ``
</Markmap>A good picture is worth a thousand words. The extended Markdown syntax provides Admonition syntax, which can convert admonition text into graphic boxes.
Using the following grammer to render admonition box:
!!! attention
this is a attention admonition!
!!! quote
this is a quote/cite::right::
!!! attention 是否应该进行业中性化，学界存在一定的争议。Sina Ehsani[^SEhsani]等人2022年的研究认为，采用多空对冲的投资者需要进行行业中性化，而单纯做多的投资者则应该避免行业中性化。
!!! quote Oppenheimer Algebra is like sheet of music.The important thing isn't can you read music, it's can you hear it.Can you hear the music, Robert?
<style scoped> .admonition { margin: 0 !important; } </style>
!!! summary summary/abstract
!!! hint this is a hint/tip
!!! info a hint/todo
!!! success a success/check/done
!!! question a question/help/faq
!!! Example an example
!!! caution a caution/warning
!!! failure a failure/fail/missing
!!! danger a danger/error/bug
➡️ move the paragraph down。
Almost all css property can be used as animation.
The example shows how to add background image during transition.
::right::
<div v-motion
:enter="{scale: 1,
y:0,
backgroundImage: 'url()'
}"
:click-1="{y: 120,
backgroundImage: 'url(https://images.jieyu.ai/images/hot/lhfy-badge.png)',
backgroundSize: '100px'
backgroundRepeat: 'no-repeat'}"
:click-2="{scale:0}"
>
</div>
layout: two-cols
Animate.css has also been integrated into this theme.
💃 bounce
📸 flash
🥴 wobble delay 2 seconds
::right::
<div class="animate__animated
animate__bounce"/>
<div class="animate__animated
animate__flash"/>
<div class="animate__animated
animate__wobble
animate__delay-2s
abs
top-400px
w-400px">Builds upon animate.css, Rich Theme offering a more streamlined animation experience.
fade In Left jack In The Box Flash me Fade out right bigTeaching Assistant
::right::
<Anime :at=0 action="fadeInLeftBig">
fade In Left
</Anime>
<Anime :at=1 action="jackInTheBox"
dur="3s">
jack In The Box
</Anime>
<Anime action="fadeIn" dur="5s">
<Profile headerImg="*.jpg" avatar="*.jpg">
### 宽粉
<p>Teaching Assistant</p>
</Profile>
</Anime>If you have only a few images but a lot to say, this component is for you.
Nature’s first green is gold<bg>https://images.unsplash.com/photo-1555465910-31f7f20a184d?q=80&w=600
Her hardest hue to hold
Her early leaf’s a flower<bg>https://images.unsplash.com/photo-1478217655296-6ca53ca4b677?w=800
But only so an hour
Then leaf subsides to leaf
So Eden sank to grief
So dawn goes down to day
Nothing gold can stayTimeline is very important for story telling.
- event: 1606年
img: https://*.jpg w=150 roundCorner="50%"
title: 第一张股票
text: 1606年，荷兰东印度公司发行了人类第一张股票::right::
- event: 1606年
img: https://images.jieyu.ai/images/2024/01/first-security.jpg w=150 roundCorner="50%" shadow="0 2px 5px rgba(0, 0, 0, 0.5)"
title: 第一张股票
text: 1606年，荷兰东印度公司发行了人类第一张股票
- event: 1900年
img: https://images.jieyu.ai/images/2024/01/pricing-the-future.jpg w=150 roundCorner="50%" shadow="0 2px 5px rgba(0, 0, 0, 0.5)"
title: 布朗运动
text: 1900年，路易斯.巴斯里耶，第一个量化布朗运动的人，建立了数学模型来分析市场涨跌的概率的大小
- event: 1973年
img: https://images.jieyu.ai/images/2023/10/Scholes.png w=150 roundCorner="50%" shadow="0 2px 5px rgba(0, 0, 0, 0.5)"
title: B-S公式
text: 1973年，迈伦.斯科尔斯，与费雪.布莱克一起发表《期权定价和公司债务》，为衍生品定价给出了堪称金融巫师的公式
根据 CAPM 理论，资产的收益由无风险利率、市场暴露和 Alpha 共同组成，如果通过对冲将系统性风险进行度量和隔离，就可以获得超额绝对收益。
this is Card without a title
<Card title="Card with header"
:enter="{opacity: 1}"
:click-1="{opacity: 0}">
this is naive card with a Title.
v-motion is supported out-of-box.
</Card>
Course Instructor
Teaching Assistant
<Profile headerImg="https://*.jpg" seq=2>
headerImg is for the background.
Without avatar image, `seq` will be used to
render the avatar. This can be used for
presenting list of things.
</Profile>
<Profile class="top-150px left-250px"
headerImg="https://.../*.jpg"
avatar="https://.../*.jpg">
### 宽粉
Teaching Assistant
</Profile>the content of the box
the content of the box
Scard is a card variant, which contains a image header and main content area, and a s-curve split the two.
<Scard background="url('image.png')
no-repeat center center / cover"
h="300px"
w="150px"
contentHeight="260px"
left="230px"
top="100px">
the content of the box
</Scard>color: "#F5C345"
capping: header
seq: "01"
title: LOREM IPSUM
desc: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. color: "red"
capping: footer
seq: "02"
title: LOREM IPSUM
desc: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod temporcolor: "#8EBC70"
capping: header
seq: "03"
title: LOREM IPSUM
desc: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod temporcolor: "#6F95BB"
capping: footer
seq: "04"
title: LOREM IPSUM
desc: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor- 😄 using icons is very simple, just write
:smile: - ❤️ visit https://emojipedia.org/ for more emoji icons
the syntax:
- :smile: using icons is very simple, just write `:smile:`
- :heart: visit https://emojipedia.org/ for more emoji icons!!! Notice Be notified mark before bullet items are removed, so you could use whatever you like as the bullet mark.
layout: image-left image: https://images.jieyu.ai/images/hot/adventure.jpg
➠➠ Click for more.
---Slidev is a slide maker and presentation tool designed for developers. It includes the following features:
- 📝 Text-based - focus on your content with Markdown, then style it later
- 🎨 Themable - themes can be shared and reused as npm packages
- 🧑💻 Developer Friendly - code highlighting, live coding with autocompletion
- 🤹 Interactive - embed Vue components to enhance your expressions
- 🎥 Recording - built-in recording and camera view
- 📤 Portable - export to PDF, PPTX, PNGs, or even a hostable SPA
- 🛠 Hackable - virtually anything that's possible on a webpage is possible in Slidev
Read more about Why Slidev?
Hover on the bottom-left corner to see the navigation's controls panel
| space / tab / right | next animation or slide |
| left / shiftspace | previous animation or slide |
| up | previous slide |
| down | next slide |
layout: image-right image: https://cover.sli.dev
Use code snippets and get the highlighting directly!
interface User {
id: number
firstName: string
lastName: string
role: string
}
function updateUser(id: number, update: Partial<User>) {
const user = getUser(id)
const newUser = { ...user, ...update }
saveUser(id, newUser)
}