├── README.md ├── asset ├── background.png ├── background_negative.png ├── bg1.png ├── bg_end.png ├── bg_set.png ├── logo.gif ├── logo_2.png └── study.jpg ├── img ├── img01.png ├── img02.png ├── img03.png ├── img04.png ├── img05.png ├── img06.png ├── img07.png ├── img08.png ├── img09.png ├── img10.png ├── vscode01.png ├── vscode02.png ├── vscode03.png ├── vscode04.png └── vscode05.png ├── template.html └── template.md /README.md: -------------------------------------------------------------------------------- 1 | # 果壳简约presentation模板 Written by Marpit 2 | ## 真的很简单的简介 3 | 1. 感谢前辈[BeWaterMyFriend7](https://github.com/BeWaterMyFriend7/Marp-Theme-UCAS)的项目，模板里不少的示例都直接搬用了 4 | 2. 至于Marpit，可以阅读一下它的[相关文档](https://marpit.marp.app/) 5 | 3. 此模板或者说Marpit的特点： 6 | * logo可以转！（果壳官网偷的） 7 | * 书签信纸般的简约style 8 | * 漂亮且随时可以渲染并且语法和代码更简洁的markdown语言 9 | * 上面那条我没有说latex的beamer不好 10 | * 简单易用，摒弃了css主题，直接在开头定义格式 11 | * 增加了更多元素的属性可供调整，如代码块，表格，img等等 12 | * 每页的各种元素可以根据需求更改，也可以在开头统一定义 13 | 4. 有啥问题或者建议以及欢迎交流👉 14 | 15 | ## 应该在哪里写这个呢 16 | * 无所不能的vscode + marp扩展（vscode扩展商店一搜就有了） 17 | * 别的方法欢迎交流，目前我只会上面这个方法 18 | 19 | ## 以下是配置和使用的非常具体的图文指南（24.01.15更新） 20 | ### 教程环境：x64-win11（跟这个关系不大） 21 | 1. 去官网下载[vscode](https://code.visualstudio.com/Download) 22 | 2. 在vscode商店选择扩展，搜索marp并下载安装图示插件 23 | ![img](./img/vscode01.png) 24 | 3. 安装完成后重启一下vscode(我不记得要不要重启了)，按图示点击找到设置，搜索marp，把你的edge或者chrome路径填进去，这是渲染pdf用的，不需要渲染成pdf的话可以跳过这步 25 | ![img](./img/vscode02.png) 26 | 4. 接着用vscode打开你clone的文件夹，选中template.md，点击右上角画圈圈的图标，选择第二项(ps：如果vscode有别的markdown扩展建议先禁用掉) 27 | ![img](./img/vscode03.png) 28 | 5. 然后就会发现头几行代码从红色变成蓝色，然后你就可以点击画圈圈的按钮进行侧栏预览，开始编辑你的slide并实时看到更改了 29 | ![img](./img/vscode04.png) 30 | 6. 最后，你可以点击图示圈圈按钮的并选择第一行，就可以输出你需要的格式的slide了 31 | ![img](./img/vscode05.png) 32 | 7. 自此，你已经开始成为markdown写slide的高手了！ 33 | 34 | ## 再具体点的用法 35 | 1. img可以调整当前页开头的img属性；代码块可以调整代码页面开头的 pre 属性等等 36 | 2. 建议多读代码而不是readme，代码很多注释了，觉得不够的可以查文档帮我注释或者问我 37 | 3. 由于logo是gif图，需要输出成html格式，同时如果可以把图片都放图床上会更轻便 38 | 4. 如果想输出pdf可以改成logo_2.png（静态logo） 39 | 40 | ## 最后画个饼 41 | * 后面有空会把果壳logo的动画代码化而不是gif并增加更多有意思的template 42 | * （如果有star和follow的鼓励就会更积极哦） 43 | 44 | ## 部分页面静态预览(Git clone下来才是真正的会动的本体！) 45 | ![img](./img/img01.png) 46 | 47 | ![img](./img/img02.png) 48 | 49 | ![img](./img/img03.png) 50 | 51 | ![img](./img/img04.png) 52 | 53 | ![img](./img/img05.png) 54 | 55 | ![img](./img/img06.png) 56 | 57 | ![img](./img/img07.png) 58 | 59 | ![img](./img/img10.png) -------------------------------------------------------------------------------- /asset/background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hzy24/ucas_marpit_slide/72eed25bf9d89d2f6f6bfaa3f7b661b9c64d76c8/asset/background.png -------------------------------------------------------------------------------- /asset/background_negative.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hzy24/ucas_marpit_slide/72eed25bf9d89d2f6f6bfaa3f7b661b9c64d76c8/asset/background_negative.png -------------------------------------------------------------------------------- /asset/bg1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hzy24/ucas_marpit_slide/72eed25bf9d89d2f6f6bfaa3f7b661b9c64d76c8/asset/bg1.png -------------------------------------------------------------------------------- /asset/bg_end.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hzy24/ucas_marpit_slide/72eed25bf9d89d2f6f6bfaa3f7b661b9c64d76c8/asset/bg_end.png -------------------------------------------------------------------------------- /asset/bg_set.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hzy24/ucas_marpit_slide/72eed25bf9d89d2f6f6bfaa3f7b661b9c64d76c8/asset/bg_set.png -------------------------------------------------------------------------------- /asset/logo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hzy24/ucas_marpit_slide/72eed25bf9d89d2f6f6bfaa3f7b661b9c64d76c8/asset/logo.gif -------------------------------------------------------------------------------- /asset/logo_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hzy24/ucas_marpit_slide/72eed25bf9d89d2f6f6bfaa3f7b661b9c64d76c8/asset/logo_2.png -------------------------------------------------------------------------------- /asset/study.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hzy24/ucas_marpit_slide/72eed25bf9d89d2f6f6bfaa3f7b661b9c64d76c8/asset/study.jpg -------------------------------------------------------------------------------- /img/img01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hzy24/ucas_marpit_slide/72eed25bf9d89d2f6f6bfaa3f7b661b9c64d76c8/img/img01.png -------------------------------------------------------------------------------- /img/img02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hzy24/ucas_marpit_slide/72eed25bf9d89d2f6f6bfaa3f7b661b9c64d76c8/img/img02.png -------------------------------------------------------------------------------- /img/img03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hzy24/ucas_marpit_slide/72eed25bf9d89d2f6f6bfaa3f7b661b9c64d76c8/img/img03.png -------------------------------------------------------------------------------- /img/img04.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hzy24/ucas_marpit_slide/72eed25bf9d89d2f6f6bfaa3f7b661b9c64d76c8/img/img04.png -------------------------------------------------------------------------------- /img/img05.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hzy24/ucas_marpit_slide/72eed25bf9d89d2f6f6bfaa3f7b661b9c64d76c8/img/img05.png -------------------------------------------------------------------------------- /img/img06.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hzy24/ucas_marpit_slide/72eed25bf9d89d2f6f6bfaa3f7b661b9c64d76c8/img/img06.png -------------------------------------------------------------------------------- /img/img07.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hzy24/ucas_marpit_slide/72eed25bf9d89d2f6f6bfaa3f7b661b9c64d76c8/img/img07.png -------------------------------------------------------------------------------- /img/img08.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hzy24/ucas_marpit_slide/72eed25bf9d89d2f6f6bfaa3f7b661b9c64d76c8/img/img08.png -------------------------------------------------------------------------------- /img/img09.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hzy24/ucas_marpit_slide/72eed25bf9d89d2f6f6bfaa3f7b661b9c64d76c8/img/img09.png -------------------------------------------------------------------------------- /img/img10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hzy24/ucas_marpit_slide/72eed25bf9d89d2f6f6bfaa3f7b661b9c64d76c8/img/img10.png -------------------------------------------------------------------------------- /img/vscode01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hzy24/ucas_marpit_slide/72eed25bf9d89d2f6f6bfaa3f7b661b9c64d76c8/img/vscode01.png -------------------------------------------------------------------------------- /img/vscode02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hzy24/ucas_marpit_slide/72eed25bf9d89d2f6f6bfaa3f7b661b9c64d76c8/img/vscode02.png -------------------------------------------------------------------------------- /img/vscode03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hzy24/ucas_marpit_slide/72eed25bf9d89d2f6f6bfaa3f7b661b9c64d76c8/img/vscode03.png -------------------------------------------------------------------------------- /img/vscode04.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hzy24/ucas_marpit_slide/72eed25bf9d89d2f6f6bfaa3f7b661b9c64d76c8/img/vscode04.png -------------------------------------------------------------------------------- /img/vscode05.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hzy24/ucas_marpit_slide/72eed25bf9d89d2f6f6bfaa3f7b661b9c64d76c8/img/vscode05.png -------------------------------------------------------------------------------- /template.html: -------------------------------------------------------------------------------- 1 |
109 |
.
110 | 111 |

这里是标题

112 |
hzy
113 |
2024-04-24
114 |
115 |
226 |

目 录

227 |

第一部分

228 |

第二部分

229 |

第三部分

230 |

第四部分

231 |

第五部分

232 |
233 |
300 |
.
301 | 302 |

一些文字和emoji的实例

303 |

加粗文字
304 | 普通文字
305 | 斜体文字
306 | 删除线
307 | 👍 👎 😄 ❤️ 😢 😭 🅰️ 🅱️ 😠 😁 👅 🇷🇺 🇺🇸 🇨🇳
308 | （绝大部分emoji直接复制过来就行）

309 |
310 |
355 |
.
356 | 357 |

告诉他们markdown写代码有多美

358 |

行内代码展示:

359 |

行内代码:this is a code

360 |

代码块和命令块展示

361 | 
import torch 
362 | #可以利用前面<style scoped>的pre属性调整代码块的字体大小，位置大小等等
363 | def Net()
364 |
365 |
366 |
411 |
.
412 | 413 |

markdown写公式同样不输latex

414 |

行内公式:

415 |

行间公式：

416 |

注意：行间公式的编号适配不是很好，加编号会排版错乱

417 |
418 |
463 |
.
464 | 465 |

markdown的table也是beautiful

466 | 467 | 468 | 469 | 470 | 471 | 472 | 473 | 474 | 475 | 476 | 477 | 478 | 479 | 480 | 481 | 482 | 483 | 484 | 485 | 486 |
表头表头表头
单元格单元格单元格
单元格单元格单元格
487 |
488 |
577 |
.
578 | 579 |

图片和背景也是随便插入随便玩

580 |

img
581 |

582 |
583 |
650 |
.
651 | 652 |

想一条一条展示的话用*

653 |
    654 |
  • 1
    • 655 |
  • 2
    • 656 |
  • 没想到吧img也行img
    • 657 |
658 |
659 |
704 |
.
705 | 706 |

致 谢

707 |

参考的各位大佬们

708 |
709 |

GitHub前辈BeWaterMyFriend7的Marp-Theme-UCAS项目
710 | Marp 官方文档
711 | Marp VSCode教程

712 |
713 |
714 |
803 |
-------------------------------------------------------------------------------- /template.md: -------------------------------------------------------------------------------- 1 | --- 2 | marp: true 3 | paginate: ture 4 | style: | 5 | header { 6 | left: 60px; 7 | right: 24px; 8 | top: 0px; 9 | height: 500px; 10 | color: rgb(23, 73, 148); 11 | font-size: 1px; 12 | background-image: url("./asset/logo.gif"); 13 | background-position: px 20px; 14 | background-repeat: no-repeat; 15 | background-size: 144px; 16 | } 17 | 18 | h1{ 19 | font-size: 66px; 20 | position: absolute; 21 | left: 220px; 22 | top: 56px; 23 | color: rgb(23, 73, 148); 24 | font-size: 54px; 25 | font-weight: bold; 26 | } 27 | 28 | # 旋转logo header 和 h1 （标题） 29 | # 这里的h1有点大的，你们可以根据自己要求改 30 | 31 | --- 32 | 33 | 49 | 50 | /* 是否显示页码的意思 */ 51 | 52 | ![bg](./asset/bg1.png) 53 | ## 这里是标题 54 | 55 | 56 | ###### hzy 57 | ###### 2024-04-24 58 | 59 | 60 | --- 61 | 82 | 83 | 84 | ![bg left:55%](./asset/background.png) 85 | ## 目 录 86 | 87 | #### 第一部分 88 | #### 第二部分 89 | #### 第三部分 90 | #### 第四部分 91 | #### 第五部分 92 | 93 | --- 94 | 99 | 100 | 101 | 102 | # 一些文字和emoji的实例 103 | 104 | **加粗文字** 105 | 普通文字 106 | *斜体文字* 107 | ~~删除线~~ 108 | 👍 👎 😄 ❤️ 😢 😭 🅰️ 🅱️ 😠 😁 👅 🇷🇺 🇺🇸 🇨🇳 109 | （绝大部分emoji直接复制过来就行） 110 | 111 | 112 | --- 113 | 127 | 128 | 129 | 130 | # 告诉他们markdown写代码有多美 131 | 132 | ### 行内代码展示: 133 | 134 | 行内代码:`this is a code` 135 | 136 | 137 | ### 代码块和命令块展示 138 | 139 | 140 | ``` python 141 | import torch 142 | #可以利用前面 151 | 152 | 153 | 154 | # markdown写公式同样不输latex 155 | 156 | 157 | 158 | 行内公式: $E=mc^2$ 159 | 160 | 行间公式： 161 | 162 | $$ 163 | 164 | D(x) = \begin{cases} 165 | \lim\limits_{x \to 0} \frac{a^x}{b+c}, & x<3 \\ 166 | \pi, & x=3 \\ 167 | \int_a^{3b}x_{ij}+e^2 \mathrm{d}x,& x>3 \\ 168 | \end{cases} 169 | 170 | $$ 171 | 172 | 注意：行间公式的编号适配不是很好，加编号会排版错乱 173 | 174 | --- 175 | 198 | 199 | 200 | 201 | # markdown的table也是beautiful 202 | 203 | 204 | | 表头 | 表头 | 表头 | 205 | | ---- | ---- |--- | 206 | | 单元格 | 单元格 |单元格| 207 | | 单元格 | 单元格 |单元格| 208 | 209 | 210 | --- 211 | 212 | 222 | 223 | 224 | 225 | # 图片和背景也是随便插入随便玩 226 | 227 | ![img](./asset/study.jpg) 228 | ![bg fit](./asset/bg_set.png) 229 | 230 | --- 231 | 232 | 242 | 243 | 244 | 245 | # 想一条一条展示的话用* 246 | 247 | * 1 248 | * 2 249 | * 没想到吧img也行![img](./asset/study.jpg) 250 | 251 | 252 | 253 | --- 254 | 258 | 259 | 260 | 261 | # 致 谢 262 | 263 | 264 | 265 | ### 参考的各位大佬们 266 | > [GitHub前辈BeWaterMyFriend7的Marp-Theme-UCAS项目](https://github.com/BeWaterMyFriend7/Marp-Theme-UCAS) 267 | > [Marp 官方文档](https://marpit.marp.app/markdown) 268 | > [Marp VSCode教程](https://github.com/marp-team/marp-vscode) 269 | 270 | 271 | 272 | 273 | 274 | --- 275 | 277 | 278 | 279 | 280 | ![bg](./asset/bg_end.png) 281 | 282 | 283 | 284 | 285 | 286 | 287 | 288 | 289 | 290 | 291 | 292 | 293 | --------------------------------------------------------------------------------