first commit
This commit is contained in:
CrazyJasonwell
Executable
+10
@@ -0,0 +1,10 @@
|
||||
---
|
||||
created: 2025-09-08T22:43
|
||||
updated: 2025-09-09T19:23
|
||||
---
|
||||
- [marp-themes · GitHub Topics](https://github.com/topics/marp-themes)
|
||||
|
||||
- [matsubara0507/marp-themes: Theme for Marp Next (github.com)](https://github.com/matsubara0507/marp-themes)
|
||||
- [kaisugi/marp-theme-academic: Academic Presentation Slides with Marp (github.com)](https://github.com/kaisugi/marp-theme-academic)
|
||||
- [johannesdewit/marp-theme-universiteit-leiden: Unofficial Leiden University theme for producing easy slides with Marp || Officieus Universiteit Leiden thema om gemakkelijk presentaties te maken met Marp (github.com)](https://github.com/johannesdewit/marp-theme-universiteit-leiden)
|
||||
-
|
||||
BIN
Binary file not shown.
|
After Width: | Height: | Size: 109 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 193 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Executable
+18
@@ -0,0 +1,18 @@
|
||||
---
|
||||
title: Getting Started
|
||||
nav_order: 2
|
||||
has_children: true
|
||||
created: 2025-09-09T19:23
|
||||
updated: 2025-09-22T13:27
|
||||
---
|
||||
|
||||
# Getting Started
|
||||
|
||||
- [Setup Vault](11.SetupVault.md)
|
||||
- [Configuration](12.Configuration.md)
|
||||
- [Marp Syntax](13.MarpSyntax.md)
|
||||
- [First Deck](14.FirstDeck.md)
|
||||
|
||||
|
||||
|
||||
|
||||
Executable
+20
@@ -0,0 +1,20 @@
|
||||
---
|
||||
title: Setup Vault
|
||||
parent: Getting Started
|
||||
created: 2025-09-09T19:23
|
||||
updated: 2025-09-22T13:27
|
||||
---
|
||||
|
||||
# Setup Vault
|
||||
|
||||
Obsidian is a powerful note-taking app that allows users to create and organize their notes and ideas in a highly customizable and intuitive interface. Setting up Obsidian for optimal use requires a few key steps to ensure that you can get the most out of the app's features and capabilities.
|
||||
|
||||
The first step in setting up Obsidian is to create a vault, which is essentially a container for all of your notes and files. This can be done by simply creating a new folder on your computer and selecting it as your vault location within the app's settings. Once your vault is set up, you can start creating notes and organizing them into folders and subfolders as needed.
|
||||
|
||||
Next, it's important to customize Obsidian's settings to fit your workflow and preferences. This includes adjusting things like the default font and theme, enabling or disabling various plugins, and configuring hotkeys and other shortcuts for quick access to frequently used features.
|
||||
|
||||
|
||||
|
||||
- Relative path to files
|
||||
- Not use Wikilinks
|
||||
- Detect all file extension
|
||||
Executable
+49
@@ -0,0 +1,49 @@
|
||||
---
|
||||
title: Configuration
|
||||
parent: Getting Started
|
||||
created: 2025-09-09T19:23
|
||||
updated: 2025-09-22T13:27
|
||||
---
|
||||
|
||||
# Configuration
|
||||
|
||||
|
||||
|
||||
|
||||
## Chrome Path
|
||||
|
||||
Sets the custom path for Chrome or Chromium-based browser to export PDF, PPTX, and image. If it\'s empty, Marp will find out the installed Google Chrome / Chromium / Microsoft Edge.
|
||||
|
||||
## Theme Path
|
||||
|
||||
Local paths to additional [theme CSS](https://marpit.marp.app/theme-css) for Marp core and Marpit framework. The rule for paths is following Markdown: Styles.
|
||||
|
||||
## Export Path
|
||||
|
||||
Specifies the user-defined path for exporting PDF, PPTX, and images. If left empty, Marp will export them in the same folder as the note. It's important to note that the export path has no impact on HTML exports.
|
||||
|
||||
## Enable HTML
|
||||
|
||||
Enable all HTML elements in Marp Markdown. Please Attention when you enable!!!
|
||||
|
||||
## Math Typesettings
|
||||
|
||||
Controls math syntax and the default library for rendering math in Marp Core. A using library can override by math global directive in Markdown.
|
||||
|
||||
## HTML Export
|
||||
|
||||
**This is an EXPERIMENTAL feature**
|
||||
|
||||
Controls HTML library for eporting HTML File in Marp Cli. bespoke.js is experimental
|
||||
|
||||
## Sync Preview
|
||||
|
||||
**This is an EXPERIMENTAL feature**
|
||||
|
||||
Sync the slide preview with the editor cursor
|
||||
|
||||
## Markdown It Plugins
|
||||
|
||||
**This is an EXPERIMENTAL feature**
|
||||
|
||||
Enable the [Markdown It Plugins](30.Markdown-it-Plugins.md) (Mark, Containers, Kroki)
|
||||
Executable
+33
@@ -0,0 +1,33 @@
|
||||
---
|
||||
title: Marp Syntax
|
||||
parent: Getting Started
|
||||
created: 2025-09-09T19:23
|
||||
updated: 2025-09-22T13:27
|
||||
---
|
||||
|
||||
# Marp Syntax
|
||||
|
||||
Here are some of the key elements of Marp's syntax, along with references to their official documentation:
|
||||
|
||||
- Markdown: Marp uses standard Markdown syntax for formatting text, including headings, lists, links, images, and more. For a comprehensive guide to Markdown syntax, see the official documentation: https://www.markdownguide.org/basic-syntax/
|
||||
|
||||
- Slide separators: To create a new slide in Marp, you simply insert three hyphens (---) between two lines of text. You can also use three equal signs (===) to create a separator between slides. For more information on slide separators, see: https://marpit.marp.app/markdown#slide-separators
|
||||
|
||||
- Code blocks: Marp supports syntax highlighting for code blocks, which can be useful for technical presentations. To create a code block, simply indent the text by four spaces, or use triple backticks (`) to enclose the code. For more information on code blocks, see: https://marpit.marp.app/markdown#code-blocks
|
||||
|
||||
- Themes: Marp comes with a range of built-in themes for styling your presentations. You can also create your own custom themes using CSS. To apply a theme to your presentation, simply add a theme directive to the first line of your Markdown file. For more information on themes, see: https://marpit.marp.app/theme-css
|
||||
|
||||
- Speaker notes: Marp allows you to add speaker notes to your presentation, which are visible only to the presenter. To create speaker notes, simply add text inside the square brackets ([ ]) following a slide separator. For more information on speaker notes, see: https://marpit.marp.app/markdown#speaker-notes
|
||||
|
||||
These are just a few examples of Marp's syntax. For more detailed information and examples, you can refer to Marp's official documentation: https://marpit.marp.app/
|
||||
|
||||
|
||||
## Auto-scaling features
|
||||
|
||||
- **Fitting header**: Get bigger heading that fit onto the slide by # `<!--fit-->`.
|
||||
- Auto-shrink the **code block**
|
||||
- Auto-shrink **KaTeX block**
|
||||
|
||||
|
||||
|
||||
[reference](https://github.com/marp-team/marp-core#auto-scaling-features)
|
||||
Executable
+26
@@ -0,0 +1,26 @@
|
||||
---
|
||||
title: First Deck
|
||||
parent: Getting Started
|
||||
created: 2025-09-09T19:23
|
||||
updated: 2025-09-22T13:27
|
||||
---
|
||||
|
||||
# First Deck
|
||||
|
||||
When creating a presentation, it's important to plan out your content and structure in advance to ensure that your message is clear and engaging. One way to do this is to break your presentation into a series of slides that each convey a specific point or idea.
|
||||
|
||||
|
||||
|
||||
Here are some tips for creating effective slides in Marp:
|
||||
|
||||
1. First, start by writing your first slide. This slide should introduce your topic and grab your audience's attention. Keep it concise and to the point, and consider using a bold or eye-catching font to make it stand out.
|
||||
|
||||
2. Next, preview your slides to get a sense of the overall flow and structure of your presentation. Marp allows you to view your slides in real-time as you write, so you can see how each slide looks as you go.
|
||||
|
||||
3. For your second slide, consider adding a picture to help illustrate your point. Marp allows you to easily add images to your slides, and you can even set them as the background for your slide for added impact.
|
||||
|
||||
4. When designing your slides, don't forget to add a footer that includes your name, the date, and the title of your presentation. This helps to give your presentation a professional look and feel, and also makes it easier for your audience to keep track of where they are in the presentation.
|
||||
|
||||
5. Finally, consider changing the theme of your presentation to give it a unique and polished look. Marp comes with a range of built-in themes to choose from, or you can create your own custom theme using CSS for a truly personalized touch.
|
||||
|
||||
By following these tips and using Marp's simple and intuitive syntax, you can create engaging and effective presentations that captivate your audience and convey your message with clarity and impact.
|
||||
Executable
+14
@@ -0,0 +1,14 @@
|
||||
---
|
||||
title: Features
|
||||
nav_order: 3
|
||||
has_children: true
|
||||
created: 2025-09-09T19:23
|
||||
updated: 2025-09-22T13:27
|
||||
---
|
||||
|
||||
# Features
|
||||
|
||||
- [Slides Preview](21.SlidesPreview.md)
|
||||
- [Slides Export](22.SlidesExport.md)
|
||||
- [Slides Custom Theme](23.SlidesCustomTheme.md)
|
||||
- [Presenting](24.Presenting.md)
|
||||
Executable
+15
@@ -0,0 +1,15 @@
|
||||
---
|
||||
title: Slides Preview
|
||||
parent: Features
|
||||
created: 2025-09-09T19:23
|
||||
updated: 2025-09-22T13:27
|
||||
---
|
||||
|
||||
# Preview Slides
|
||||
|
||||
Marp for Obsidian lets you preview your Marp Markdown in real time, allowing you to instantly view changes as you make them! With this feature, you can quickly refine and perfect your Markdown documents.
|
||||
|
||||
|
||||
|
||||
The preview of the content of active Markdow editor, use the ribbon icon or execute command from the Command Palette (<kbd>Ctrl/Cmd+P</kbd> + 'Slide Preview')
|
||||
|
||||
Executable
+23
@@ -0,0 +1,23 @@
|
||||
---
|
||||
title: Slides Export
|
||||
parent: Features
|
||||
created: 2025-09-09T19:23
|
||||
updated: 2025-09-22T13:27
|
||||
---
|
||||
|
||||
# Export slide deck (html, pdf, pptx, img)
|
||||
|
||||
We have integrated [Marp CLI](https://github.com/marp-team/marp-cli/) to export your deck into several formats.
|
||||
|
||||
To export the content of active Markdown editor execute command from the Command Palette (<kbd>Ctrl/Cmd+P</kbd>).
|
||||
|
||||
|
||||
|
||||
## Supported file types
|
||||
|
||||
- **HTML** export
|
||||
- **PDF** with or without annotation
|
||||
- **PPTX** PowerPoint document
|
||||
- **PNG** One file for every slide
|
||||
|
||||
> ⚠️ Export except HTML requires to install any one of [Google Chrome](https://www.google.com/chrome/), [Chromium](https://www.chromium.org/), or [Microsoft Edge](https://www.microsoft.com/edge). You may also specify the custom path for Chrome / Chromium-based browser by preference `CHEROME_PATH`.
|
||||
Executable
+43
@@ -0,0 +1,43 @@
|
||||
---
|
||||
title: Slides Custom Themes
|
||||
parent: Features
|
||||
created: 2025-09-09T19:23
|
||||
updated: 2025-09-22T13:27
|
||||
---
|
||||
|
||||
# Use custom theme CSS
|
||||
|
||||
You can register and use [custom theme CSS for Marpit](https://marpit.marp.app/theme-css) / [Marp Core](https://github.com/marp-team/marp-core/tree/main/themes#readme) by setting `ThemePath`, that includes relative paths to local files in the current vault.
|
||||
The registered theme can use by specifying theme name in [`theme` global directive](https://marpit.marp.app/directives?id=theme).
|
||||
|
||||
|
||||
|
||||
Theme.css:
|
||||
|
||||
```css
|
||||
/* @theme your-theme */
|
||||
|
||||
@import 'default';
|
||||
|
||||
section {
|
||||
background: #fc9;
|
||||
}
|
||||
```
|
||||
|
||||
Slides.md:
|
||||
|
||||
```markdown
|
||||
---
|
||||
theme: your-theme
|
||||
---
|
||||
|
||||
# Use your own theme
|
||||
|
||||
---
|
||||
|
||||
# Second Slide
|
||||
```
|
||||
|
||||
Markdown preview will reload updated theme CSS automatically when you edited the registered local CSS file.
|
||||
|
||||
---
|
||||
Executable
+12
@@ -0,0 +1,12 @@
|
||||
---
|
||||
title: Presenting
|
||||
parent: Features
|
||||
created: 2025-09-09T19:23
|
||||
updated: 2025-09-22T13:27
|
||||
---
|
||||
|
||||
# Presenting
|
||||
|
||||
Marp for Obsidian lets you present your Marp Markdown.
|
||||
|
||||
|
||||
Executable
+28
@@ -0,0 +1,28 @@
|
||||
---
|
||||
title: Markdown-It Plugins
|
||||
nav_order: 4
|
||||
has_children: true
|
||||
created: 2025-09-09T19:23
|
||||
updated: 2025-09-22T13:27
|
||||
---
|
||||
|
||||
# Markdown-It
|
||||
|
||||
Markdown-it is a powerful and flexible Markdown parser that allows you to convert Markdown syntax into HTML. It’s widely used for rendering Markdown content on websites, blogs, and documentation.
|
||||
|
||||
## Markdown-it Plugins
|
||||
|
||||
Markdown-it supports community-written plugins. The Plugins can be loaded like this:
|
||||
|
||||
```js
|
||||
const md = markdownit
|
||||
.use(plugin1)
|
||||
.use(plugin2, opts, ...)
|
||||
.use(plugin3);
|
||||
```
|
||||
|
||||
## Marp Slides Markdown-It Plugins
|
||||
|
||||
- [Mark](31.Markdown-it-Mark.md)
|
||||
- [Containers](32.Markdown-it-Conteiners.md)
|
||||
- [Kroki](33.Markdown-it-Kroki.md)
|
||||
Executable
+30
@@ -0,0 +1,30 @@
|
||||
---
|
||||
title: Markdown-It Mark
|
||||
parent: Markdown-It Plugins
|
||||
created: 2025-09-09T19:23
|
||||
updated: 2025-09-22T13:27
|
||||
---
|
||||
|
||||
# Markdown-It Mark
|
||||
|
||||
Markup uses the same conditions as CommonMark [emphasis](http://spec.commonmark.org/0.15/#emphasis-and-strong-emphasis).
|
||||
|
||||
`==marked==` => `<mark>inserted</mark>`
|
||||
|
||||
## Sample
|
||||
|
||||
```markdown
|
||||
---
|
||||
# Text Highlights
|
||||
|
||||
**[markdown-it-mark](https://github.com/markdown-it/markdown-it-mark)**
|
||||
|
||||
This is ==marked== text
|
||||
---
|
||||
```
|
||||
|
||||
|
||||
|
||||
## References
|
||||
|
||||
- [markdown-it-mark](https://github.com/markdown-it/markdown-it-mark)
|
||||
+59
@@ -0,0 +1,59 @@
|
||||
---
|
||||
title: Markdown-It Conteiners
|
||||
parent: Markdown-It Plugins
|
||||
created: 2025-09-09T19:23
|
||||
updated: 2025-09-22T13:27
|
||||
---
|
||||
|
||||
# Markdown-It Container
|
||||
|
||||
With this plugin you can create block containers like:
|
||||
|
||||
```markdown
|
||||
::: container
|
||||
*here be dragons*
|
||||
:::
|
||||
```
|
||||
|
||||
.... and specify how they should be rendered. If no renderer defined, `<div>` with
|
||||
container name class will be created:
|
||||
|
||||
```html
|
||||
<div class="container">
|
||||
<em>here be dragons</em>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Sample
|
||||
|
||||
```markdown
|
||||
---
|
||||
|
||||
<!-- _class: box-flex -->
|
||||
# Columns Containers
|
||||
|
||||
**[markdown-it-container](https://github.com/markdown-it/markdown-it-container)**
|
||||
|
||||
::: container
|
||||
## Colum 1
|
||||
|
||||
text dadadas text text text text text text text text text text
|
||||
|
||||
:::
|
||||
|
||||
::: container
|
||||
## Colum 2
|
||||
|
||||
text
|
||||
|
||||
:::
|
||||
|
||||
---
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
## References
|
||||
|
||||
- [markdown-it-container](https://github.com/markdown-it/markdown-it-container)
|
||||
Executable
+52
@@ -0,0 +1,52 @@
|
||||
---
|
||||
title: Markdown-It Kroki
|
||||
parent: Markdown-It Plugins
|
||||
created: 2025-09-09T19:23
|
||||
updated: 2025-09-22T13:27
|
||||
---
|
||||
|
||||
# markdown-it-kroki
|
||||
|
||||
> This library was designed to embed [Kroki.io](https://kroki.io/) diagram into [Marp](https://marp.app/) slide decks!!
|
||||
|
||||
This library is a plugin for markdown-it to embed figure created by textual syntax.
|
||||
To use this package, you can embed **Software Diagram** (like UML) written by **code** in Marp slide decks.
|
||||
|
||||
## Sample
|
||||
|
||||
```
|
||||
|
||||
@startuml
|
||||
left to right direction
|
||||
actor Guest as g
|
||||
package Professional {
|
||||
actor Chef as c
|
||||
actor "Food Critic" as fc
|
||||
}
|
||||
package Restaurant {
|
||||
usecase "Eat Food" as UC1
|
||||
usecase "Pay for Food" as UC2
|
||||
usecase "Drink" as UC3
|
||||
usecase "Review" as UC4
|
||||
}
|
||||
fc --> UC4
|
||||
g --> UC1
|
||||
g --> UC2
|
||||
g --> UC3
|
||||
@enduml
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
If you want to write diagrams, you can use various syntaxes (such as [PlantUML](https://plantuml.com/) or [Mermaid](https://mermaid-js.github.io/mermaid/#/)) within fenced code blocks.
|
||||
|
||||
|
||||
> [!NOTE]
|
||||
> This package depends on [Kroki.io](https://kroki.io).
|
||||
> If you want to know which **diagram languages are supported**,
|
||||
> please check the official website at [https://kroki.io/](https://kroki.io/).
|
||||
|
||||
## References
|
||||
|
||||
- [markdown-it-kroki](https://github.com/kazumatu981/markdown-it-kroki)
|
||||
Executable
+27
@@ -0,0 +1,27 @@
|
||||
---
|
||||
title: Examples
|
||||
nav_order: 5
|
||||
created: 2025-09-09T19:23
|
||||
updated: 2025-09-22T13:27
|
||||
---
|
||||
|
||||
# Examples
|
||||
|
||||
## Setup Vault
|
||||
|
||||
- clone and open
|
||||
- install marp community plugin
|
||||
- configure obsidian
|
||||
- configure theme
|
||||
|
||||
|
||||
|
||||
## Example Vault
|
||||
|
||||
We have created a dedicated Obsidian vault for testing the plugin and Marp presentations. It is a great way to explore the full potential of these tool without impacting your main vault or risking any data loss or corruption. By using a separate vault for testing, you can experiment freely and make changes without worrying about affecting your existing notes and files.
|
||||
|
||||
To set up a lab Obsidian vault, you can clone the [plugin repository](https://github.com/samuele-cozzi/obsidian-marp-slides) and open the vault folder with obsidian.
|
||||
|
||||
|
||||
|
||||
One area where the lab vault can be especially useful is in testing Marp presentations. Marp is an open-source tool that allows users to create professional-looking presentations using simple Markdown syntax. By building and testing Marp presentations within your lab Obsidian vault, you can experiment with different formatting options and see how your presentations look and feel in a safe and isolated environment.
|
||||
Executable
+314
@@ -0,0 +1,314 @@
|
||||
---
|
||||
title: Changelog
|
||||
nav_order: 99
|
||||
created: 2025-09-09T19:23
|
||||
updated: 2025-09-22T13:27
|
||||
---
|
||||
|
||||
# Changelog
|
||||
|
||||
## [0.45.6](https://github.com/samuele-cozzi/obsidian-marp-slides/compare/0.45.5...0.45.6) (2024-05-08)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* engine resolved on ubuntu ([8fe76a7](https://github.com/samuele-cozzi/obsidian-marp-slides/commit/8fe76a7adb2605d8ee3d088265d47fcbcc3d37cd))
|
||||
* engine resolved on ubuntu ([897fa14](https://github.com/samuele-cozzi/obsidian-marp-slides/commit/897fa14d33cc4ce3780d350dcac74917d9e53d33))
|
||||
* Merge pull request [#159](https://github.com/samuele-cozzi/obsidian-marp-slides/issues/159) from samuele-cozzi:156-the-specified-engine-cannot-be-resolved ([8fe76a7](https://github.com/samuele-cozzi/obsidian-marp-slides/commit/8fe76a7adb2605d8ee3d088265d47fcbcc3d37cd))
|
||||
|
||||
## [0.45.5](https://github.com/samuele-cozzi/obsidian-marp-slides/compare/0.45.4...0.45.5) (2024-03-09)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* enhancement of the doc ([235483a](https://github.com/samuele-cozzi/obsidian-marp-slides/commit/235483a2ed8c1fa1fa7110a7dc4e53e3ca30d4b3))
|
||||
|
||||
## [0.45.4](https://github.com/samuele-cozzi/obsidian-marp-slides/compare/0.45.3...0.45.4) (2024-03-09)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* lib not found ([f3666a4](https://github.com/samuele-cozzi/obsidian-marp-slides/commit/f3666a453fef14dc0f128d0f54da06b128d7126d))
|
||||
|
||||
## [0.45.3](https://github.com/samuele-cozzi/obsidian-marp-slides/compare/0.45.2...0.45.3) (2024-03-09)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* dependencies of markdown-it plugins ([657c0aa](https://github.com/samuele-cozzi/obsidian-marp-slides/commit/657c0aa672b370e4daea7c16a229fbc6de9f0f89))
|
||||
|
||||
## [0.45.2](https://github.com/samuele-cozzi/obsidian-marp-slides/compare/0.45.1...0.45.2) (2024-03-09)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* file is null ([d53c34e](https://github.com/samuele-cozzi/obsidian-marp-slides/commit/d53c34e37efebe04858e36484815966437012918))
|
||||
|
||||
## [0.45.1](https://github.com/samuele-cozzi/obsidian-marp-slides/compare/0.45.0...0.45.1) (2024-03-09)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* file parent null ([8140a6a](https://github.com/samuele-cozzi/obsidian-marp-slides/commit/8140a6a16199ce32ddadf8559a8bf8d466b5c2fc))
|
||||
|
||||
## [0.45.0](https://github.com/samuele-cozzi/obsidian-marp-slides/compare/0.44.0...0.45.0) (2024-03-09)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* Merge pull request [#144](https://github.com/samuele-cozzi/obsidian-marp-slides/issues/144) from samuele-cozzi:134-highlighting-missing ([50c4453](https://github.com/samuele-cozzi/obsidian-marp-slides/commit/50c4453f1d2c55f52ebbf0b10417fcb01ae189d2))
|
||||
|
||||
## [0.44.0](https://github.com/samuele-cozzi/obsidian-marp-slides/compare/0.43.0...0.44.0) (2024-01-31)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* Merge pull request [#140](https://github.com/samuele-cozzi/obsidian-marp-slides/issues/140) from samuele-cozzi:139-external-images-dont-appear-in-deck-preview ([43e829f](https://github.com/samuele-cozzi/obsidian-marp-slides/commit/43e829fe4ed98ee504bcb5b3778f9815a8a91489))
|
||||
|
||||
## [0.43.0](https://github.com/samuele-cozzi/obsidian-marp-slides/compare/0.42.2...0.43.0) (2024-01-20)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* mobile app alpha ([6d5f50c](https://github.com/samuele-cozzi/obsidian-marp-slides/commit/6d5f50c1f25f1a9cf35247def50c23c581b0b3f0))
|
||||
|
||||
## [0.42.2](https://github.com/samuele-cozzi/obsidian-marp-slides/compare/0.42.1...0.42.2) (2024-01-18)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* issues 129, 130 suggestion ([57d4ce5](https://github.com/samuele-cozzi/obsidian-marp-slides/commit/57d4ce5fd4d32bc5b3a780e786a71e473f7695ec))
|
||||
|
||||
## [0.42.1](https://github.com/samuele-cozzi/obsidian-marp-slides/compare/0.42.0...0.42.1) (2024-01-07)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* error Line selection listener ([d37a358](https://github.com/samuele-cozzi/obsidian-marp-slides/commit/d37a35856e22c7921162067c665eec0e63beae92))
|
||||
* Merge pull request [#131](https://github.com/samuele-cozzi/obsidian-marp-slides/issues/131) from samuele-cozzi:130-v0420-breaks-other-plugins-suggestion-completion ([d37a358](https://github.com/samuele-cozzi/obsidian-marp-slides/commit/d37a35856e22c7921162067c665eec0e63beae92))
|
||||
|
||||
## [0.42.0](https://github.com/samuele-cozzi/obsidian-marp-slides/compare/0.41.0...0.42.0) (2023-12-24)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* Merge pull request [#126](https://github.com/samuele-cozzi/obsidian-marp-slides/issues/126) from samuele-cozzi:124-synchronize-scrolling-of-markdown-editing-view-and-slide-preview-view ([9ebc658](https://github.com/samuele-cozzi/obsidian-marp-slides/commit/9ebc658222b558806e7e5d55b80fe4a3ed872d17))
|
||||
* sync code editor and preview ([9ebc658](https://github.com/samuele-cozzi/obsidian-marp-slides/commit/9ebc658222b558806e7e5d55b80fe4a3ed872d17))
|
||||
|
||||
## [0.41.0](https://github.com/samuele-cozzi/obsidian-marp-slides/compare/0.40.0...0.41.0) (2023-11-22)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* Merge pull request [#121](https://github.com/samuele-cozzi/obsidian-marp-slides/issues/121) from samuele-cozzi:116-how-to-export-the-powerpoint-document ([16adf12](https://github.com/samuele-cozzi/obsidian-marp-slides/commit/16adf120d5640d65628f8107ce9466d706ef66f5))
|
||||
* shortcut for export pptx ([16adf12](https://github.com/samuele-cozzi/obsidian-marp-slides/commit/16adf120d5640d65628f8107ce9466d706ef66f5))
|
||||
* shortcut for export pptx ([5efbe82](https://github.com/samuele-cozzi/obsidian-marp-slides/commit/5efbe8266ba4d94cd43b87c328c9e59c576db717))
|
||||
|
||||
## [0.40.0](https://github.com/samuele-cozzi/obsidian-marp-slides/compare/0.39.0...0.40.0) (2023-11-22)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* documentation tree ([d66318e](https://github.com/samuele-cozzi/obsidian-marp-slides/commit/d66318e1357b930dbd6fa647f2cf6e2b15588c5c))
|
||||
|
||||
## [0.39.0](https://github.com/samuele-cozzi/obsidian-marp-slides/compare/0.38.1...0.39.0) (2023-10-31)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* release new version ([9f8a6e1](https://github.com/samuele-cozzi/obsidian-marp-slides/commit/9f8a6e179314dc87da59985e9ae58bdb8287c050))
|
||||
|
||||
## [0.38.1](https://github.com/samuele-cozzi/obsidian-marp-slides/compare/0.38.0...0.38.1) (2023-10-27)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* enable advanced html ([88a95ae](https://github.com/samuele-cozzi/obsidian-marp-slides/commit/88a95aefb072f0f9963779b962f5f70a42797e47))
|
||||
* Merge pull request [#109](https://github.com/samuele-cozzi/obsidian-marp-slides/issues/109) from samuele-cozzi/108-html-enhanced-view ([88a95ae](https://github.com/samuele-cozzi/obsidian-marp-slides/commit/88a95aefb072f0f9963779b962f5f70a42797e47))
|
||||
|
||||
## [0.38.0](https://github.com/samuele-cozzi/obsidian-marp-slides/compare/0.37.1...0.38.0) (2023-09-10)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* presents slides ([515ce27](https://github.com/samuele-cozzi/obsidian-marp-slides/commit/515ce27df87d7316c8b27ed3566d4c366b51a727))
|
||||
|
||||
## [0.37.1](https://github.com/samuele-cozzi/obsidian-marp-slides/compare/0.37.0...0.37.1) (2023-08-06)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* Update README.md ([5ea42d9](https://github.com/samuele-cozzi/obsidian-marp-slides/commit/5ea42d93096d62dd017fb98d36d27bbf4b01a300))
|
||||
|
||||
## [0.37.0](https://github.com/samuele-cozzi/obsidian-marp-slides/compare/0.36.1...0.37.0) (2023-06-24)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* advanced html export ([14523f9](https://github.com/samuele-cozzi/obsidian-marp-slides/commit/14523f9fbf642674a56f154c3c1f47b271972eb7))
|
||||
* advanced html export ([41e77f3](https://github.com/samuele-cozzi/obsidian-marp-slides/commit/41e77f310dbf5ca04f9f915df9b9dc9fdc4d14ba))
|
||||
* Merge pull request [#94](https://github.com/samuele-cozzi/obsidian-marp-slides/issues/94) from samuele-cozzi:feature/advanced-html-export ([14523f9](https://github.com/samuele-cozzi/obsidian-marp-slides/commit/14523f9fbf642674a56f154c3c1f47b271972eb7))
|
||||
|
||||
## [0.36.1](https://github.com/samuele-cozzi/obsidian-marp-slides/compare/0.36.0...0.36.1) (2023-06-22)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* add plugin copy package ([ca85ae4](https://github.com/samuele-cozzi/obsidian-marp-slides/commit/ca85ae49ecf2ef365646deee259e2cdc7c0bffcb))
|
||||
|
||||
## [0.36.0](https://github.com/samuele-cozzi/obsidian-marp-slides/compare/0.35.0...0.36.0) (2023-06-22)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* advanced html export ([310777a](https://github.com/samuele-cozzi/obsidian-marp-slides/commit/310777ab9fabaf6b3d275fcbe17d02129fb94475))
|
||||
|
||||
## [0.35.0](https://github.com/samuele-cozzi/obsidian-marp-slides/compare/0.34.5...0.35.0) (2023-06-22)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* github action ([7a31ceb](https://github.com/samuele-cozzi/obsidian-marp-slides/commit/7a31ceb58b60124fe0ca35d0fe2e129dba6b594d))
|
||||
* html advanced ([62317d1](https://github.com/samuele-cozzi/obsidian-marp-slides/commit/62317d1418090077f3e4c24e2088075ce30731fb))
|
||||
|
||||
## [0.34.5](https://github.com/samuele-cozzi/obsidian-marp-slides/compare/0.34.4...0.34.5) (2023-06-22)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* add comment ([06f435f](https://github.com/samuele-cozzi/obsidian-marp-slides/commit/06f435f0ba7a5dbf4cc0a2d99edb4f27628c691c))
|
||||
|
||||
## [0.34.4](https://github.com/samuele-cozzi/obsidian-marp-slides/compare/0.34.3...0.34.4) (2023-06-22)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* add js files ([1d5ef78](https://github.com/samuele-cozzi/obsidian-marp-slides/commit/1d5ef7825d296495d6c5a75b1daa1317b4ce0223))
|
||||
|
||||
## [0.34.3](https://github.com/samuele-cozzi/obsidian-marp-slides/compare/0.34.2...0.34.3) (2023-06-22)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* main ([7a0cf0d](https://github.com/samuele-cozzi/obsidian-marp-slides/commit/7a0cf0da033166dc148da694d2f3f2c1e6a10dfc))
|
||||
|
||||
## [0.34.2](https://github.com/samuele-cozzi/obsidian-marp-slides/compare/0.34.1...0.34.2) (2023-06-22)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* main ([cbd1b89](https://github.com/samuele-cozzi/obsidian-marp-slides/commit/cbd1b89158277333fdd654b58dc47c0698f715ec))
|
||||
|
||||
## [0.34.1](https://github.com/samuele-cozzi/obsidian-marp-slides/compare/0.34.0...0.34.1) (2023-06-22)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* main file ([c2f5d00](https://github.com/samuele-cozzi/obsidian-marp-slides/commit/c2f5d00a20a7ebf4116f6dac36ff689fa97142d5))
|
||||
|
||||
## [0.34.0](https://github.com/samuele-cozzi/obsidian-marp-slides/compare/0.33.1...0.34.0) (2023-06-22)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* advanced html ([a19ed79](https://github.com/samuele-cozzi/obsidian-marp-slides/commit/a19ed790b4c02570cb8d3a23a9b804141eab8bc5))
|
||||
|
||||
## [0.33.1](https://github.com/samuele-cozzi/obsidian-marp-slides/compare/0.33.0...0.33.1) (2023-05-25)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* images import ([9504a37](https://github.com/samuele-cozzi/obsidian-marp-slides/commit/9504a37213665dfddc8669abb40b56091464d452))
|
||||
|
||||
## [0.33.0](https://github.com/samuele-cozzi/obsidian-marp-slides/compare/0.32.0...0.33.0) (2023-05-22)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* export on preview ([e8fd63e](https://github.com/samuele-cozzi/obsidian-marp-slides/commit/e8fd63e6ee127208f5e1e01438bd3211bac73a2f))
|
||||
|
||||
## [0.32.0](https://github.com/samuele-cozzi/obsidian-marp-slides/compare/0.31.0...0.32.0) (2023-05-11)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* Settings: Math Typesettings [#71](https://github.com/samuele-cozzi/obsidian-marp-slides/issues/71) ([#74](https://github.com/samuele-cozzi/obsidian-marp-slides/issues/74)) ([9e9c00f](https://github.com/samuele-cozzi/obsidian-marp-slides/commit/9e9c00f9befc548f6159723a46e454aba905b475))
|
||||
|
||||
## [0.31.0](https://github.com/samuele-cozzi/obsidian-marp-slides/compare/0.30.2...0.31.0) (2023-05-11)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* enable HTML setting ([#72](https://github.com/samuele-cozzi/obsidian-marp-slides/issues/72)) ([97bd5b9](https://github.com/samuele-cozzi/obsidian-marp-slides/commit/97bd5b9a1f744ea7a7fd50739ceefa142b356ae1))
|
||||
|
||||
## [0.30.2](https://github.com/samuele-cozzi/obsidian-marp-slides/compare/0.30.1...0.30.2) (2023-04-28)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* main.js location for deployment ([#65](https://github.com/samuele-cozzi/obsidian-marp-slides/issues/65)) ([5a4ed39](https://github.com/samuele-cozzi/obsidian-marp-slides/commit/5a4ed39b68887f1e0a674dd2771835e06aa570b3))
|
||||
|
||||
## [0.30.1](https://github.com/samuele-cozzi/obsidian-marp-slides/compare/0.30.0...0.30.1) (2023-04-28)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* local development ([4543176](https://github.com/samuele-cozzi/obsidian-marp-slides/commit/4543176c9751ee71b1fa78a0e8955839e3ee12ba))
|
||||
* local development ([3368d82](https://github.com/samuele-cozzi/obsidian-marp-slides/commit/3368d82a3be159d52331544c1b3e8fd034913dab))
|
||||
* Merge pull request [#63](https://github.com/samuele-cozzi/obsidian-marp-slides/issues/63) from samuele-cozzi:fix/release-0.30 ([4543176](https://github.com/samuele-cozzi/obsidian-marp-slides/commit/4543176c9751ee71b1fa78a0e8955839e3ee12ba))
|
||||
|
||||
## [0.30.0](https://github.com/samuele-cozzi/obsidian-marp-slides/compare/0.29.1...0.30.0) (2023-04-28)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* autoscaling base ([#61](https://github.com/samuele-cozzi/obsidian-marp-slides/issues/61)) ([d3e0fca](https://github.com/samuele-cozzi/obsidian-marp-slides/commit/d3e0fca67f8944f2a6df93ae62410c9b381342ac))
|
||||
|
||||
## [0.29.1](https://github.com/samuele-cozzi/obsidian-marp-slides/compare/0.29.0...0.29.1) (2023-03-15)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* fixes for publish plugin ([#58](https://github.com/samuele-cozzi/obsidian-marp-slides/issues/58)) ([01cd1f5](https://github.com/samuele-cozzi/obsidian-marp-slides/commit/01cd1f5cbdb9c8ff23b5d773b8d2a9f2935685f4))
|
||||
|
||||
## [0.29.0](https://github.com/samuele-cozzi/obsidian-marp-slides/compare/0.28.2...0.29.0) (2023-03-09)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* Features/docs base ([#56](https://github.com/samuele-cozzi/obsidian-marp-slides/issues/56)) ([6a8076b](https://github.com/samuele-cozzi/obsidian-marp-slides/commit/6a8076b888c16e5aaa57c96f297e34e84f12b46b))
|
||||
|
||||
## [0.28.2](https://github.com/samuele-cozzi/obsidian-marp-slides/compare/0.28.1...0.28.2) (2023-03-08)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* unit tests ([da08b9b](https://github.com/samuele-cozzi/obsidian-marp-slides/commit/da08b9b122e6cfd1d5e14c6374521885ddb421cb))
|
||||
|
||||
## [0.28.1](https://github.com/samuele-cozzi/obsidian-marp-slides/compare/0.28.0...0.28.1) (2023-03-08)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* normalize path of pictures ([#53](https://github.com/samuele-cozzi/obsidian-marp-slides/issues/53)) ([c362ae5](https://github.com/samuele-cozzi/obsidian-marp-slides/commit/c362ae56a3d931bf154e4a2d043890f380a31760)), closes [#46](https://github.com/samuele-cozzi/obsidian-marp-slides/issues/46)
|
||||
|
||||
## [0.28.0](https://github.com/samuele-cozzi/obsidian-marp-slides/compare/0.27.0...0.28.0) (2023-03-08)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* unit tests ([bc07f3c](https://github.com/samuele-cozzi/obsidian-marp-slides/commit/bc07f3c0d3a4d58c55f2b0d2794f07826047b74e))
|
||||
|
||||
## [0.27.0](https://github.com/samuele-cozzi/obsidian-marp-slides/compare/0.26.0...0.27.0) (2023-03-08)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* add unit tests ([f0cc955](https://github.com/samuele-cozzi/obsidian-marp-slides/commit/f0cc955a9c08313cf6db663677a885342d56afa3))
|
||||
|
||||
## [0.26.0](https://github.com/samuele-cozzi/obsidian-marp-slides/compare/0.25.0...0.26.0) (2023-03-04)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* move changelog ([ce87295](https://github.com/samuele-cozzi/obsidian-marp-slides/commit/ce87295fbbe2171a017238eaa4129ec31abc214f))
|
||||
Executable
+69
@@ -0,0 +1,69 @@
|
||||
---
|
||||
title: Developer Guide
|
||||
nav_order: 6
|
||||
created: 2025-09-09T19:23
|
||||
updated: 2025-09-22T13:27
|
||||
---
|
||||
|
||||
# Developer Guide
|
||||
|
||||
## Develop & Test new Features
|
||||
|
||||
To get started, initiate the process by cloning this repository to your local environment. This will create a local copy of the entire project, allowing you to work on, modify, and contribute to the codebase seamlessly
|
||||
|
||||
```bash
|
||||
$ git clone https://github.com/samuele-cozzi/obsidian-marp-slides.git
|
||||
```
|
||||
|
||||
For testing purposes, make modifications to the esbuild.config.mjs file. This file contains configuration settings for esbuild, and adjusting its parameters will allow you to experiment with different build options and observe their effects on your project.
|
||||
|
||||
form:
|
||||
|
||||
```js
|
||||
//outfile: "vault/.obsidian/plugins/marp-slides/main.js", //for local dev!!!
|
||||
outfile: "main.js",
|
||||
```
|
||||
|
||||
to:
|
||||
|
||||
```js
|
||||
outfile: "vault/.obsidian/plugins/marp-slides/main.js", //for local dev!!!
|
||||
//outfile: "main.js",
|
||||
```
|
||||
|
||||
Proceed to compile and run the code. This step will apply your changes and generate the executable output, providing an opportunity to test and validate the impact of your configuration adjustments on the project's build and runtime behavior
|
||||
|
||||
```bash
|
||||
# get packages
|
||||
npm install
|
||||
|
||||
# biuld, test, run
|
||||
npm run build
|
||||
npm run test
|
||||
|
||||
npm run dev
|
||||
```
|
||||
|
||||
Open the simple vault and test and validate the changes.
|
||||
|
||||
PLEASE REMEMBER: not commit the `esbuild.config.mjs` file!
|
||||
|
||||
## Create new Release
|
||||
|
||||
This repository use [Release please](https://github.com/googleapis/release-please) to automate CHANGELOG generation, the creation of GitHub releases, and version bumps.
|
||||
"Release Please" is a GitHub Action that automates the release management process for software projects hosted on GitHub. Developed by Google, "Release Please" is designed to simplify the creation of GitHub releases by automatically generating release notes based on the changes made in the codebase since the last release.
|
||||
|
||||
The workflow involves using the tool to analyze the commit history, detect semantic version bumps (such as bug fixes, new features, or breaking changes), and compile release notes accordingly. It can then automatically create a new release on GitHub, including the generated release notes and a version tag.
|
||||
|
||||
### Create git commits or Merge commits
|
||||
|
||||
Release Please assumes you are using [Conventional Commit messages](https://www.conventionalcommits.org/).
|
||||
|
||||
The most important prefixes you should have in mind are:
|
||||
|
||||
* `fix:` which represents bug fixes, and correlates to a [SemVer](https://semver.org/)
|
||||
patch.
|
||||
* `feat:` which represents a new feature, and correlates to a SemVer minor.
|
||||
* `feat!:`, or `fix!:`, `refactor!:`, etc., which represent a breaking change
|
||||
(indicated by the `!`) and will result in a SemVer major.
|
||||
|
||||
Executable
+24
@@ -0,0 +1,24 @@
|
||||
###########################################################
|
||||
### Welcome to Beautiful Jekyll!
|
||||
### This config file is meant for settings that affect your entire website. When you first
|
||||
### set up your website you should go through all these settings and edit them, but after
|
||||
### the initial set up you won't need to come back to this file often.
|
||||
###########################################################
|
||||
|
||||
############################
|
||||
# --- Required options --- #
|
||||
############################
|
||||
|
||||
# Name of website
|
||||
title: Obsidian Marp
|
||||
|
||||
# Your name to show in the footer
|
||||
author: Samuele Cozzi
|
||||
|
||||
###############################################
|
||||
# --- List of links in the navigation bar --- #
|
||||
###############################################
|
||||
|
||||
remote_theme: just-the-docs/just-the-docs
|
||||
plugins:
|
||||
- jekyll-remote-theme
|
||||
Executable
+26
@@ -0,0 +1,26 @@
|
||||
---
|
||||
title: Home
|
||||
nav_order: 1
|
||||
created: 2025-09-09T19:23
|
||||
updated: 2025-09-22T13:27
|
||||
---
|
||||
|
||||
# Index
|
||||
|
||||
## Getting Started
|
||||
|
||||
- [Setup Vault](11.SetupVault.md)
|
||||
- [Configuration](12.Configuration.md)
|
||||
- [Marp Syntax](13.MarpSyntax.md)
|
||||
- [First Deck](14.FirstDeck.md)
|
||||
|
||||
## Features
|
||||
|
||||
- [Slides Preview](21.SlidesPreview.md)
|
||||
- [Slides Export](22.SlidesExport.md)
|
||||
- [Slides Custom Theme](23.SlidesCustomTheme.md)
|
||||
|
||||
## Examples
|
||||
|
||||
- [Setup Vault](30.Examples.md#setup-vault)
|
||||
- [Example Vault](30.Examples.md#example-vault)
|
||||
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 136 KiB |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 492 KiB |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 485 KiB |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 504 KiB |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 308 KiB |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 867 KiB |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 224 KiB |
File diff suppressed because one or more lines are too long
+356
File diff suppressed because one or more lines are too long
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 101 KiB |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 178 KiB |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 332 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 198 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 112 KiB |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 123 KiB |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
Executable
+1032
File diff suppressed because one or more lines are too long
Executable
+942
@@ -0,0 +1,942 @@
|
||||
---
|
||||
marp: true
|
||||
size: 16:9
|
||||
theme: am_blue
|
||||
paginate: true
|
||||
headingDivider:
|
||||
- 2
|
||||
- 3
|
||||
footer: \ *初虹（虹鹄山庄）* *Awesome Marp：轻松取代 LaTeX Beamer！* *2024年1月13日（v1.3）*
|
||||
created: 2025-09-09T18:22
|
||||
updated: 2025-09-22T13:27
|
||||
---
|
||||
|
||||
|
||||
<!-- _class: cover_a
|
||||
<!-- _header: "" -->
|
||||
<!-- _footer: "" -->
|
||||
<!-- _paginate: "" -->
|
||||
|
||||
# Awesome Marp：轻松取代 LaTeX Beamer！
|
||||
|
||||
###### “用法简单、功能全面的个性化 PPT 模板”
|
||||
|
||||
@初虹
|
||||
公众号：虹鹄山庄
|
||||
发布时间：2024 年 1 月 13 日（v1.3）
|
||||
<ch2099058972@163.com>
|
||||
Awesome-Marp 地址：[GitHub 库](https://github.com/favourhong/Awesome-Marp)/[Gitee 库](https://gitee.com/favourhong/Awesome-Marp)
|
||||
|
||||
## Awesome Marp 有什么？
|
||||
|
||||
<!-- _class: cols2_ol_ci fglass toc_a -->
|
||||
<!-- _footer: "" -->
|
||||
<!-- _header: "CONTENTS" -->
|
||||
<!-- _paginate: "" -->
|
||||
|
||||
- [关于模板](#3)
|
||||
- [封面页](#10)
|
||||
- [目录页](#16)
|
||||
- [页面分栏与列表分列](#20)
|
||||
- [引用、链接和引用盒子](#38)
|
||||
- [导航栏](#45)
|
||||
- [其他自定义样式](#48)
|
||||
- [需要知道的基础知识](#56)
|
||||
- [最后一页](#59)
|
||||
|
||||
## 1. 关于模板
|
||||
|
||||
<!-- _class: trans -->
|
||||
<!-- _footer: "" -->
|
||||
<!-- _paginate: "" -->
|
||||
|
||||
## 1. 关于模板
|
||||
|
||||
- **开始之前：** 你需要知道这样几个工具，Markdown、Markdown 编辑器（VS Code 或 Obsidian）和 Marp。关于这三者是个啥，我不做详细地介绍，但在[第 55 页](#55)-[第 58 页](#58)会有一些凝练性的内容给你参考，同时我提供了不少的链接，也供你参阅。
|
||||
- **为什么要开发 Awesome Marp？**
|
||||
- Marp 原生仅提供 3 种主题（`default` / `gaia` / `uncover`），呈现效果一般。于是我根据自己的使用情况，边用边改造，陆续打磨了这样的一整套模板。
|
||||
- **目前发布的 v1.3 有 38 个自定义样式、6 种颜色的主题**（后面有呈现效果）
|
||||
- **Awesome Marp 的几个特色：**
|
||||
- 支持分栏呈现、支持 Callouts（类似于 Beamer 中的定理框）、提供多种类型的封面页和目录页、可以实现导航进度栏、图片支持自定义居中/居左/居右对齐等
|
||||
|
||||
- 本着「开箱即用」的原则，我将本项目文件夹打包上传到了[GitHub](https://github.com/favourhong/Awesome-Marp) 和 [Gitee](https://gitee.com/favourhong/Awesome-Marp)
|
||||
- 用到的工具：软件 [Visual Studio Code](https://code.visualstudio.com) 或 [Obsidian](https://obsidian.md/)、[Marp for VScode（插件）](https://marketplace.visualstudio.com/items?itemName=marp-team.marp-vscode)
|
||||
|
||||
## 1. 关于模板
|
||||
|
||||
|
||||
- Awesome Marp 支持 38 个自定义样式，使用时需在页面指定（如 `<!-- _class: trans -->`）：
|
||||
|
||||
| 封面页 | 目录页 | 列表 | 引用盒子 | 其他 1 | 其他 2 |
|
||||
| --------- | ------- | ----------- | ----------- | ----------------------------- | --------------------------------------------------------------- |
|
||||
| `cover_a` | `toc_a` | `cols-2` | `bq-black` | 过渡页面 `trans` | 图表等的标题 `caption` |
|
||||
| `cover_b` | `toc_b` | `cols-2-64` | `bq-purple` | 最后一页 `lastpage` | 非嵌套无序列表的毛玻璃效果 `fglass` |
|
||||
| `cover_c` | | `cols-2-73` | `bq-red` | 导航栏 `navbar` | 脚注：`footnote` |
|
||||
| `cover_d` | | `cols-3` | `bq-blue` | 标题固定+无底色 `fixedtitleA` | 调节字体大小：`tinytext`/`smalltext`/<br>`largetext`/`hugetext` |
|
||||
| `cover_e` | | `cols-2-46` | `bq-green` | 标题固定+有底色 `fixedtitleB` | |
|
||||
| | | `cols-2-37` | | 两列有序列表 `cols2_ol_sq/ci` | |
|
||||
| | | `rows-2` | | 两列无序列表 `cols_ul_sq/ci` | |
|
||||
| | | `pin-3` | | 单列有序列表 `col1_ul_sq/ci` | |
|
||||
|
||||
|
||||
## 1. 关于模板
|
||||
|
||||
|
||||
- Awesome Marp 的主题色（6 种），可在 YAML 区切换 Theme，如 `theme: am_dark`：
|
||||
|
||||
| 深色 | 绿色 | 红色 | 蓝色 | 棕色 | 紫色
|
||||
|---------|----------|--------|---------|----------|----|
|
||||
| `am_dark` | `am_green` | `am_red` | `am_blue` | `am_brown` |`am_purple`|
|
||||
|
||||
|
||||
## 1. 关于模板
|
||||
|
||||
- 如何使用：
|
||||
- **搭配 VS Code**：直接使用 VS Code 打开 `Awesome-Marp` 文件夹
|
||||
- 如果你想「拿来即用」，直接根据我分享的 Markdown 源码文件，对照修改就好了~
|
||||
- 如果你对部分效果不满意、期望简单微调的话，目前在 `Awesome-Marp/themes` 下有 6 个 CSS 文件，这些 CSS 文件决定了 Markdown 源码的最终渲染效果，可以试着改一改~
|
||||
- 如果你能够自行定制个性化 CSS 文件，渲染前，别忘在 `Awesome-Marp/.vscode/settings.json` 里加上你的 CSS 文件路径~
|
||||
- **搭配 Obsidian**：安装 [Marp Slides 插件](https://github.com/samuele-cozzi/obsidian-marp-slides)，并配置相应 CSS 路径
|
||||
|
||||
- 字体：因担心版权问题，需自行下载字体并安装，Awesome Marp 用到的字体有：
|
||||
- 正文字体：`Latin Modern Math`、`方正宋刻本秀楷简体`，如果未安装，默认将使用 `Calibri` 和 `楷体`
|
||||
- 标题字体：`Optima LT Medium`、`方正苏新诗柳楷简体`，如果未安装，默认将使用 `Arial` 和 `黑体`
|
||||
- 脚注字体：`Charm` 和 `叶根友毛笔行书修正版`，如果未安装，默认将使用 `Calibri` 和 `楷体`
|
||||
- 代码字体：`Fira Code` 和 `霞鹜文楷等宽`，如果未安装，默认将使用 `Consolas` 和 `华文中宋`
|
||||
|
||||
## 1. 关于模板：更新日志
|
||||
|
||||
- [Awesome Marp v1.0：我开发了一整套 Marp 主题，Markdown 转换的 PPT 也可以很好看！](https://mp.weixin.qq.com/s?__biz=MzkwOTE3NDExOQ==&mid=2247486787&idx=1&sn=2652ddae81f50240844cb652780912e1&chksm=c13ff94bf648705da1ba986b91265e3ff018acaffcfa60d7807a81be22176005e7a2b4483627&scene=178&cur_album_id=3132459596339757070#rd)
|
||||
- [Awesome Marp v1.1：标题行不随正文浮动，这下更像 Beamer 了！](https://mp.weixin.qq.com/s?__biz=MzkwOTE3NDExOQ==&mid=2247486800&idx=1&sn=527348e242576079e4bd6cd1823c823a&chksm=c13ff958f648704e40a202db6ad5fa215ef4c189d66403e161d6ace9828406a8747ac755684f&scene=178&cur_album_id=3132459596339757070#rd)
|
||||
- [Awesome Marp v1.2：增加脚注、调节字体大小等样式～](https://mp.weixin.qq.com/s?__biz=MzkwOTE3NDExOQ==&mid=2247486825&idx=1&sn=56d632ce164831438ec87c1b20ed4c4c&chksm=c13ff961f64870774f069ab816340783d8f54fd6b89363b8d9412c593efc640851ce9edd8833&scene=178&cur_album_id=3132459596339757070#rd)
|
||||
- [Awesome Marp v1.3：几处小更新～](https://mp.weixin.qq.com/s?__biz=MzkwOTE3NDExOQ==&mid=2247486869&idx=1&sn=fcc377ff6a5930436e5078a09d53f0ab&chksm=c13ff99df648708b89bafba030b27909d0022279e26da723ca54a1666fe55f50a4230f050662&scene=178&cur_album_id=3132459596339757070#rd)
|
||||
|
||||
|
||||
## 下面让我们看看效果吧 ~
|
||||
|
||||
<!-- _class: trans -->
|
||||
<!-- _footer: "" -->
|
||||
<!-- _paginate: "" -->
|
||||
|
||||
## 2. 封面页
|
||||
|
||||
<!-- _class: trans -->
|
||||
<!-- _footer: "" -->
|
||||
<!-- _paginate: "" -->
|
||||
|
||||
## 2. 封面页
|
||||
|
||||
- 大标题：采用一级标题 `# ` （如：`# Awesome Marp：自定义 Marp 主题`）
|
||||
- 副标题：采用六级标题 `###### ` （如：`###### 打造简便又不失个性的演示文稿`）
|
||||
- 本套模板提供 5 种封面页样式，使用时需要在页面中设定局部指令，如：`<!-- _class: cover_a -->`
|
||||
- `cover_a`：[第 1 种](#1)
|
||||
- `cover_b`：[第 2 种](#12)
|
||||
- `cover_c`：预留 header 可设定学校 logo，footer 可设定校训 [第 3 种](#13)
|
||||
- `cover_d`：只预留了 footer 设定校训 [第 4 种](#14)
|
||||
- `cover_e`：预留 header 设定学校 logo，footer 设定学校 logo 和学校名称[第 5 种](#15)
|
||||
|
||||
- 如果已经设定了全局 footer、header 或页码，但又不期望在封面页中出现，可以 `<!-- _footer: "" -->` / `<!-- _header: "" -->` / `<!-- _paginate: "" -->` 分别将其局部隐藏起来
|
||||
- 当标题文字超过页面宽度会溢出换行，这里可以使用 `<!-- fit -->` 根据页面宽度自动调整文字大小
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: cover_b -->
|
||||
<!-- _header: "" -->
|
||||
<!-- _footer: "" -->
|
||||
<!-- _paginate: "" -->
|
||||
|
||||
# Awesome Marp：轻松取代 LaTeX Beamer！
|
||||
|
||||
###### “用法简单、功能全面的个性化 PPT 模板”
|
||||
|
||||
@初虹
|
||||
公众号：虹鹄山庄
|
||||
发布时间：2024 年 1 月 13 日（v1.3）
|
||||
<ch2099058972@163.com>
|
||||
Awesome-Marp 地址：[GitHub 库](https://github.com/favourhong/Awesome-Marp)/[Gitee 库](https://gitee.com/favourhong/Awesome-Marp)
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: cover_c -->
|
||||
<!-- _paginate: "" -->
|
||||
<!-- _footer: 厚德博学 经济匡时 -->
|
||||
<!-- _header:  -->
|
||||
|
||||
|
||||
# <!-- fit -->Awesome Marp：轻松取代 LaTeX Beamer！
|
||||
|
||||
###### “用法简单、功能全面的个性化 PPT 模板”
|
||||
|
||||
@初虹
|
||||
公众号：虹鹄山庄
|
||||
发布时间：2024 年 1 月 13 日（v1.3）
|
||||
<ch2099058972@163.com>
|
||||
Awesome-Marp 地址：[GitHub 库](https://github.com/favourhong/Awesome-Marp)/[Gitee 库](https://gitee.com/favourhong/Awesome-Marp)
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: cover_d -->
|
||||
<!-- _paginate: "" -->
|
||||
<!-- _footer: "厚德博学 经济匡时" -->
|
||||
|
||||
# <!-- fit -->Awesome Marp：轻松取代 LaTeX Beamer！
|
||||
|
||||
###### “用法简单、功能全面的个性化 PPT 模板”
|
||||
|
||||
@初虹
|
||||
公众号：虹鹄山庄
|
||||
发布时间：2024 年 1 月 13 日（v1.3）
|
||||
<ch2099058972@163.com>
|
||||
Awesome-Marp 地址：[GitHub 库](https://github.com/favourhong/Awesome-Marp)/[Gitee 库](https://gitee.com/favourhong/Awesome-Marp)
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: cover_e -->
|
||||
<!-- _paginate: "" -->
|
||||
<!-- _footer:  -->
|
||||
<!-- _header:  -->
|
||||
|
||||
|
||||
# <!-- fit -->Awesome Marp：轻松取代 LaTeX Beamer！
|
||||
|
||||
###### “用法简单、功能全面的个性化 PPT 模板”
|
||||
|
||||
@初虹
|
||||
公众号：虹鹄山庄
|
||||
发布时间：2024 年 1 月 13 日（v1.3）
|
||||
<ch2099058972@163.com>
|
||||
Awesome-Marp 地址：[GitHub 库](https://github.com/favourhong/Awesome-Marp)/[Gitee 库](https://gitee.com/favourhong/Awesome-Marp)
|
||||
|
||||
## 3. 目录页
|
||||
|
||||
<!-- _class: trans -->
|
||||
<!-- _footer: "" -->
|
||||
<!-- _paginate: "" -->
|
||||
|
||||
## 3. 目录页
|
||||
|
||||
- Awesome Marp 提供了至少 2 种目录页样式，使用时同样需要设定局部样式
|
||||
- `toc_a`：需要将 header 的内容设定为 `CONTENTS`，即 `<!-- _header: "CONTENTS" -->`
|
||||
- `toc_b`：需要将 header 的内容设定为 `目录<br>CONTENTS<br>你的LOGO地址`，即 `<!-- _header: 目录<br>CONTENTS<br>-->`
|
||||
- 提供的几种分栏列表样式，也可以作为目录页使用，如 `<!-- _class: cols2_ol_ci fglass -->`（效果见[这里](#32)）
|
||||
|
||||
- 类似地，如果已经定义了全局 footer 或页码，可以使用 `<!-- _footer: "" -->` / `<!-- _paginate: "" -->` 分别将其局部隐藏起来
|
||||
- 目录页样式：[第 1 种](#2)、[第 2 种](#18)和[第 3 种](#19)
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: toc_a -->
|
||||
<!-- _header: "CONTENTS" -->
|
||||
<!-- _footer: "" -->
|
||||
<!-- _paginate: "" -->
|
||||
|
||||
- [关于模板](#3)
|
||||
- [封面页](#10)
|
||||
- [目录页](#16)
|
||||
- [页面分栏与列表分列](#20)
|
||||
- [引用、链接和引用盒子](#38)
|
||||
- [导航栏](#45)
|
||||
- [其他自定义样式](#48)
|
||||
- [需要知道的基础知识](#56)
|
||||
- [最后一页](#59)
|
||||
|
||||
---
|
||||
|
||||
<!-- _header: 目录<br>CONTENTS<br>-->
|
||||
<!-- _class: toc_b -->
|
||||
<!-- _footer: "" -->
|
||||
<!-- _paginate: "" -->
|
||||
|
||||
- [关于模板](#3)
|
||||
- [封面页](#10)
|
||||
- [目录页](#16)
|
||||
- [页面分栏与列表分列](#20)
|
||||
- [引用、链接和引用盒子](#38)
|
||||
- [导航栏](#45)
|
||||
- [其他自定义样式](#48)
|
||||
- [需要知道的基础知识](#56)
|
||||
- [最后一页](#59)
|
||||
|
||||
|
||||
## 4. 页面分栏与列表分列
|
||||
|
||||
<!-- _class: trans -->
|
||||
<!-- _footer: "" -->
|
||||
<!-- _paginate: "" -->
|
||||
|
||||
## 4.1 页面分栏与列表分列：页面分栏
|
||||
|
||||
- Awesome Marp 提供了 8 种页面分栏方式，分别为：
|
||||
- `cols-2`：[两列分栏，五五平分](#23)
|
||||
- `cols-2-64`：[两列分栏，六四分](#24)
|
||||
- `cols-2-73`：[两列分栏，七三分](#25)
|
||||
- `cols-2-46`：[两列分栏，四六分](#26)
|
||||
- `cols-2-37`：[两列分栏，三七分](#27)
|
||||
- `cols-3`：[三列分栏，平分](#28)
|
||||
- `rows-2`：[两行分栏](#29)
|
||||
- `pin-3`：[品字型分栏](#30)
|
||||
|
||||
- 如果某一栏为图片，可以将 `class=ldiv` 换成 `class=limg`，这样能够实现图片的垂直居中对齐呢（`class=ldiv` 为居上对齐）
|
||||
|
||||
|
||||
## 4.1 页面分栏与列表分列：页面分栏
|
||||
|
||||
- 以 `<!-- _class: cols-2 -->` 为例，Markdown 的源码为：
|
||||
|
||||
```markdown
|
||||
<!-- _class: cols-2 -->
|
||||
<div class=ldiv>
|
||||
|
||||
第一列（左侧栏）的内容在这里
|
||||
|
||||
内容可以是普通纯文本，可以是列表，也可以是引用块、链接、图片等
|
||||
</div>
|
||||
|
||||
<div class=rdiv>
|
||||
|
||||
第二列（右侧栏）的内容在这里
|
||||
</div>
|
||||
```
|
||||
|
||||
- 如果是分三栏（`<!-- _class: cols-3 -->`），还需要再增加 `<div class="mdiv"></div>` 标签
|
||||
|
||||
|
||||
## 《荷塘月色》（两栏五五分）
|
||||
|
||||
<!-- _class: cols-2 -->
|
||||
|
||||
<div class=ldiv>
|
||||
|
||||
曲曲折折的荷塘上面，弥望的是田田的叶子。叶子出水很高，像亭亭的舞女的裙。
|
||||
|
||||
层层的叶子中间，零星地点缀着些白花，有袅娜地开着的，有羞涩地打着朵儿的；正如一粒粒的明珠，又如碧天里的星星，又如刚出浴的美人。
|
||||
|
||||
微风过处，送来缕缕清香，仿佛远处高楼上渺茫的歌声似的。这时候叶子与花也有一丝的颤动，像闪电般，霎时传过荷塘的那边去了。
|
||||
|
||||
叶子本是肩并肩密密地挨着，这便宛然有了一道凝碧的波痕。叶子底下是脉脉的流水，遮住了，不能见一些颜色；而叶子却更见风致了。
|
||||
|
||||
—— 朱自清《荷塘月色》 [返回](#21)
|
||||
</div>
|
||||
|
||||
<div class=rimg>
|
||||
|
||||
<!--  -->
|
||||
|
||||
</div>
|
||||
|
||||
## 《春》（两栏六四分）
|
||||
|
||||
<!-- _class: cols-2-64 -->
|
||||
|
||||
<div class=limg>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class=rdiv>
|
||||
|
||||
盼望着，盼望着，东风来了，春天的脚步近了。
|
||||
|
||||
一切都像刚睡醒的样子，欣欣然张开了眼。山朗润起来了，水涨起来了，太阳的脸红起来了。
|
||||
|
||||
小草偷偷地从土里钻出来，嫩嫩的，绿绿的。园子里，田野里，瞧去，一大片一大片满是的。坐着，躺着，打两个滚，踢几脚球，赛几趟跑，捉几回迷藏。风轻悄悄的，草软绵绵的。
|
||||
|
||||
—— 朱自清《春》
|
||||
|
||||
[返回](#21)
|
||||
</div>
|
||||
|
||||
## 经典散文诗篇（两栏七三分）
|
||||
|
||||
<!-- _class: cols-2-73 -->
|
||||
|
||||
<div class=limg>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class=rdiv>
|
||||
|
||||
经典的散文诗篇有：
|
||||
|
||||
- 朱自清：《荷塘月色》
|
||||
- 林清玄：《月到天心》
|
||||
- 郁达夫：《古都的秋》
|
||||
- 张爱玲：《花落的声音》
|
||||
- 余光中：《听听那冷雨》
|
||||
- 张抗抗：《牡丹的拒绝》
|
||||
- 丰子恺：《杨柳》
|
||||
- 周作人：《乌篷船》
|
||||
- 郑振铎：《石湖》
|
||||
- 梁实秋：《雅舍》
|
||||
|
||||
[返回](#21)
|
||||
</div>
|
||||
|
||||
## 《春》（两栏四六分）
|
||||
|
||||
<!-- _class: cols-2-46 -->
|
||||
|
||||
<div class=ldiv>
|
||||
|
||||
|
||||
盼望着，盼望着，东风来了，春天的脚步近了。
|
||||
|
||||
一切都像刚睡醒的样子，欣欣然张开了眼。山朗润起来了，水涨起来了，太阳的脸红起来了。
|
||||
|
||||
小草偷偷地从土里钻出来，嫩嫩的，绿绿的。园子里，田野里，瞧去，一大片一大片满是的。坐着，躺着，打两个滚，踢几脚球，赛几趟跑，捉几回迷藏。风轻悄悄的，草软绵绵的。
|
||||
|
||||
—— 朱自清《春》
|
||||
|
||||
[返回](#21)
|
||||
</div>
|
||||
|
||||
<div class=rimg>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
## 经典散文诗篇（两栏三七分）
|
||||
|
||||
<!-- _class: cols-2-37 -->
|
||||
|
||||
<div class=ldiv>
|
||||
|
||||
|
||||
经典的散文诗篇有：
|
||||
|
||||
- 朱自清：《荷塘月色》
|
||||
- 林清玄：《月到天心》
|
||||
- 郁达夫：《古都的秋》
|
||||
- 张爱玲：《花落的声音》
|
||||
- 余光中：《听听那冷雨》
|
||||
- 张抗抗：《牡丹的拒绝》
|
||||
- 丰子恺：《杨柳》
|
||||
- 周作人：《乌篷船》
|
||||
- 郑振铎：《石湖》
|
||||
- 梁实秋：《雅舍》
|
||||
|
||||
[返回](#21)
|
||||
</div>
|
||||
|
||||
<div class=rimg>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
## 夏与秋（三栏三平分）
|
||||
|
||||
<!-- _class: cols-3 -->
|
||||
|
||||
<div class=ldiv>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class=mdiv>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class=rdiv>
|
||||
|
||||
|
||||
|
||||
[返回](#21)
|
||||
</div>
|
||||
|
||||
|
||||
## 高山与沙漠（两行分栏）
|
||||
|
||||
<!-- _class: rows-2 -->
|
||||
|
||||
<div class="timg">
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="bimg">
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
## 《宇宙的奥秘》（品字型分栏）
|
||||
|
||||
<!-- _class: pin-3 -->
|
||||
|
||||
<div class="tdiv">
|
||||
|
||||
> 四百年前，两位截然不同的科学家突破了当时已知世界的边界。1609 年在威尼斯，伽利略・伽利雷透过望远镜观察星辰，并制作仪器和进行实验。在布拉格，科班出身的神学家约翰内斯・开普勒发现了行星运动定律，奠定了近代天体物理学的基础，并思考着宇宙的宏伟构造。托马斯・德・帕多瓦以至今较少受到关注却扣人心弦的通信往来为基础，讲述了这两位类型如此迥异的学者之间不对等的关系，以及他们如何在同样的时刻却以各自的方式探索星辰的奥秘。在彼此的鉴照下，他们的远见与固执、睿智与无知得以呈现。这是一部介绍新科学的崛起以及近代来临之际的巨大变革的作品。 ——《宇宙的奥妙》
|
||||
</div>
|
||||
|
||||
<div class="limg">
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="rimg">
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
## 4.2 页面分栏与列表分列：列表分列
|
||||
|
||||
Awesome Marp v1.3 提供了 6 种列表分列的方式，分别为：
|
||||
|
||||
- `cols2_ol_sq`：呈现效果为[有序列表 + 方形序号](#32)
|
||||
- `cols2_ol_ci`：呈现效果为[有序列表 + 圆形序号](#33)
|
||||
- `cols2_ul_sq`：呈现效果为[无序列表 + 方形序号](#34)
|
||||
- `cols2_ul_ci`：呈现效果为[无序列表 + 圆形序号](#35)
|
||||
- `col1_ul_sq`：呈现效果为[有序列表 + 方形序号](#36)
|
||||
- `col1_ul_ci`：呈现效应为[有序列表 + 圆形序号](#37)
|
||||
|
||||
|
||||
## 《微观经济学：现代观点》
|
||||
|
||||
<!-- _class: cols2_ol_sq fglass -->
|
||||
|
||||
渲染效果为**有序列表+方形序号**
|
||||
自定义样式为：`<!-- _class: cols2_ol_sq fglass -->`
|
||||
|
||||
- 偏好和效用
|
||||
- 预算约束和消费者的最优选择
|
||||
- 需求函数
|
||||
- 劳动力和储蓄的供给函数
|
||||
- 福利经济学：单人模型和多人模型
|
||||
- 企业理论：单投入品和多投入品模型
|
||||
- 完全竞争市场
|
||||
- 完全垄断、垄断竞争与双寡头垄断
|
||||
- 博弈论
|
||||
- 交换经济与生产经济
|
||||
- 外部性与公共品
|
||||
- 不确定性、期望效用和不对称信息
|
||||
|
||||
[返回](#28)
|
||||
|
||||
|
||||
## 《微观经济学：现代观点》
|
||||
|
||||
<!-- _class: cols2_ol_ci fglass -->
|
||||
|
||||
渲染效果为**有序列表+圆形序号**
|
||||
自定义样式为：`<!-- _class: cols2_ol_ci fglass -->`
|
||||
|
||||
- 偏好和效用
|
||||
- 预算约束和消费者的最优选择
|
||||
- 需求函数
|
||||
- 劳动力和储蓄的供给函数
|
||||
- 福利经济学：单人模型和多人模型
|
||||
- 企业理论：单投入品和多投入品模型
|
||||
- 完全竞争市场
|
||||
- 完全垄断、垄断竞争与双寡头垄断
|
||||
- 博弈论
|
||||
- 交换经济与生产经济
|
||||
- 外部性与公共品
|
||||
- 不确定性、期望效用和不对称信息
|
||||
|
||||
[返回](#28)
|
||||
|
||||
## 《置身事内》
|
||||
|
||||
<!-- _class: cols2_ul_sq fglass -->
|
||||
|
||||
渲染效果为**无序列表+方形序号**
|
||||
自定义样式为：`<!-- _class: cols2_ul_sq fglass -->`
|
||||
|
||||
- 第一章：地方政府的权力与事务
|
||||
- 第二章：财税与政府行为
|
||||
- 第三章：政府投融资与债务
|
||||
- 第四章：工业化中的政府角色
|
||||
- 第五章：城市化与不平衡
|
||||
- 第六章：债务与风险
|
||||
- 第七章：国内国际失衡
|
||||
- 第八章：政府与经济发展
|
||||
|
||||
[返回](#28)
|
||||
|
||||
## 《置身事内》
|
||||
|
||||
<!-- _class: cols2_ul_ci fglass -->
|
||||
|
||||
渲染效果为**无序列表+圆形序号**
|
||||
自定义样式为：`<!-- _class: cols2_ul_ci fglass -->`
|
||||
|
||||
- 第一章：地方政府的权力与事务
|
||||
- 第二章：财税与政府行为
|
||||
- 第三章：政府投融资与债务
|
||||
- 第四章：工业化中的政府角色
|
||||
- 第五章：城市化与不平衡
|
||||
- 第六章：债务与风险
|
||||
- 第七章：国内国际失衡
|
||||
- 第八章：政府与经济发展
|
||||
|
||||
[返回](#28)
|
||||
|
||||
## 《微观经济学：现代观点》
|
||||
|
||||
<!-- _class: col1_ol_sq fglass -->
|
||||
|
||||
渲染效果为**单列+有序列表+方形序号**
|
||||
自定义样式为：`<!-- _class: col1_ul_sq fglass -->`
|
||||
|
||||
- 预算约束和消费者的最优选择
|
||||
- 劳动力和储蓄的供给函数
|
||||
- 福利经济学：单人模型和多人模型
|
||||
- 企业理论：单投入品和多投入品模型
|
||||
- 完全竞争市场
|
||||
- 完全垄断、垄断竞争与双寡头垄断
|
||||
- 交换经济与生产经济
|
||||
- 不确定性、期望效用和不对称信息
|
||||
|
||||
## 《微观经济学：现代观点》
|
||||
|
||||
<!-- _class: col1_ol_ci fglass -->
|
||||
|
||||
渲染效果为**单列+有序列表+圆形序号**
|
||||
自定义样式为：`<!-- _class: col1_ul_ci fglass -->`
|
||||
|
||||
- 预算约束和消费者的最优选择
|
||||
- 劳动力和储蓄的供给函数
|
||||
- 福利经济学：单人模型和多人模型
|
||||
- 企业理论：单投入品和多投入品模型
|
||||
- 完全竞争市场
|
||||
- 完全垄断、垄断竞争与双寡头垄断
|
||||
- 交换经济与生产经济
|
||||
- 不确定性、期望效用和不对称信息
|
||||
|
||||
## 5. 引用、链接和 Callouts
|
||||
|
||||
<!-- _class: trans -->
|
||||
<!-- _footer: "" -->
|
||||
<!-- _paginate: "" -->
|
||||
|
||||
## 5. 引用、链接和 Callouts
|
||||
|
||||
- 引用的呈现效果为：
|
||||
|
||||
> 合成控制法 (Synthetic Control Method) 最早由 Abadie and Gardeazabal (2003) 提出，用来研究西班牙巴斯克地区恐怖活动的经济成本，属于案例研究范畴 (Case Study)。
|
||||
|
||||
- 链接的呈现效果：
|
||||
- [经管数据清洗与 Stata 实战：三大地级市数据库和 CSMAR 上市公司数据](https://mp.weixin.qq.com/s/D0cYVPJJsNiu61GcYwV6cg)
|
||||
- [Stata 基础：从论文文件夹体系的建立说起](https://mp.weixin.qq.com/s?__biz=MzkwOTE3NDExOQ==&mid=2247486489&idx=1&sn=2eb51e85a01541c7a552a9434e087512&scene=21#wechat_redirect)
|
||||
- Callouts 是 Awesome Marp 提供的自定义的样式，有 5 种颜色可选：
|
||||
- [紫色](#40)：`bq-purple`
|
||||
- [蓝色](#41)：`bq-blue`
|
||||
- [绿色](#42)：`bq-green`
|
||||
- [红色](#43)：`bq-red`
|
||||
- [黑色](#44)：`bq-black`
|
||||
|
||||
## 5. 引用、链接和引用盒子
|
||||
|
||||
<!-- _class: bq-purple -->
|
||||
|
||||
- 自定义样式为：`<!-- _class: bq-purple -->`
|
||||
|
||||
> 合成控制法 (Synthetic Control Method)
|
||||
>
|
||||
> SCM 最早由 Abadie and Gardeazabal (2003) 提出，用来研究西班牙巴斯克地区恐怖活动的经济成本，属于案例研究范畴 (Case Study)。Athey & Imbens (2017) 认为它是过去 15 年计量方法领域最重要的创新。<br>
|
||||
> 合成控制法的基本思想是：虽然无法找到巴斯克地区的最佳控制地区，但可对西班牙的若干大城市进行适当的线性组合（赋予不同的权重），以构造一个更为贴切的「合成控制地区」 (Synthetic Control Region)，然后将真实的巴斯克地区与「合成的巴斯克地区」进行对比，即可得到恐袭的影响。
|
||||
|
||||
[返回](#39)
|
||||
|
||||
## 5. 引用、链接和引用盒子
|
||||
|
||||
<!-- _class: bq-blue -->
|
||||
|
||||
- 自定义样式为：`<!-- _class: bq-blue -->`
|
||||
|
||||
> 合成控制法 (Synthetic Control Method)
|
||||
>
|
||||
> SCM 最早由 Abadie and Gardeazabal (2003) 提出，用来研究西班牙巴斯克地区恐怖活动的经济成本，属于案例研究范畴 (Case Study)。Athey & Imbens (2017) 认为它是过去 15 年计量方法领域最重要的创新。<br>
|
||||
> 合成控制法的基本思想是：虽然无法找到巴斯克地区的最佳控制地区，但可对西班牙的若干大城市进行适当的线性组合（赋予不同的权重），以构造一个更为贴切的「合成控制地区」 (Synthetic Control Region)，然后将真实的巴斯克地区与「合成的巴斯克地区」进行对比，即可得到恐袭的影响。
|
||||
|
||||
[返回](#39)
|
||||
|
||||
## 5. 引用、链接和引用盒子
|
||||
|
||||
<!-- _class: bq-green -->
|
||||
|
||||
- 自定义样式为：`<!-- _class: bq-green -->`
|
||||
|
||||
> 合成控制法 (Synthetic Control Method)
|
||||
>
|
||||
> SCM 最早由 Abadie and Gardeazabal (2003) 提出，用来研究西班牙巴斯克地区恐怖活动的经济成本，属于案例研究范畴 (Case Study)。Athey & Imbens (2017) 认为它是过去 15 年计量方法领域最重要的创新。<br>
|
||||
> 合成控制法的基本思想是：虽然无法找到巴斯克地区的最佳控制地区，但可对西班牙的若干大城市进行适当的线性组合（赋予不同的权重），以构造一个更为贴切的「合成控制地区」 (Synthetic Control Region)，然后将真实的巴斯克地区与「合成的巴斯克地区」进行对比，即可得到恐袭的影响。
|
||||
|
||||
[返回](#39)
|
||||
|
||||
## 5. 引用、链接和引用盒子
|
||||
|
||||
<!-- _class: bq-red -->
|
||||
|
||||
- 自定义样式为：`<!-- _class: bq-red -->`
|
||||
|
||||
> 合成控制法 (Synthetic Control Method)
|
||||
>
|
||||
> SCM 最早由 Abadie and Gardeazabal (2003) 提出，用来研究西班牙巴斯克地区恐怖活动的经济成本，属于案例研究范畴 (Case Study)。Athey & Imbens (2017) 认为它是过去 15 年计量方法领域最重要的创新。<br>
|
||||
> 合成控制法的基本思想是：虽然无法找到巴斯克地区的最佳控制地区，但可对西班牙的若干大城市进行适当的线性组合（赋予不同的权重），以构造一个更为贴切的「合成控制地区」 (Synthetic Control Region)，然后将真实的巴斯克地区与「合成的巴斯克地区」进行对比，即可得到恐袭的影响。
|
||||
|
||||
[返回](#39)
|
||||
|
||||
## 5. 引用、链接和引用盒子
|
||||
|
||||
<!-- _class: bq-black -->
|
||||
|
||||
- 自定义样式为：`<!-- _class: bq-black -->`
|
||||
|
||||
> 合成控制法 (Synthetic Control Method)
|
||||
>
|
||||
> SCM 最早由 Abadie and Gardeazabal (2003) 提出，用来研究西班牙巴斯克地区恐怖活动的经济成本，属于案例研究范畴 (Case Study)。Athey & Imbens (2017) 认为它是过去 15 年计量方法领域最重要的创新。<br>
|
||||
> 合成控制法的基本思想是：虽然无法找到巴斯克地区的最佳控制地区，但可对西班牙的若干大城市进行适当的线性组合（赋予不同的权重），以构造一个更为贴切的「合成控制地区」 (Synthetic Control Region)，然后将真实的巴斯克地区与「合成的巴斯克地区」进行对比，即可得到恐袭的影响。
|
||||
|
||||
[返回](#39)
|
||||
|
||||
|
||||
## 6. 导航栏
|
||||
|
||||
<!-- _class: trans -->
|
||||
<!-- _footer: "" -->
|
||||
<!-- _paginate: "" -->
|
||||
|
||||
## 6. 导航栏
|
||||
|
||||
<!-- _class: navbar -->
|
||||
<!-- _header: \ ***@Awesome Marp*** *关于模板* *封面页* *目录页* *分栏与分列* *引用盒子* **导航栏** *基础知识*-->
|
||||
|
||||
- 一句题外话：打造 Awesome Marp 模板的最早初衷就是来自几位公众号粉丝朋友的询问，「Marp 是否也能实现想 Beamer 那样的顶部导航栏？」为了实现导航栏的效果，我又多学了一些 CSS 的知识，这套模板才得以成型
|
||||
|
||||
- 自定义样式为 `navbar`：`<!-- _class: navbar -->`
|
||||
- 导航栏修改自 header，最前面必须加入 `\ `
|
||||
- 当前活动标题，使用粗体 `**粗体**`
|
||||
- 其余非活动标题，使用斜体 `*斜体*`
|
||||
- 如果左侧有文字，需要使用斜粗体 `***粗斜体***`
|
||||
- 默认根据内容自动分配间距，如果希望右对齐，可以手动增加空格的方式来推动右对齐
|
||||
|
||||
|
||||
## 6. 导航栏
|
||||
|
||||
<!-- _header: \ ***@Awesome Marp*** *关于模板* *封面页* *目录页* *分栏与分列* *引用盒子* **导航栏** *基础知识*-->
|
||||
<!-- _class: navbar -->
|
||||
|
||||
这张页面的部分 Markdown 源码：
|
||||
|
||||
```markdown
|
||||
<!-- _class: navbar -->
|
||||
<!-- _header: \ ***虹鹄山庄***
|
||||
|
||||
- 自定义样式为 `navbar`：`<!-- _class: navbar -->`
|
||||
- 导航栏修改自 header，最前面必须加入 `\ `
|
||||
- 当前活动标题：使用粗体 `**粗体**`
|
||||
- 其余非活动标题：使用斜体 `*斜体*`
|
||||
- 如果左侧有文字：使用斜粗体 `***粗斜体***`
|
||||
- 默认根据内容自动分配间距，如果希望右对齐，可以手动增加空格的方式来推动右对齐
|
||||
```
|
||||
|
||||
## 7. 其他自定义样式
|
||||
|
||||
<!-- _class: trans -->
|
||||
<!-- _footer: "" -->
|
||||
<!-- _paginate: "" -->
|
||||
|
||||
|
||||
|
||||
## 7.1 固定标题行：更像 Beamer 了（`fixedtitleA`）
|
||||
|
||||
<!-- _class: fixedtitleA -->
|
||||
|
||||
- 自定义样式：`<!-- _class: fixedtitleA -->`
|
||||
|
||||
- 使当前页面的标题栏固定在顶部，而非随着内容的多少浮动
|
||||
|
||||
- 同时，页面内容也会从顶部起笔，而非垂直方向上居中显示
|
||||
|
||||
|
||||
## 7.1 固定标题行：更像 Beamer 了（`fixedtitleB`）
|
||||
|
||||
<!-- _class: fixedtitleB -->
|
||||
|
||||
|
||||
<div class="div">
|
||||
|
||||
- 自定义样式：`<!-- _class: fixedtitleB -->`
|
||||
|
||||
- `fixedtitleB` 相比于 `fixedtitleA`，标题增加了底色色块，同时缩小了标题大小
|
||||
|
||||
- 其余效果与 `fixedtitleA` 相同
|
||||
|
||||
- 但是页面正文内容需要包裹在 `<div class="div'></div>` 标签中
|
||||
</div>
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: footnote -->
|
||||
|
||||
<div class="tdiv">
|
||||
|
||||
#### 7.2 脚注的自定义样式：`footnote`
|
||||
|
||||
使用方法：
|
||||
|
||||
- 自定义样式：`<!-- _class: footnote -->`
|
||||
- 页面除脚注外的其他内容，写在 `<div class = "tdiv"></div>`
|
||||
- 页面的脚注内容，写在 `<div class = "bdiv"></div>`
|
||||
|
||||
举个例子，展示一下显示效果：
|
||||
|
||||
- 一方面，经济金融化程度的加深，使得金融部门能够凭借资本跨期配置提前抽取其他部门的未来价值，从而扩大金融和非金融部门之间的外部收入差距$^1$。另一方面，经济金融化不断增加企业股东权力，促使企业更加追求股东价值最大化，这一导向将弱化普通劳动者阶层的议价能力，食利者阶层的财产性收入增加必然会挤压劳动收入份额，从而扩大了内部收入差距$^2$。
|
||||
|
||||
</div>
|
||||
|
||||
<div class="bdiv">
|
||||
|
||||
1 张甜迪. 金融化对中国金融、非金融行业收入差距的影响[J]. 经济问题, 2015(11): 40-46.
|
||||
2 Hein E. Finance-dominated capitalism and re-distribution of income: a Kaleckian perspective[J]. Cambridge Journal of Economics, 2015, 39(3): 907-934.
|
||||
</div>
|
||||
|
||||
## 7.3 调节文字大小的自定义样式
|
||||
|
||||
<!-- _class: largetext -->
|
||||
|
||||
对于字体大小的调节，直接修改 CSS 文件应该很方便的。但有小伙伴提出，“希望可以增加字体调节的自定义样式”，于是目前提供了四种微调样式：
|
||||
|
||||
- 自定义样式 1：`<!-- _class: tinytext -->` （是默认字体大小的 0.8 倍）
|
||||
- 自定义样式 2：`<!-- _class: smalltext -->` （是默认字体大小的 0.9 倍）
|
||||
- 自定义样式 3：`<!-- _class: largetext -->` （是默认字体大小的 1.15 倍）
|
||||
- 自定义样式 4：`<!-- _class: hugetext -->` （是默认字体大小的 1.3 倍）
|
||||
|
||||
比如，本页面采用的自定义样式为 `largetext`
|
||||
|
||||
## 7.4 图表标题的自定义样式：`caption`
|
||||
|
||||
<!-- _class: caption -->
|
||||
|
||||
- 通过 `<div class="caption">宇宙的奥妙</div>` 来定义图表的标题
|
||||
|
||||
|
||||
|
||||
<div class="caption">
|
||||
宇宙的奥妙
|
||||
</div>
|
||||
|
||||
|
||||
## 需要知道的基础知识……
|
||||
|
||||
<!-- _class: trans -->
|
||||
<!-- _footer: "" -->
|
||||
<!-- _paginate: "" -->
|
||||
|
||||
|
||||
## Markdown 概览
|
||||
|
||||
<!-- _header: \ ***@Awesome Marp*** *关于模板* *封面页* *目录页* *分栏与分列* *引用盒子* *导航栏* **基础知识**-->
|
||||
<!-- _class: navbar -->
|
||||
|
||||
- Markdown 是一种**极轻量**的文本标记语言，允许人们使用**易读易写**的纯文本格式编写文档，而且对于表格、代码、图片、公式等支持良好
|
||||
- 应用广泛：网站、课程笔记/讲义、演示文稿、撰写学术论文等
|
||||
- Markdown 基础语法：
|
||||
- 参阅：[Markdown 中文文档](https://markdown-zh.readthedocs.io/en/latest/)、[Markdown 指南](https://www.markdown.xyz/)、[Markdown 菜鸟教程](https://www.runoob.com/markdown/md-tutorial.html)
|
||||
- 标题 `#`、粗体 `** **`、斜体 `* *`、删除线 `~~ ~~`、分割线 `---`、超链接 `[]()`
|
||||
- 引用 `>`、列表 `-` / `1. `、代码块
|
||||
- 脚注 `[^1]` / `[^1]:`、待办事项 `[ ]` / `[x]`
|
||||
- Markdown 进阶语法：
|
||||
- 图片 `![]()`：本地路径、网络路径（参阅：[图床与 PicGo——让你爱上记录与分享](https://sspai.com/post/65716)）
|
||||
- 数学公式：行内公式 `$...$`、行间公式 `$$...$$`
|
||||
- 支持 HTML 元素：`<br>`/`<hr>`/`<b></b>`/`<i></i>`/`<kbd></kbd>` 等
|
||||
|
||||
## 推荐的 Markdown 编辑器
|
||||
|
||||
<!-- _class: cols-2-64 navbar -->
|
||||
<!-- _header: \ ***@Awesome Marp*** *关于模板* *封面页* *目录页* *分栏与分列* *引用盒子* *导航栏* **基础知识**-->
|
||||
|
||||
<div class=ldiv>
|
||||
|
||||
**VS Code**
|
||||
- Visual Studio Code[下载地址](https://code.visualstudio.com/Download)
|
||||
- VS Code 插件：
|
||||
- 配合 Markdown：[Markdown Preview Enhanced](https://marketplace.visualstudio.com/items?itemName=shd101wyy.markdown-preview-enhanced)、[Markdown All in One](https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one)
|
||||
- 图床：[PicGo](https://marketplace.visualstudio.com/items?itemName=Spades.vs-picgo)
|
||||
- 格式化文档：[Pangu-Markdown](https://marketplace.visualstudio.com/items?itemName=xlthu.Pangu-Markdown)
|
||||
- Markdown 转 PPT：[Marp for VScode](https://marketplace.visualstudio.com/items?itemName=marp-team.marp-vscode)
|
||||
- Markdown 转思维导图：[Markmap for VScode](https://marketplace.visualstudio.com/items?itemName=gera2ld.markmap-vscode)
|
||||
- 配合 Zotero：[Citation Picker for Zotero](https://marketplace.visualstudio.com/items?itemName=mblode.zotero)、[Pandoc Citer](https://marketplace.visualstudio.com/items?itemName=notZaki.pandocciter)
|
||||
|
||||
</div>
|
||||
|
||||
<div class=rdiv>
|
||||
|
||||
**Obsidian**
|
||||
- [Obsidian 主页](https://obsidian.md/)
|
||||
- 基于 Markdown 的本地知识管理软件
|
||||
- 除官方同步和发布功能外，对个人使用者完全免费
|
||||
- 功能丰富、插件众多、开发社区活跃
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
## Marp 基本用法
|
||||
|
||||
<!-- _header: \ ***@Awesome Marp*** *关于模板* *封面页* *目录页* *分栏与分列* *引用盒子* *导航栏* **基础知识**-->
|
||||
<!-- _class: navbar fixedtitleB -->
|
||||
|
||||
<div class="div">
|
||||
|
||||
- 几个字总结 [Marp](https://marp.app/)：使用 Markdown 创作演示文稿
|
||||
- 来自 Marp 官方网页的一段话：Marp (also known as the Markdown Presentation Ecosystem) provides an intuitive experience for creating beautiful slide decks. You only have to focus on writing your story in a Markdown document.
|
||||
|
||||
- 在 Markdown 文件的顶部 YAML 区域，通过 `marp: true` 启动 Marp，然后即可开启侧边预览，VS Code 界面左边是代码区域，右边为预览区域
|
||||
- 内容遵循 Markdown 语法，但 Marp 增加了一些内置指令，而且指令分为全局指令和[局部指令](https://marpit.marp.app/directives?id=local-directives-1)，全局指令建议放置于 YAML 区，局部指令位于当前页面，不同页面通过 `---` 切分
|
||||
- 推荐阅读：Marpit [官方文档](https://marpit.marp.app)及[中译版](https://caizhiyuan.gitee.io/categories/skills/20200730-marp.html#%E5%8A%9F%E8%83%BD)，五分钟学会 Marp[（上）](https://www.lianxh.cn/news/97fccdca2d7a5.html)、[（下）](https://www.lianxh.cn/news/521900220dd33.html)
|
||||
</div>
|
||||
|
||||
## Marp 基本用法
|
||||
|
||||
<!-- _header: \ ***@Awesome Marp*** *关于模板* *封面页* *目录页* *分栏与分列* *引用盒子* *导航栏* **基础知识**-->
|
||||
<!-- _class: navbar -->
|
||||
|
||||
```yaml
|
||||
---
|
||||
marp: true # 开启 Marp
|
||||
size: 16:9 # 设定页面比例，常见有 16:9 或 4:3，默认为16:9
|
||||
theme: gaia # 切换主题，内置 3 种样式的主题，可以自定义主题
|
||||
paginate: true # 开启页码
|
||||
headingDivider: 2 # 通过二级标题切分页面，省去手动换页的麻烦
|
||||
footer: 初虹 # 设置页脚区域的内容，如果设定页眉的内容，则为 header
|
||||
---
|
||||
```
|
||||
|
||||
- 如果想让页面同时被多个级别的标题切分，比如，以二级~四级标题分割页面，可以 `headingDivider: [2,3,4]`
|
||||
- 想要使得多个自定义样式渲染同一个页面，可直接将不同自定义样式以空格连接，比如：`<!-- _class: cols-2-64 fglass -->`
|
||||
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: lastpage -->
|
||||
<!-- _footer: "" -->
|
||||
|
||||
###### 欢迎交流 ~
|
||||
|
||||
<div class="icons">
|
||||
|
||||
- <i class="fa-solid fa-envelope"></i>
|
||||
- 邮箱：ch2099058972@163.com
|
||||
- <i class="fa-brands fa-weixin"></i>
|
||||
- 微信：favourhong
|
||||
- <i class="fa-solid fa-house"></i>
|
||||
- 公众号：虹鹄山庄
|
||||
|
||||
<div>
|
||||
|
||||
## 创作不易，buy me a coffee 🤙~
|
||||
|
||||
<!-- _class: trans -->
|
||||
<!-- _footer: "" -->
|
||||
<!-- _paginate: "" -->
|
||||
|
||||
<br>
|
||||
|
||||
|
||||
Executable
BIN
Binary file not shown.
Executable
+1032
File diff suppressed because one or more lines are too long
Executable
+942
@@ -0,0 +1,942 @@
|
||||
---
|
||||
marp: true
|
||||
size: 16:9
|
||||
theme: am_brown
|
||||
paginate: true
|
||||
headingDivider:
|
||||
- 2
|
||||
- 3
|
||||
footer: \ *初虹（虹鹄山庄）* *Awesome Marp：轻松取代 LaTeX Beamer！* *2024年1月13日（v1.3）*
|
||||
created: 2025-09-09T18:22
|
||||
updated: 2025-09-22T13:27
|
||||
---
|
||||
|
||||
|
||||
<!-- _class: cover_a
|
||||
<!-- _header: "" -->
|
||||
<!-- _footer: "" -->
|
||||
<!-- _paginate: "" -->
|
||||
|
||||
# Awesome Marp：轻松取代 LaTeX Beamer！
|
||||
|
||||
###### “用法简单、功能全面的个性化 PPT 模板”
|
||||
|
||||
@初虹
|
||||
公众号：虹鹄山庄
|
||||
发布时间：2024 年 1 月 13 日（v1.3）
|
||||
<ch2099058972@163.com>
|
||||
Awesome-Marp 地址：[GitHub 库](https://github.com/favourhong/Awesome-Marp)/[Gitee 库](https://gitee.com/favourhong/Awesome-Marp)
|
||||
|
||||
## Awesome Marp 有什么？
|
||||
|
||||
<!-- _class: cols2_ol_ci fglass toc_a -->
|
||||
<!-- _footer: "" -->
|
||||
<!-- _header: "CONTENTS" -->
|
||||
<!-- _paginate: "" -->
|
||||
|
||||
- [关于模板](#3)
|
||||
- [封面页](#10)
|
||||
- [目录页](#16)
|
||||
- [页面分栏与列表分列](#20)
|
||||
- [引用、链接和引用盒子](#38)
|
||||
- [导航栏](#45)
|
||||
- [其他自定义样式](#48)
|
||||
- [需要知道的基础知识](#56)
|
||||
- [最后一页](#59)
|
||||
|
||||
## 1. 关于模板
|
||||
|
||||
<!-- _class: trans -->
|
||||
<!-- _footer: "" -->
|
||||
<!-- _paginate: "" -->
|
||||
|
||||
## 1. 关于模板
|
||||
|
||||
- **开始之前：** 你需要知道这样几个工具，Markdown、Markdown 编辑器（VS Code 或 Obsidian）和 Marp。关于这三者是个啥，我不做详细地介绍，但在[第 55 页](#55)-[第 58 页](#58)会有一些凝练性的内容给你参考，同时我提供了不少的链接，也供你参阅。
|
||||
- **为什么要开发 Awesome Marp？**
|
||||
- Marp 原生仅提供 3 种主题（`default` / `gaia` / `uncover`），呈现效果一般。于是我根据自己的使用情况，边用边改造，陆续打磨了这样的一整套模板。
|
||||
- **目前发布的 v1.3 有 38 个自定义样式、6 种颜色的主题**（后面有呈现效果）
|
||||
- **Awesome Marp 的几个特色：**
|
||||
- 支持分栏呈现、支持 Callouts（类似于 Beamer 中的定理框）、提供多种类型的封面页和目录页、可以实现导航进度栏、图片支持自定义居中/居左/居右对齐等
|
||||
|
||||
- 本着「开箱即用」的原则，我将本项目文件夹打包上传到了[GitHub](https://github.com/favourhong/Awesome-Marp) 和 [Gitee](https://gitee.com/favourhong/Awesome-Marp)
|
||||
- 用到的工具：软件 [Visual Studio Code](https://code.visualstudio.com) 或 [Obsidian](https://obsidian.md/)、[Marp for VScode（插件）](https://marketplace.visualstudio.com/items?itemName=marp-team.marp-vscode)
|
||||
|
||||
## 1. 关于模板
|
||||
|
||||
|
||||
- Awesome Marp 支持 38 个自定义样式，使用时需在页面指定（如 `<!-- _class: trans -->`）：
|
||||
|
||||
| 封面页 | 目录页 | 列表 | 引用盒子 | 其他 1 | 其他 2 |
|
||||
| --------- | ------- | ----------- | ----------- | ----------------------------- | --------------------------------------------------------------- |
|
||||
| `cover_a` | `toc_a` | `cols-2` | `bq-black` | 过渡页面 `trans` | 图表等的标题 `caption` |
|
||||
| `cover_b` | `toc_b` | `cols-2-64` | `bq-purple` | 最后一页 `lastpage` | 非嵌套无序列表的毛玻璃效果 `fglass` |
|
||||
| `cover_c` | | `cols-2-73` | `bq-red` | 导航栏 `navbar` | 脚注：`footnote` |
|
||||
| `cover_d` | | `cols-3` | `bq-blue` | 标题固定+无底色 `fixedtitleA` | 调节字体大小：`tinytext`/`smalltext`/<br>`largetext`/`hugetext` |
|
||||
| `cover_e` | | `cols-2-46` | `bq-green` | 标题固定+有底色 `fixedtitleB` | |
|
||||
| | | `cols-2-37` | | 两列有序列表 `cols2_ol_sq/ci` | |
|
||||
| | | `rows-2` | | 两列无序列表 `cols_ul_sq/ci` | |
|
||||
| | | `pin-3` | | 单列有序列表 `col1_ul_sq/ci` | |
|
||||
|
||||
|
||||
## 1. 关于模板
|
||||
|
||||
|
||||
- Awesome Marp 的主题色（6 种），可在 YAML 区切换 Theme，如 `theme: am_dark`：
|
||||
|
||||
| 深色 | 绿色 | 红色 | 蓝色 | 棕色 | 紫色
|
||||
|---------|----------|--------|---------|----------|----|
|
||||
| `am_dark` | `am_green` | `am_red` | `am_blue` | `am_brown` |`am_purple`|
|
||||
|
||||
|
||||
## 1. 关于模板
|
||||
|
||||
- 如何使用：
|
||||
- **搭配 VS Code**：直接使用 VS Code 打开 `Awesome-Marp` 文件夹
|
||||
- 如果你想「拿来即用」，直接根据我分享的 Markdown 源码文件，对照修改就好了~
|
||||
- 如果你对部分效果不满意、期望简单微调的话，目前在 `Awesome-Marp/themes` 下有 6 个 CSS 文件，这些 CSS 文件决定了 Markdown 源码的最终渲染效果，可以试着改一改~
|
||||
- 如果你能够自行定制个性化 CSS 文件，渲染前，别忘在 `Awesome-Marp/.vscode/settings.json` 里加上你的 CSS 文件路径~
|
||||
- **搭配 Obsidian**：安装 [Marp Slides 插件](https://github.com/samuele-cozzi/obsidian-marp-slides)，并配置相应 CSS 路径
|
||||
|
||||
- 字体：因担心版权问题，需自行下载字体并安装，Awesome Marp 用到的字体有：
|
||||
- 正文字体：`Latin Modern Math`、`方正宋刻本秀楷简体`，如果未安装，默认将使用 `Calibri` 和 `楷体`
|
||||
- 标题字体：`Optima LT Medium`、`方正苏新诗柳楷简体`，如果未安装，默认将使用 `Arial` 和 `黑体`
|
||||
- 脚注字体：`Charm` 和 `叶根友毛笔行书修正版`，如果未安装，默认将使用 `Calibri` 和 `楷体`
|
||||
- 代码字体：`Fira Code` 和 `霞鹜文楷等宽`，如果未安装，默认将使用 `Consolas` 和 `华文中宋`
|
||||
|
||||
## 1. 关于模板：更新日志
|
||||
|
||||
- [Awesome Marp v1.0：我开发了一整套 Marp 主题，Markdown 转换的 PPT 也可以很好看！](https://mp.weixin.qq.com/s?__biz=MzkwOTE3NDExOQ==&mid=2247486787&idx=1&sn=2652ddae81f50240844cb652780912e1&chksm=c13ff94bf648705da1ba986b91265e3ff018acaffcfa60d7807a81be22176005e7a2b4483627&scene=178&cur_album_id=3132459596339757070#rd)
|
||||
- [Awesome Marp v1.1：标题行不随正文浮动，这下更像 Beamer 了！](https://mp.weixin.qq.com/s?__biz=MzkwOTE3NDExOQ==&mid=2247486800&idx=1&sn=527348e242576079e4bd6cd1823c823a&chksm=c13ff958f648704e40a202db6ad5fa215ef4c189d66403e161d6ace9828406a8747ac755684f&scene=178&cur_album_id=3132459596339757070#rd)
|
||||
- [Awesome Marp v1.2：增加脚注、调节字体大小等样式～](https://mp.weixin.qq.com/s?__biz=MzkwOTE3NDExOQ==&mid=2247486825&idx=1&sn=56d632ce164831438ec87c1b20ed4c4c&chksm=c13ff961f64870774f069ab816340783d8f54fd6b89363b8d9412c593efc640851ce9edd8833&scene=178&cur_album_id=3132459596339757070#rd)
|
||||
- [Awesome Marp v1.3：几处小更新～](https://mp.weixin.qq.com/s?__biz=MzkwOTE3NDExOQ==&mid=2247486869&idx=1&sn=fcc377ff6a5930436e5078a09d53f0ab&chksm=c13ff99df648708b89bafba030b27909d0022279e26da723ca54a1666fe55f50a4230f050662&scene=178&cur_album_id=3132459596339757070#rd)
|
||||
|
||||
|
||||
## 下面让我们看看效果吧 ~
|
||||
|
||||
<!-- _class: trans -->
|
||||
<!-- _footer: "" -->
|
||||
<!-- _paginate: "" -->
|
||||
|
||||
## 2. 封面页
|
||||
|
||||
<!-- _class: trans -->
|
||||
<!-- _footer: "" -->
|
||||
<!-- _paginate: "" -->
|
||||
|
||||
## 2. 封面页
|
||||
|
||||
- 大标题：采用一级标题 `# ` （如：`# Awesome Marp：自定义 Marp 主题`）
|
||||
- 副标题：采用六级标题 `###### ` （如：`###### 打造简便又不失个性的演示文稿`）
|
||||
- 本套模板提供 5 种封面页样式，使用时需要在页面中设定局部指令，如：`<!-- _class: cover_a -->`
|
||||
- `cover_a`：[第 1 种](#1)
|
||||
- `cover_b`：[第 2 种](#12)
|
||||
- `cover_c`：预留 header 可设定学校 logo，footer 可设定校训 [第 3 种](#13)
|
||||
- `cover_d`：只预留了 footer 设定校训 [第 4 种](#14)
|
||||
- `cover_e`：预留 header 设定学校 logo，footer 设定学校 logo 和学校名称[第 5 种](#15)
|
||||
|
||||
- 如果已经设定了全局 footer、header 或页码，但又不期望在封面页中出现，可以 `<!-- _footer: "" -->` / `<!-- _header: "" -->` / `<!-- _paginate: "" -->` 分别将其局部隐藏起来
|
||||
- 当标题文字超过页面宽度会溢出换行，这里可以使用 `<!-- fit -->` 根据页面宽度自动调整文字大小
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: cover_b -->
|
||||
<!-- _header: "" -->
|
||||
<!-- _footer: "" -->
|
||||
<!-- _paginate: "" -->
|
||||
|
||||
# Awesome Marp：轻松取代 LaTeX Beamer！
|
||||
|
||||
###### “用法简单、功能全面的个性化 PPT 模板”
|
||||
|
||||
@初虹
|
||||
公众号：虹鹄山庄
|
||||
发布时间：2024 年 1 月 13 日（v1.3）
|
||||
<ch2099058972@163.com>
|
||||
Awesome-Marp 地址：[GitHub 库](https://github.com/favourhong/Awesome-Marp)/[Gitee 库](https://gitee.com/favourhong/Awesome-Marp)
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: cover_c -->
|
||||
<!-- _paginate: "" -->
|
||||
<!-- _footer: 厚德博学 经济匡时 -->
|
||||
<!-- _header:  -->
|
||||
|
||||
|
||||
# <!-- fit -->Awesome Marp：轻松取代 LaTeX Beamer！
|
||||
|
||||
###### “用法简单、功能全面的个性化 PPT 模板”
|
||||
|
||||
@初虹
|
||||
公众号：虹鹄山庄
|
||||
发布时间：2024 年 1 月 13 日（v1.3）
|
||||
<ch2099058972@163.com>
|
||||
Awesome-Marp 地址：[GitHub 库](https://github.com/favourhong/Awesome-Marp)/[Gitee 库](https://gitee.com/favourhong/Awesome-Marp)
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: cover_d -->
|
||||
<!-- _paginate: "" -->
|
||||
<!-- _footer: "厚德博学 经济匡时" -->
|
||||
|
||||
# <!-- fit -->Awesome Marp：轻松取代 LaTeX Beamer！
|
||||
|
||||
###### “用法简单、功能全面的个性化 PPT 模板”
|
||||
|
||||
@初虹
|
||||
公众号：虹鹄山庄
|
||||
发布时间：2024 年 1 月 13 日（v1.3）
|
||||
<ch2099058972@163.com>
|
||||
Awesome-Marp 地址：[GitHub 库](https://github.com/favourhong/Awesome-Marp)/[Gitee 库](https://gitee.com/favourhong/Awesome-Marp)
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: cover_e -->
|
||||
<!-- _paginate: "" -->
|
||||
<!-- _footer:  -->
|
||||
<!-- _header:  -->
|
||||
|
||||
|
||||
# <!-- fit -->Awesome Marp：轻松取代 LaTeX Beamer！
|
||||
|
||||
###### “用法简单、功能全面的个性化 PPT 模板”
|
||||
|
||||
@初虹
|
||||
公众号：虹鹄山庄
|
||||
发布时间：2024 年 1 月 13 日（v1.3）
|
||||
<ch2099058972@163.com>
|
||||
Awesome-Marp 地址：[GitHub 库](https://github.com/favourhong/Awesome-Marp)/[Gitee 库](https://gitee.com/favourhong/Awesome-Marp)
|
||||
|
||||
## 3. 目录页
|
||||
|
||||
<!-- _class: trans -->
|
||||
<!-- _footer: "" -->
|
||||
<!-- _paginate: "" -->
|
||||
|
||||
## 3. 目录页
|
||||
|
||||
- Awesome Marp 提供了至少 2 种目录页样式，使用时同样需要设定局部样式
|
||||
- `toc_a`：需要将 header 的内容设定为 `CONTENTS`，即 `<!-- _header: "CONTENTS" -->`
|
||||
- `toc_b`：需要将 header 的内容设定为 `目录<br>CONTENTS<br>你的LOGO地址`，即 `<!-- _header: 目录<br>CONTENTS<br>-->`
|
||||
- 提供的几种分栏列表样式，也可以作为目录页使用，如 `<!-- _class: cols2_ol_ci fglass -->`（效果见[这里](#32)）
|
||||
|
||||
- 类似地，如果已经定义了全局 footer 或页码，可以使用 `<!-- _footer: "" -->` / `<!-- _paginate: "" -->` 分别将其局部隐藏起来
|
||||
- 目录页样式：[第 1 种](#2)、[第 2 种](#18)和[第 3 种](#19)
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: toc_a -->
|
||||
<!-- _header: "CONTENTS" -->
|
||||
<!-- _footer: "" -->
|
||||
<!-- _paginate: "" -->
|
||||
|
||||
- [关于模板](#3)
|
||||
- [封面页](#10)
|
||||
- [目录页](#16)
|
||||
- [页面分栏与列表分列](#20)
|
||||
- [引用、链接和引用盒子](#38)
|
||||
- [导航栏](#45)
|
||||
- [其他自定义样式](#48)
|
||||
- [需要知道的基础知识](#56)
|
||||
- [最后一页](#59)
|
||||
|
||||
---
|
||||
|
||||
<!-- _header: 目录<br>CONTENTS<br>-->
|
||||
<!-- _class: toc_b -->
|
||||
<!-- _footer: "" -->
|
||||
<!-- _paginate: "" -->
|
||||
|
||||
- [关于模板](#3)
|
||||
- [封面页](#10)
|
||||
- [目录页](#16)
|
||||
- [页面分栏与列表分列](#20)
|
||||
- [引用、链接和引用盒子](#38)
|
||||
- [导航栏](#45)
|
||||
- [其他自定义样式](#48)
|
||||
- [需要知道的基础知识](#56)
|
||||
- [最后一页](#59)
|
||||
|
||||
|
||||
## 4. 页面分栏与列表分列
|
||||
|
||||
<!-- _class: trans -->
|
||||
<!-- _footer: "" -->
|
||||
<!-- _paginate: "" -->
|
||||
|
||||
## 4.1 页面分栏与列表分列：页面分栏
|
||||
|
||||
- Awesome Marp 提供了 8 种页面分栏方式，分别为：
|
||||
- `cols-2`：[两列分栏，五五平分](#23)
|
||||
- `cols-2-64`：[两列分栏，六四分](#24)
|
||||
- `cols-2-73`：[两列分栏，七三分](#25)
|
||||
- `cols-2-46`：[两列分栏，四六分](#26)
|
||||
- `cols-2-37`：[两列分栏，三七分](#27)
|
||||
- `cols-3`：[三列分栏，平分](#28)
|
||||
- `rows-2`：[两行分栏](#29)
|
||||
- `pin-3`：[品字型分栏](#30)
|
||||
|
||||
- 如果某一栏为图片，可以将 `class=ldiv` 换成 `class=limg`，这样能够实现图片的垂直居中对齐呢（`class=ldiv` 为居上对齐）
|
||||
|
||||
|
||||
## 4.1 页面分栏与列表分列：页面分栏
|
||||
|
||||
- 以 `<!-- _class: cols-2 -->` 为例，Markdown 的源码为：
|
||||
|
||||
```markdown
|
||||
<!-- _class: cols-2 -->
|
||||
<div class=ldiv>
|
||||
|
||||
第一列（左侧栏）的内容在这里
|
||||
|
||||
内容可以是普通纯文本，可以是列表，也可以是引用块、链接、图片等
|
||||
</div>
|
||||
|
||||
<div class=rdiv>
|
||||
|
||||
第二列（右侧栏）的内容在这里
|
||||
</div>
|
||||
```
|
||||
|
||||
- 如果是分三栏（`<!-- _class: cols-3 -->`），还需要再增加 `<div class="mdiv"></div>` 标签
|
||||
|
||||
|
||||
## 《荷塘月色》（两栏五五分）
|
||||
|
||||
<!-- _class: cols-2 -->
|
||||
|
||||
<div class=ldiv>
|
||||
|
||||
曲曲折折的荷塘上面，弥望的是田田的叶子。叶子出水很高，像亭亭的舞女的裙。
|
||||
|
||||
层层的叶子中间，零星地点缀着些白花，有袅娜地开着的，有羞涩地打着朵儿的；正如一粒粒的明珠，又如碧天里的星星，又如刚出浴的美人。
|
||||
|
||||
微风过处，送来缕缕清香，仿佛远处高楼上渺茫的歌声似的。这时候叶子与花也有一丝的颤动，像闪电般，霎时传过荷塘的那边去了。
|
||||
|
||||
叶子本是肩并肩密密地挨着，这便宛然有了一道凝碧的波痕。叶子底下是脉脉的流水，遮住了，不能见一些颜色；而叶子却更见风致了。
|
||||
|
||||
—— 朱自清《荷塘月色》 [返回](#21)
|
||||
</div>
|
||||
|
||||
<div class=rimg>
|
||||
|
||||
<!--  -->
|
||||
|
||||
</div>
|
||||
|
||||
## 《春》（两栏六四分）
|
||||
|
||||
<!-- _class: cols-2-64 -->
|
||||
|
||||
<div class=limg>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class=rdiv>
|
||||
|
||||
盼望着，盼望着，东风来了，春天的脚步近了。
|
||||
|
||||
一切都像刚睡醒的样子，欣欣然张开了眼。山朗润起来了，水涨起来了，太阳的脸红起来了。
|
||||
|
||||
小草偷偷地从土里钻出来，嫩嫩的，绿绿的。园子里，田野里，瞧去，一大片一大片满是的。坐着，躺着，打两个滚，踢几脚球，赛几趟跑，捉几回迷藏。风轻悄悄的，草软绵绵的。
|
||||
|
||||
—— 朱自清《春》
|
||||
|
||||
[返回](#21)
|
||||
</div>
|
||||
|
||||
## 经典散文诗篇（两栏七三分）
|
||||
|
||||
<!-- _class: cols-2-73 -->
|
||||
|
||||
<div class=limg>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class=rdiv>
|
||||
|
||||
经典的散文诗篇有：
|
||||
|
||||
- 朱自清：《荷塘月色》
|
||||
- 林清玄：《月到天心》
|
||||
- 郁达夫：《古都的秋》
|
||||
- 张爱玲：《花落的声音》
|
||||
- 余光中：《听听那冷雨》
|
||||
- 张抗抗：《牡丹的拒绝》
|
||||
- 丰子恺：《杨柳》
|
||||
- 周作人：《乌篷船》
|
||||
- 郑振铎：《石湖》
|
||||
- 梁实秋：《雅舍》
|
||||
|
||||
[返回](#21)
|
||||
</div>
|
||||
|
||||
## 《春》（两栏四六分）
|
||||
|
||||
<!-- _class: cols-2-46 -->
|
||||
|
||||
<div class=ldiv>
|
||||
|
||||
|
||||
盼望着，盼望着，东风来了，春天的脚步近了。
|
||||
|
||||
一切都像刚睡醒的样子，欣欣然张开了眼。山朗润起来了，水涨起来了，太阳的脸红起来了。
|
||||
|
||||
小草偷偷地从土里钻出来，嫩嫩的，绿绿的。园子里，田野里，瞧去，一大片一大片满是的。坐着，躺着，打两个滚，踢几脚球，赛几趟跑，捉几回迷藏。风轻悄悄的，草软绵绵的。
|
||||
|
||||
—— 朱自清《春》
|
||||
|
||||
[返回](#21)
|
||||
</div>
|
||||
|
||||
<div class=rimg>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
## 经典散文诗篇（两栏三七分）
|
||||
|
||||
<!-- _class: cols-2-37 -->
|
||||
|
||||
<div class=ldiv>
|
||||
|
||||
|
||||
经典的散文诗篇有：
|
||||
|
||||
- 朱自清：《荷塘月色》
|
||||
- 林清玄：《月到天心》
|
||||
- 郁达夫：《古都的秋》
|
||||
- 张爱玲：《花落的声音》
|
||||
- 余光中：《听听那冷雨》
|
||||
- 张抗抗：《牡丹的拒绝》
|
||||
- 丰子恺：《杨柳》
|
||||
- 周作人：《乌篷船》
|
||||
- 郑振铎：《石湖》
|
||||
- 梁实秋：《雅舍》
|
||||
|
||||
[返回](#21)
|
||||
</div>
|
||||
|
||||
<div class=rimg>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
## 夏与秋（三栏三平分）
|
||||
|
||||
<!-- _class: cols-3 -->
|
||||
|
||||
<div class=ldiv>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class=mdiv>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class=rdiv>
|
||||
|
||||
|
||||
|
||||
[返回](#21)
|
||||
</div>
|
||||
|
||||
|
||||
## 高山与沙漠（两行分栏）
|
||||
|
||||
<!-- _class: rows-2 -->
|
||||
|
||||
<div class="timg">
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="bimg">
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
## 《宇宙的奥秘》（品字型分栏）
|
||||
|
||||
<!-- _class: pin-3 -->
|
||||
|
||||
<div class="tdiv">
|
||||
|
||||
> 四百年前，两位截然不同的科学家突破了当时已知世界的边界。1609 年在威尼斯，伽利略・伽利雷透过望远镜观察星辰，并制作仪器和进行实验。在布拉格，科班出身的神学家约翰内斯・开普勒发现了行星运动定律，奠定了近代天体物理学的基础，并思考着宇宙的宏伟构造。托马斯・德・帕多瓦以至今较少受到关注却扣人心弦的通信往来为基础，讲述了这两位类型如此迥异的学者之间不对等的关系，以及他们如何在同样的时刻却以各自的方式探索星辰的奥秘。在彼此的鉴照下，他们的远见与固执、睿智与无知得以呈现。这是一部介绍新科学的崛起以及近代来临之际的巨大变革的作品。 ——《宇宙的奥妙》
|
||||
</div>
|
||||
|
||||
<div class="limg">
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="rimg">
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
## 4.2 页面分栏与列表分列：列表分列
|
||||
|
||||
Awesome Marp v1.3 提供了 6 种列表分列的方式，分别为：
|
||||
|
||||
- `cols2_ol_sq`：呈现效果为[有序列表 + 方形序号](#32)
|
||||
- `cols2_ol_ci`：呈现效果为[有序列表 + 圆形序号](#33)
|
||||
- `cols2_ul_sq`：呈现效果为[无序列表 + 方形序号](#34)
|
||||
- `cols2_ul_ci`：呈现效果为[无序列表 + 圆形序号](#35)
|
||||
- `col1_ul_sq`：呈现效果为[有序列表 + 方形序号](#36)
|
||||
- `col1_ul_ci`：呈现效应为[有序列表 + 圆形序号](#37)
|
||||
|
||||
|
||||
## 《微观经济学：现代观点》
|
||||
|
||||
<!-- _class: cols2_ol_sq fglass -->
|
||||
|
||||
渲染效果为**有序列表+方形序号**
|
||||
自定义样式为：`<!-- _class: cols2_ol_sq fglass -->`
|
||||
|
||||
- 偏好和效用
|
||||
- 预算约束和消费者的最优选择
|
||||
- 需求函数
|
||||
- 劳动力和储蓄的供给函数
|
||||
- 福利经济学：单人模型和多人模型
|
||||
- 企业理论：单投入品和多投入品模型
|
||||
- 完全竞争市场
|
||||
- 完全垄断、垄断竞争与双寡头垄断
|
||||
- 博弈论
|
||||
- 交换经济与生产经济
|
||||
- 外部性与公共品
|
||||
- 不确定性、期望效用和不对称信息
|
||||
|
||||
[返回](#28)
|
||||
|
||||
|
||||
## 《微观经济学：现代观点》
|
||||
|
||||
<!-- _class: cols2_ol_ci fglass -->
|
||||
|
||||
渲染效果为**有序列表+圆形序号**
|
||||
自定义样式为：`<!-- _class: cols2_ol_ci fglass -->`
|
||||
|
||||
- 偏好和效用
|
||||
- 预算约束和消费者的最优选择
|
||||
- 需求函数
|
||||
- 劳动力和储蓄的供给函数
|
||||
- 福利经济学：单人模型和多人模型
|
||||
- 企业理论：单投入品和多投入品模型
|
||||
- 完全竞争市场
|
||||
- 完全垄断、垄断竞争与双寡头垄断
|
||||
- 博弈论
|
||||
- 交换经济与生产经济
|
||||
- 外部性与公共品
|
||||
- 不确定性、期望效用和不对称信息
|
||||
|
||||
[返回](#28)
|
||||
|
||||
## 《置身事内》
|
||||
|
||||
<!-- _class: cols2_ul_sq fglass -->
|
||||
|
||||
渲染效果为**无序列表+方形序号**
|
||||
自定义样式为：`<!-- _class: cols2_ul_sq fglass -->`
|
||||
|
||||
- 第一章：地方政府的权力与事务
|
||||
- 第二章：财税与政府行为
|
||||
- 第三章：政府投融资与债务
|
||||
- 第四章：工业化中的政府角色
|
||||
- 第五章：城市化与不平衡
|
||||
- 第六章：债务与风险
|
||||
- 第七章：国内国际失衡
|
||||
- 第八章：政府与经济发展
|
||||
|
||||
[返回](#28)
|
||||
|
||||
## 《置身事内》
|
||||
|
||||
<!-- _class: cols2_ul_ci fglass -->
|
||||
|
||||
渲染效果为**无序列表+圆形序号**
|
||||
自定义样式为：`<!-- _class: cols2_ul_ci fglass -->`
|
||||
|
||||
- 第一章：地方政府的权力与事务
|
||||
- 第二章：财税与政府行为
|
||||
- 第三章：政府投融资与债务
|
||||
- 第四章：工业化中的政府角色
|
||||
- 第五章：城市化与不平衡
|
||||
- 第六章：债务与风险
|
||||
- 第七章：国内国际失衡
|
||||
- 第八章：政府与经济发展
|
||||
|
||||
[返回](#28)
|
||||
|
||||
## 《微观经济学：现代观点》
|
||||
|
||||
<!-- _class: col1_ol_sq fglass -->
|
||||
|
||||
渲染效果为**单列+有序列表+方形序号**
|
||||
自定义样式为：`<!-- _class: col1_ul_sq fglass -->`
|
||||
|
||||
- 预算约束和消费者的最优选择
|
||||
- 劳动力和储蓄的供给函数
|
||||
- 福利经济学：单人模型和多人模型
|
||||
- 企业理论：单投入品和多投入品模型
|
||||
- 完全竞争市场
|
||||
- 完全垄断、垄断竞争与双寡头垄断
|
||||
- 交换经济与生产经济
|
||||
- 不确定性、期望效用和不对称信息
|
||||
|
||||
## 《微观经济学：现代观点》
|
||||
|
||||
<!-- _class: col1_ol_ci fglass -->
|
||||
|
||||
渲染效果为**单列+有序列表+圆形序号**
|
||||
自定义样式为：`<!-- _class: col1_ul_ci fglass -->`
|
||||
|
||||
- 预算约束和消费者的最优选择
|
||||
- 劳动力和储蓄的供给函数
|
||||
- 福利经济学：单人模型和多人模型
|
||||
- 企业理论：单投入品和多投入品模型
|
||||
- 完全竞争市场
|
||||
- 完全垄断、垄断竞争与双寡头垄断
|
||||
- 交换经济与生产经济
|
||||
- 不确定性、期望效用和不对称信息
|
||||
|
||||
## 5. 引用、链接和 Callouts
|
||||
|
||||
<!-- _class: trans -->
|
||||
<!-- _footer: "" -->
|
||||
<!-- _paginate: "" -->
|
||||
|
||||
## 5. 引用、链接和 Callouts
|
||||
|
||||
- 引用的呈现效果为：
|
||||
|
||||
> 合成控制法 (Synthetic Control Method) 最早由 Abadie and Gardeazabal (2003) 提出，用来研究西班牙巴斯克地区恐怖活动的经济成本，属于案例研究范畴 (Case Study)。
|
||||
|
||||
- 链接的呈现效果：
|
||||
- [经管数据清洗与 Stata 实战：三大地级市数据库和 CSMAR 上市公司数据](https://mp.weixin.qq.com/s/D0cYVPJJsNiu61GcYwV6cg)
|
||||
- [Stata 基础：从论文文件夹体系的建立说起](https://mp.weixin.qq.com/s?__biz=MzkwOTE3NDExOQ==&mid=2247486489&idx=1&sn=2eb51e85a01541c7a552a9434e087512&scene=21#wechat_redirect)
|
||||
- Callouts 是 Awesome Marp 提供的自定义的样式，有 5 种颜色可选：
|
||||
- [紫色](#40)：`bq-purple`
|
||||
- [蓝色](#41)：`bq-blue`
|
||||
- [绿色](#42)：`bq-green`
|
||||
- [红色](#43)：`bq-red`
|
||||
- [黑色](#44)：`bq-black`
|
||||
|
||||
## 5. 引用、链接和引用盒子
|
||||
|
||||
<!-- _class: bq-purple -->
|
||||
|
||||
- 自定义样式为：`<!-- _class: bq-purple -->`
|
||||
|
||||
> 合成控制法 (Synthetic Control Method)
|
||||
>
|
||||
> SCM 最早由 Abadie and Gardeazabal (2003) 提出，用来研究西班牙巴斯克地区恐怖活动的经济成本，属于案例研究范畴 (Case Study)。Athey & Imbens (2017) 认为它是过去 15 年计量方法领域最重要的创新。<br>
|
||||
> 合成控制法的基本思想是：虽然无法找到巴斯克地区的最佳控制地区，但可对西班牙的若干大城市进行适当的线性组合（赋予不同的权重），以构造一个更为贴切的「合成控制地区」 (Synthetic Control Region)，然后将真实的巴斯克地区与「合成的巴斯克地区」进行对比，即可得到恐袭的影响。
|
||||
|
||||
[返回](#39)
|
||||
|
||||
## 5. 引用、链接和引用盒子
|
||||
|
||||
<!-- _class: bq-blue -->
|
||||
|
||||
- 自定义样式为：`<!-- _class: bq-blue -->`
|
||||
|
||||
> 合成控制法 (Synthetic Control Method)
|
||||
>
|
||||
> SCM 最早由 Abadie and Gardeazabal (2003) 提出，用来研究西班牙巴斯克地区恐怖活动的经济成本，属于案例研究范畴 (Case Study)。Athey & Imbens (2017) 认为它是过去 15 年计量方法领域最重要的创新。<br>
|
||||
> 合成控制法的基本思想是：虽然无法找到巴斯克地区的最佳控制地区，但可对西班牙的若干大城市进行适当的线性组合（赋予不同的权重），以构造一个更为贴切的「合成控制地区」 (Synthetic Control Region)，然后将真实的巴斯克地区与「合成的巴斯克地区」进行对比，即可得到恐袭的影响。
|
||||
|
||||
[返回](#39)
|
||||
|
||||
## 5. 引用、链接和引用盒子
|
||||
|
||||
<!-- _class: bq-green -->
|
||||
|
||||
- 自定义样式为：`<!-- _class: bq-green -->`
|
||||
|
||||
> 合成控制法 (Synthetic Control Method)
|
||||
>
|
||||
> SCM 最早由 Abadie and Gardeazabal (2003) 提出，用来研究西班牙巴斯克地区恐怖活动的经济成本，属于案例研究范畴 (Case Study)。Athey & Imbens (2017) 认为它是过去 15 年计量方法领域最重要的创新。<br>
|
||||
> 合成控制法的基本思想是：虽然无法找到巴斯克地区的最佳控制地区，但可对西班牙的若干大城市进行适当的线性组合（赋予不同的权重），以构造一个更为贴切的「合成控制地区」 (Synthetic Control Region)，然后将真实的巴斯克地区与「合成的巴斯克地区」进行对比，即可得到恐袭的影响。
|
||||
|
||||
[返回](#39)
|
||||
|
||||
## 5. 引用、链接和引用盒子
|
||||
|
||||
<!-- _class: bq-red -->
|
||||
|
||||
- 自定义样式为：`<!-- _class: bq-red -->`
|
||||
|
||||
> 合成控制法 (Synthetic Control Method)
|
||||
>
|
||||
> SCM 最早由 Abadie and Gardeazabal (2003) 提出，用来研究西班牙巴斯克地区恐怖活动的经济成本，属于案例研究范畴 (Case Study)。Athey & Imbens (2017) 认为它是过去 15 年计量方法领域最重要的创新。<br>
|
||||
> 合成控制法的基本思想是：虽然无法找到巴斯克地区的最佳控制地区，但可对西班牙的若干大城市进行适当的线性组合（赋予不同的权重），以构造一个更为贴切的「合成控制地区」 (Synthetic Control Region)，然后将真实的巴斯克地区与「合成的巴斯克地区」进行对比，即可得到恐袭的影响。
|
||||
|
||||
[返回](#39)
|
||||
|
||||
## 5. 引用、链接和引用盒子
|
||||
|
||||
<!-- _class: bq-black -->
|
||||
|
||||
- 自定义样式为：`<!-- _class: bq-black -->`
|
||||
|
||||
> 合成控制法 (Synthetic Control Method)
|
||||
>
|
||||
> SCM 最早由 Abadie and Gardeazabal (2003) 提出，用来研究西班牙巴斯克地区恐怖活动的经济成本，属于案例研究范畴 (Case Study)。Athey & Imbens (2017) 认为它是过去 15 年计量方法领域最重要的创新。<br>
|
||||
> 合成控制法的基本思想是：虽然无法找到巴斯克地区的最佳控制地区，但可对西班牙的若干大城市进行适当的线性组合（赋予不同的权重），以构造一个更为贴切的「合成控制地区」 (Synthetic Control Region)，然后将真实的巴斯克地区与「合成的巴斯克地区」进行对比，即可得到恐袭的影响。
|
||||
|
||||
[返回](#39)
|
||||
|
||||
|
||||
## 6. 导航栏
|
||||
|
||||
<!-- _class: trans -->
|
||||
<!-- _footer: "" -->
|
||||
<!-- _paginate: "" -->
|
||||
|
||||
## 6. 导航栏
|
||||
|
||||
<!-- _class: navbar -->
|
||||
<!-- _header: \ ***@Awesome Marp*** *关于模板* *封面页* *目录页* *分栏与分列* *引用盒子* **导航栏** *基础知识*-->
|
||||
|
||||
- 一句题外话：打造 Awesome Marp 模板的最早初衷就是来自几位公众号粉丝朋友的询问，「Marp 是否也能实现想 Beamer 那样的顶部导航栏？」为了实现导航栏的效果，我又多学了一些 CSS 的知识，这套模板才得以成型
|
||||
|
||||
- 自定义样式为 `navbar`：`<!-- _class: navbar -->`
|
||||
- 导航栏修改自 header，最前面必须加入 `\ `
|
||||
- 当前活动标题，使用粗体 `**粗体**`
|
||||
- 其余非活动标题，使用斜体 `*斜体*`
|
||||
- 如果左侧有文字，需要使用斜粗体 `***粗斜体***`
|
||||
- 默认根据内容自动分配间距，如果希望右对齐，可以手动增加空格的方式来推动右对齐
|
||||
|
||||
|
||||
## 6. 导航栏
|
||||
|
||||
<!-- _header: \ ***@Awesome Marp*** *关于模板* *封面页* *目录页* *分栏与分列* *引用盒子* **导航栏** *基础知识*-->
|
||||
<!-- _class: navbar -->
|
||||
|
||||
这张页面的部分 Markdown 源码：
|
||||
|
||||
```markdown
|
||||
<!-- _class: navbar -->
|
||||
<!-- _header: \ ***虹鹄山庄***
|
||||
|
||||
- 自定义样式为 `navbar`：`<!-- _class: navbar -->`
|
||||
- 导航栏修改自 header，最前面必须加入 `\ `
|
||||
- 当前活动标题：使用粗体 `**粗体**`
|
||||
- 其余非活动标题：使用斜体 `*斜体*`
|
||||
- 如果左侧有文字：使用斜粗体 `***粗斜体***`
|
||||
- 默认根据内容自动分配间距，如果希望右对齐，可以手动增加空格的方式来推动右对齐
|
||||
```
|
||||
|
||||
## 7. 其他自定义样式
|
||||
|
||||
<!-- _class: trans -->
|
||||
<!-- _footer: "" -->
|
||||
<!-- _paginate: "" -->
|
||||
|
||||
|
||||
|
||||
## 7.1 固定标题行：更像 Beamer 了（`fixedtitleA`）
|
||||
|
||||
<!-- _class: fixedtitleA -->
|
||||
|
||||
- 自定义样式：`<!-- _class: fixedtitleA -->`
|
||||
|
||||
- 使当前页面的标题栏固定在顶部，而非随着内容的多少浮动
|
||||
|
||||
- 同时，页面内容也会从顶部起笔，而非垂直方向上居中显示
|
||||
|
||||
|
||||
## 7.1 固定标题行：更像 Beamer 了（`fixedtitleB`）
|
||||
|
||||
<!-- _class: fixedtitleB -->
|
||||
|
||||
|
||||
<div class="div">
|
||||
|
||||
- 自定义样式：`<!-- _class: fixedtitleB -->`
|
||||
|
||||
- `fixedtitleB` 相比于 `fixedtitleA`，标题增加了底色色块，同时缩小了标题大小
|
||||
|
||||
- 其余效果与 `fixedtitleA` 相同
|
||||
|
||||
- 但是页面正文内容需要包裹在 `<div class="div'></div>` 标签中
|
||||
</div>
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: footnote -->
|
||||
|
||||
<div class="tdiv">
|
||||
|
||||
#### 7.2 脚注的自定义样式：`footnote`
|
||||
|
||||
使用方法：
|
||||
|
||||
- 自定义样式：`<!-- _class: footnote -->`
|
||||
- 页面除脚注外的其他内容，写在 `<div class = "tdiv"></div>`
|
||||
- 页面的脚注内容，写在 `<div class = "bdiv"></div>`
|
||||
|
||||
举个例子，展示一下显示效果：
|
||||
|
||||
- 一方面，经济金融化程度的加深，使得金融部门能够凭借资本跨期配置提前抽取其他部门的未来价值，从而扩大金融和非金融部门之间的外部收入差距$^1$。另一方面，经济金融化不断增加企业股东权力，促使企业更加追求股东价值最大化，这一导向将弱化普通劳动者阶层的议价能力，食利者阶层的财产性收入增加必然会挤压劳动收入份额，从而扩大了内部收入差距$^2$。
|
||||
|
||||
</div>
|
||||
|
||||
<div class="bdiv">
|
||||
|
||||
1 张甜迪. 金融化对中国金融、非金融行业收入差距的影响[J]. 经济问题, 2015(11): 40-46.
|
||||
2 Hein E. Finance-dominated capitalism and re-distribution of income: a Kaleckian perspective[J]. Cambridge Journal of Economics, 2015, 39(3): 907-934.
|
||||
</div>
|
||||
|
||||
## 7.3 调节文字大小的自定义样式
|
||||
|
||||
<!-- _class: largetext -->
|
||||
|
||||
对于字体大小的调节，直接修改 CSS 文件应该很方便的。但有小伙伴提出，“希望可以增加字体调节的自定义样式”，于是目前提供了四种微调样式：
|
||||
|
||||
- 自定义样式 1：`<!-- _class: tinytext -->` （是默认字体大小的 0.8 倍）
|
||||
- 自定义样式 2：`<!-- _class: smalltext -->` （是默认字体大小的 0.9 倍）
|
||||
- 自定义样式 3：`<!-- _class: largetext -->` （是默认字体大小的 1.15 倍）
|
||||
- 自定义样式 4：`<!-- _class: hugetext -->` （是默认字体大小的 1.3 倍）
|
||||
|
||||
比如，本页面采用的自定义样式为 `largetext`
|
||||
|
||||
## 7.4 图表标题的自定义样式：`caption`
|
||||
|
||||
<!-- _class: caption -->
|
||||
|
||||
- 通过 `<div class="caption">宇宙的奥妙</div>` 来定义图表的标题
|
||||
|
||||
|
||||
|
||||
<div class="caption">
|
||||
宇宙的奥妙
|
||||
</div>
|
||||
|
||||
|
||||
## 需要知道的基础知识……
|
||||
|
||||
<!-- _class: trans -->
|
||||
<!-- _footer: "" -->
|
||||
<!-- _paginate: "" -->
|
||||
|
||||
|
||||
## Markdown 概览
|
||||
|
||||
<!-- _header: \ ***@Awesome Marp*** *关于模板* *封面页* *目录页* *分栏与分列* *引用盒子* *导航栏* **基础知识**-->
|
||||
<!-- _class: navbar -->
|
||||
|
||||
- Markdown 是一种**极轻量**的文本标记语言，允许人们使用**易读易写**的纯文本格式编写文档，而且对于表格、代码、图片、公式等支持良好
|
||||
- 应用广泛：网站、课程笔记/讲义、演示文稿、撰写学术论文等
|
||||
- Markdown 基础语法：
|
||||
- 参阅：[Markdown 中文文档](https://markdown-zh.readthedocs.io/en/latest/)、[Markdown 指南](https://www.markdown.xyz/)、[Markdown 菜鸟教程](https://www.runoob.com/markdown/md-tutorial.html)
|
||||
- 标题 `#`、粗体 `** **`、斜体 `* *`、删除线 `~~ ~~`、分割线 `---`、超链接 `[]()`
|
||||
- 引用 `>`、列表 `-` / `1. `、代码块
|
||||
- 脚注 `[^1]` / `[^1]:`、待办事项 `[ ]` / `[x]`
|
||||
- Markdown 进阶语法：
|
||||
- 图片 `![]()`：本地路径、网络路径（参阅：[图床与 PicGo——让你爱上记录与分享](https://sspai.com/post/65716)）
|
||||
- 数学公式：行内公式 `$...$`、行间公式 `$$...$$`
|
||||
- 支持 HTML 元素：`<br>`/`<hr>`/`<b></b>`/`<i></i>`/`<kbd></kbd>` 等
|
||||
|
||||
## 推荐的 Markdown 编辑器
|
||||
|
||||
<!-- _class: cols-2-64 navbar -->
|
||||
<!-- _header: \ ***@Awesome Marp*** *关于模板* *封面页* *目录页* *分栏与分列* *引用盒子* *导航栏* **基础知识**-->
|
||||
|
||||
<div class=ldiv>
|
||||
|
||||
**VS Code**
|
||||
- Visual Studio Code[下载地址](https://code.visualstudio.com/Download)
|
||||
- VS Code 插件：
|
||||
- 配合 Markdown：[Markdown Preview Enhanced](https://marketplace.visualstudio.com/items?itemName=shd101wyy.markdown-preview-enhanced)、[Markdown All in One](https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one)
|
||||
- 图床：[PicGo](https://marketplace.visualstudio.com/items?itemName=Spades.vs-picgo)
|
||||
- 格式化文档：[Pangu-Markdown](https://marketplace.visualstudio.com/items?itemName=xlthu.Pangu-Markdown)
|
||||
- Markdown 转 PPT：[Marp for VScode](https://marketplace.visualstudio.com/items?itemName=marp-team.marp-vscode)
|
||||
- Markdown 转思维导图：[Markmap for VScode](https://marketplace.visualstudio.com/items?itemName=gera2ld.markmap-vscode)
|
||||
- 配合 Zotero：[Citation Picker for Zotero](https://marketplace.visualstudio.com/items?itemName=mblode.zotero)、[Pandoc Citer](https://marketplace.visualstudio.com/items?itemName=notZaki.pandocciter)
|
||||
|
||||
</div>
|
||||
|
||||
<div class=rdiv>
|
||||
|
||||
**Obsidian**
|
||||
- [Obsidian 主页](https://obsidian.md/)
|
||||
- 基于 Markdown 的本地知识管理软件
|
||||
- 除官方同步和发布功能外，对个人使用者完全免费
|
||||
- 功能丰富、插件众多、开发社区活跃
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
## Marp 基本用法
|
||||
|
||||
<!-- _header: \ ***@Awesome Marp*** *关于模板* *封面页* *目录页* *分栏与分列* *引用盒子* *导航栏* **基础知识**-->
|
||||
<!-- _class: navbar fixedtitleB -->
|
||||
|
||||
<div class="div">
|
||||
|
||||
- 几个字总结 [Marp](https://marp.app/)：使用 Markdown 创作演示文稿
|
||||
- 来自 Marp 官方网页的一段话：Marp (also known as the Markdown Presentation Ecosystem) provides an intuitive experience for creating beautiful slide decks. You only have to focus on writing your story in a Markdown document.
|
||||
|
||||
- 在 Markdown 文件的顶部 YAML 区域，通过 `marp: true` 启动 Marp，然后即可开启侧边预览，VS Code 界面左边是代码区域，右边为预览区域
|
||||
- 内容遵循 Markdown 语法，但 Marp 增加了一些内置指令，而且指令分为全局指令和[局部指令](https://marpit.marp.app/directives?id=local-directives-1)，全局指令建议放置于 YAML 区，局部指令位于当前页面，不同页面通过 `---` 切分
|
||||
- 推荐阅读：Marpit [官方文档](https://marpit.marp.app)及[中译版](https://caizhiyuan.gitee.io/categories/skills/20200730-marp.html#%E5%8A%9F%E8%83%BD)，五分钟学会 Marp[（上）](https://www.lianxh.cn/news/97fccdca2d7a5.html)、[（下）](https://www.lianxh.cn/news/521900220dd33.html)
|
||||
</div>
|
||||
|
||||
## Marp 基本用法
|
||||
|
||||
<!-- _header: \ ***@Awesome Marp*** *关于模板* *封面页* *目录页* *分栏与分列* *引用盒子* *导航栏* **基础知识**-->
|
||||
<!-- _class: navbar -->
|
||||
|
||||
```yaml
|
||||
---
|
||||
marp: true # 开启 Marp
|
||||
size: 16:9 # 设定页面比例，常见有 16:9 或 4:3，默认为16:9
|
||||
theme: gaia # 切换主题，内置 3 种样式的主题，可以自定义主题
|
||||
paginate: true # 开启页码
|
||||
headingDivider: 2 # 通过二级标题切分页面，省去手动换页的麻烦
|
||||
footer: 初虹 # 设置页脚区域的内容，如果设定页眉的内容，则为 header
|
||||
---
|
||||
```
|
||||
|
||||
- 如果想让页面同时被多个级别的标题切分，比如，以二级~四级标题分割页面，可以 `headingDivider: [2,3,4]`
|
||||
- 想要使得多个自定义样式渲染同一个页面，可直接将不同自定义样式以空格连接，比如：`<!-- _class: cols-2-64 fglass -->`
|
||||
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: lastpage -->
|
||||
<!-- _footer: "" -->
|
||||
|
||||
###### 欢迎交流 ~
|
||||
|
||||
<div class="icons">
|
||||
|
||||
- <i class="fa-solid fa-envelope"></i>
|
||||
- 邮箱：ch2099058972@163.com
|
||||
- <i class="fa-brands fa-weixin"></i>
|
||||
- 微信：favourhong
|
||||
- <i class="fa-solid fa-house"></i>
|
||||
- 公众号：虹鹄山庄
|
||||
|
||||
<div>
|
||||
|
||||
## 创作不易，buy me a coffee 🤙~
|
||||
|
||||
<!-- _class: trans -->
|
||||
<!-- _footer: "" -->
|
||||
<!-- _paginate: "" -->
|
||||
|
||||
<br>
|
||||
|
||||
|
||||
Executable
BIN
Binary file not shown.
Executable
+1019
File diff suppressed because one or more lines are too long
Executable
+942
@@ -0,0 +1,942 @@
|
||||
---
|
||||
marp: true
|
||||
size: 16:9
|
||||
theme: am_dark
|
||||
paginate: true
|
||||
headingDivider:
|
||||
- 2
|
||||
- 3
|
||||
footer: \ *初虹（虹鹄山庄）* *Awesome Marp：轻松取代 LaTeX Beamer！* *2024年1月13日（v1.3）*
|
||||
created: 2025-09-09T18:22
|
||||
updated: 2025-09-22T13:27
|
||||
---
|
||||
|
||||
|
||||
<!-- _class: cover_a
|
||||
<!-- _header: "" -->
|
||||
<!-- _footer: "" -->
|
||||
<!-- _paginate: "" -->
|
||||
|
||||
# Awesome Marp：轻松取代 LaTeX Beamer！
|
||||
|
||||
###### “用法简单、功能全面的个性化 PPT 模板”
|
||||
|
||||
@初虹
|
||||
公众号：虹鹄山庄
|
||||
发布时间：2024 年 1 月 13 日（v1.3）
|
||||
<ch2099058972@163.com>
|
||||
Awesome-Marp 地址：[GitHub 库](https://github.com/favourhong/Awesome-Marp)/[Gitee 库](https://gitee.com/favourhong/Awesome-Marp)
|
||||
|
||||
## Awesome Marp 有什么？
|
||||
|
||||
<!-- _class: cols2_ol_ci fglass toc_a -->
|
||||
<!-- _footer: "" -->
|
||||
<!-- _header: "CONTENTS" -->
|
||||
<!-- _paginate: "" -->
|
||||
|
||||
- [关于模板](#3)
|
||||
- [封面页](#10)
|
||||
- [目录页](#16)
|
||||
- [页面分栏与列表分列](#20)
|
||||
- [引用、链接和引用盒子](#38)
|
||||
- [导航栏](#45)
|
||||
- [其他自定义样式](#48)
|
||||
- [需要知道的基础知识](#56)
|
||||
- [最后一页](#59)
|
||||
|
||||
## 1. 关于模板
|
||||
|
||||
<!-- _class: trans -->
|
||||
<!-- _footer: "" -->
|
||||
<!-- _paginate: "" -->
|
||||
|
||||
## 1. 关于模板
|
||||
|
||||
- **开始之前：** 你需要知道这样几个工具，Markdown、Markdown 编辑器（VS Code 或 Obsidian）和 Marp。关于这三者是个啥，我不做详细地介绍，但在[第 55 页](#55)-[第 58 页](#58)会有一些凝练性的内容给你参考，同时我提供了不少的链接，也供你参阅。
|
||||
- **为什么要开发 Awesome Marp？**
|
||||
- Marp 原生仅提供 3 种主题（`default` / `gaia` / `uncover`），呈现效果一般。于是我根据自己的使用情况，边用边改造，陆续打磨了这样的一整套模板。
|
||||
- **目前发布的 v1.3 有 38 个自定义样式、6 种颜色的主题**（后面有呈现效果）
|
||||
- **Awesome Marp 的几个特色：**
|
||||
- 支持分栏呈现、支持 Callouts（类似于 Beamer 中的定理框）、提供多种类型的封面页和目录页、可以实现导航进度栏、图片支持自定义居中/居左/居右对齐等
|
||||
|
||||
- 本着「开箱即用」的原则，我将本项目文件夹打包上传到了[GitHub](https://github.com/favourhong/Awesome-Marp) 和 [Gitee](https://gitee.com/favourhong/Awesome-Marp)
|
||||
- 用到的工具：软件 [Visual Studio Code](https://code.visualstudio.com) 或 [Obsidian](https://obsidian.md/)、[Marp for VScode（插件）](https://marketplace.visualstudio.com/items?itemName=marp-team.marp-vscode)
|
||||
|
||||
## 1. 关于模板
|
||||
|
||||
|
||||
- Awesome Marp 支持 38 个自定义样式，使用时需在页面指定（如 `<!-- _class: trans -->`）：
|
||||
|
||||
| 封面页 | 目录页 | 列表 | 引用盒子 | 其他 1 | 其他 2 |
|
||||
| --------- | ------- | ----------- | ----------- | ----------------------------- | --------------------------------------------------------------- |
|
||||
| `cover_a` | `toc_a` | `cols-2` | `bq-black` | 过渡页面 `trans` | 图表等的标题 `caption` |
|
||||
| `cover_b` | `toc_b` | `cols-2-64` | `bq-purple` | 最后一页 `lastpage` | 非嵌套无序列表的毛玻璃效果 `fglass` |
|
||||
| `cover_c` | | `cols-2-73` | `bq-red` | 导航栏 `navbar` | 脚注：`footnote` |
|
||||
| `cover_d` | | `cols-3` | `bq-blue` | 标题固定+无底色 `fixedtitleA` | 调节字体大小：`tinytext`/`smalltext`/<br>`largetext`/`hugetext` |
|
||||
| `cover_e` | | `cols-2-46` | `bq-green` | 标题固定+有底色 `fixedtitleB` | |
|
||||
| | | `cols-2-37` | | 两列有序列表 `cols2_ol_sq/ci` | |
|
||||
| | | `rows-2` | | 两列无序列表 `cols_ul_sq/ci` | |
|
||||
| | | `pin-3` | | 单列有序列表 `col1_ul_sq/ci` | |
|
||||
|
||||
|
||||
## 1. 关于模板
|
||||
|
||||
|
||||
- Awesome Marp 的主题色（6 种），可在 YAML 区切换 Theme，如 `theme: am_dark`：
|
||||
|
||||
| 深色 | 绿色 | 红色 | 蓝色 | 棕色 | 紫色
|
||||
|---------|----------|--------|---------|----------|----|
|
||||
| `am_dark` | `am_green` | `am_red` | `am_blue` | `am_brown` |`am_purple`|
|
||||
|
||||
|
||||
## 1. 关于模板
|
||||
|
||||
- 如何使用：
|
||||
- **搭配 VS Code**：直接使用 VS Code 打开 `Awesome-Marp` 文件夹
|
||||
- 如果你想「拿来即用」，直接根据我分享的 Markdown 源码文件，对照修改就好了~
|
||||
- 如果你对部分效果不满意、期望简单微调的话，目前在 `Awesome-Marp/themes` 下有 6 个 CSS 文件，这些 CSS 文件决定了 Markdown 源码的最终渲染效果，可以试着改一改~
|
||||
- 如果你能够自行定制个性化 CSS 文件，渲染前，别忘在 `Awesome-Marp/.vscode/settings.json` 里加上你的 CSS 文件路径~
|
||||
- **搭配 Obsidian**：安装 [Marp Slides 插件](https://github.com/samuele-cozzi/obsidian-marp-slides)，并配置相应 CSS 路径
|
||||
|
||||
- 字体：因担心版权问题，需自行下载字体并安装，Awesome Marp 用到的字体有：
|
||||
- 正文字体：`Latin Modern Math`、`方正宋刻本秀楷简体`，如果未安装，默认将使用 `Calibri` 和 `楷体`
|
||||
- 标题字体：`Optima LT Medium`、`方正苏新诗柳楷简体`，如果未安装，默认将使用 `Arial` 和 `黑体`
|
||||
- 脚注字体：`Charm` 和 `叶根友毛笔行书修正版`，如果未安装，默认将使用 `Calibri` 和 `楷体`
|
||||
- 代码字体：`Fira Code` 和 `霞鹜文楷等宽`，如果未安装，默认将使用 `Consolas` 和 `华文中宋`
|
||||
|
||||
## 1. 关于模板：更新日志
|
||||
|
||||
- [Awesome Marp v1.0：我开发了一整套 Marp 主题，Markdown 转换的 PPT 也可以很好看！](https://mp.weixin.qq.com/s?__biz=MzkwOTE3NDExOQ==&mid=2247486787&idx=1&sn=2652ddae81f50240844cb652780912e1&chksm=c13ff94bf648705da1ba986b91265e3ff018acaffcfa60d7807a81be22176005e7a2b4483627&scene=178&cur_album_id=3132459596339757070#rd)
|
||||
- [Awesome Marp v1.1：标题行不随正文浮动，这下更像 Beamer 了！](https://mp.weixin.qq.com/s?__biz=MzkwOTE3NDExOQ==&mid=2247486800&idx=1&sn=527348e242576079e4bd6cd1823c823a&chksm=c13ff958f648704e40a202db6ad5fa215ef4c189d66403e161d6ace9828406a8747ac755684f&scene=178&cur_album_id=3132459596339757070#rd)
|
||||
- [Awesome Marp v1.2：增加脚注、调节字体大小等样式～](https://mp.weixin.qq.com/s?__biz=MzkwOTE3NDExOQ==&mid=2247486825&idx=1&sn=56d632ce164831438ec87c1b20ed4c4c&chksm=c13ff961f64870774f069ab816340783d8f54fd6b89363b8d9412c593efc640851ce9edd8833&scene=178&cur_album_id=3132459596339757070#rd)
|
||||
- [Awesome Marp v1.3：几处小更新～](https://mp.weixin.qq.com/s?__biz=MzkwOTE3NDExOQ==&mid=2247486869&idx=1&sn=fcc377ff6a5930436e5078a09d53f0ab&chksm=c13ff99df648708b89bafba030b27909d0022279e26da723ca54a1666fe55f50a4230f050662&scene=178&cur_album_id=3132459596339757070#rd)
|
||||
|
||||
|
||||
## 下面让我们看看效果吧 ~
|
||||
|
||||
<!-- _class: trans -->
|
||||
<!-- _footer: "" -->
|
||||
<!-- _paginate: "" -->
|
||||
|
||||
## 2. 封面页
|
||||
|
||||
<!-- _class: trans -->
|
||||
<!-- _footer: "" -->
|
||||
<!-- _paginate: "" -->
|
||||
|
||||
## 2. 封面页
|
||||
|
||||
- 大标题：采用一级标题 `# ` （如：`# Awesome Marp：自定义 Marp 主题`）
|
||||
- 副标题：采用六级标题 `###### ` （如：`###### 打造简便又不失个性的演示文稿`）
|
||||
- 本套模板提供 5 种封面页样式，使用时需要在页面中设定局部指令，如：`<!-- _class: cover_a -->`
|
||||
- `cover_a`：[第 1 种](#1)
|
||||
- `cover_b`：[第 2 种](#12)
|
||||
- `cover_c`：预留 header 可设定学校 logo，footer 可设定校训 [第 3 种](#13)
|
||||
- `cover_d`：只预留了 footer 设定校训 [第 4 种](#14)
|
||||
- `cover_e`：预留 header 设定学校 logo，footer 设定学校 logo 和学校名称[第 5 种](#15)
|
||||
|
||||
- 如果已经设定了全局 footer、header 或页码，但又不期望在封面页中出现，可以 `<!-- _footer: "" -->` / `<!-- _header: "" -->` / `<!-- _paginate: "" -->` 分别将其局部隐藏起来
|
||||
- 当标题文字超过页面宽度会溢出换行，这里可以使用 `<!-- fit -->` 根据页面宽度自动调整文字大小
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: cover_b -->
|
||||
<!-- _header: "" -->
|
||||
<!-- _footer: "" -->
|
||||
<!-- _paginate: "" -->
|
||||
|
||||
# Awesome Marp：轻松取代 LaTeX Beamer！
|
||||
|
||||
###### “用法简单、功能全面的个性化 PPT 模板”
|
||||
|
||||
@初虹
|
||||
公众号：虹鹄山庄
|
||||
发布时间：2024 年 1 月 13 日（v1.3）
|
||||
<ch2099058972@163.com>
|
||||
Awesome-Marp 地址：[GitHub 库](https://github.com/favourhong/Awesome-Marp)/[Gitee 库](https://gitee.com/favourhong/Awesome-Marp)
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: cover_c -->
|
||||
<!-- _paginate: "" -->
|
||||
<!-- _footer: 厚德博学 经济匡时 -->
|
||||
<!-- _header:  -->
|
||||
|
||||
|
||||
# <!-- fit -->Awesome Marp：轻松取代 LaTeX Beamer！
|
||||
|
||||
###### “用法简单、功能全面的个性化 PPT 模板”
|
||||
|
||||
@初虹
|
||||
公众号：虹鹄山庄
|
||||
发布时间：2024 年 1 月 13 日（v1.3）
|
||||
<ch2099058972@163.com>
|
||||
Awesome-Marp 地址：[GitHub 库](https://github.com/favourhong/Awesome-Marp)/[Gitee 库](https://gitee.com/favourhong/Awesome-Marp)
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: cover_d -->
|
||||
<!-- _paginate: "" -->
|
||||
<!-- _footer: "厚德博学 经济匡时" -->
|
||||
|
||||
# <!-- fit -->Awesome Marp：轻松取代 LaTeX Beamer！
|
||||
|
||||
###### “用法简单、功能全面的个性化 PPT 模板”
|
||||
|
||||
@初虹
|
||||
公众号：虹鹄山庄
|
||||
发布时间：2024 年 1 月 13 日（v1.3）
|
||||
<ch2099058972@163.com>
|
||||
Awesome-Marp 地址：[GitHub 库](https://github.com/favourhong/Awesome-Marp)/[Gitee 库](https://gitee.com/favourhong/Awesome-Marp)
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: cover_e -->
|
||||
<!-- _paginate: "" -->
|
||||
<!-- _footer:  -->
|
||||
<!-- _header:  -->
|
||||
|
||||
|
||||
# <!-- fit -->Awesome Marp：轻松取代 LaTeX Beamer！
|
||||
|
||||
###### “用法简单、功能全面的个性化 PPT 模板”
|
||||
|
||||
@初虹
|
||||
公众号：虹鹄山庄
|
||||
发布时间：2024 年 1 月 13 日（v1.3）
|
||||
<ch2099058972@163.com>
|
||||
Awesome-Marp 地址：[GitHub 库](https://github.com/favourhong/Awesome-Marp)/[Gitee 库](https://gitee.com/favourhong/Awesome-Marp)
|
||||
|
||||
## 3. 目录页
|
||||
|
||||
<!-- _class: trans -->
|
||||
<!-- _footer: "" -->
|
||||
<!-- _paginate: "" -->
|
||||
|
||||
## 3. 目录页
|
||||
|
||||
- Awesome Marp 提供了至少 2 种目录页样式，使用时同样需要设定局部样式
|
||||
- `toc_a`：需要将 header 的内容设定为 `CONTENTS`，即 `<!-- _header: "CONTENTS" -->`
|
||||
- `toc_b`：需要将 header 的内容设定为 `目录<br>CONTENTS<br>你的LOGO地址`，即 `<!-- _header: 目录<br>CONTENTS<br>-->`
|
||||
- 提供的几种分栏列表样式，也可以作为目录页使用，如 `<!-- _class: cols2_ol_ci fglass -->`（效果见[这里](#32)）
|
||||
|
||||
- 类似地，如果已经定义了全局 footer 或页码，可以使用 `<!-- _footer: "" -->` / `<!-- _paginate: "" -->` 分别将其局部隐藏起来
|
||||
- 目录页样式：[第 1 种](#2)、[第 2 种](#18)和[第 3 种](#19)
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: toc_a -->
|
||||
<!-- _header: "CONTENTS" -->
|
||||
<!-- _footer: "" -->
|
||||
<!-- _paginate: "" -->
|
||||
|
||||
- [关于模板](#3)
|
||||
- [封面页](#10)
|
||||
- [目录页](#16)
|
||||
- [页面分栏与列表分列](#20)
|
||||
- [引用、链接和引用盒子](#38)
|
||||
- [导航栏](#45)
|
||||
- [其他自定义样式](#48)
|
||||
- [需要知道的基础知识](#56)
|
||||
- [最后一页](#59)
|
||||
|
||||
---
|
||||
|
||||
<!-- _header: 目录<br>CONTENTS<br>-->
|
||||
<!-- _class: toc_b -->
|
||||
<!-- _footer: "" -->
|
||||
<!-- _paginate: "" -->
|
||||
|
||||
- [关于模板](#3)
|
||||
- [封面页](#10)
|
||||
- [目录页](#16)
|
||||
- [页面分栏与列表分列](#20)
|
||||
- [引用、链接和引用盒子](#38)
|
||||
- [导航栏](#45)
|
||||
- [其他自定义样式](#48)
|
||||
- [需要知道的基础知识](#56)
|
||||
- [最后一页](#59)
|
||||
|
||||
|
||||
## 4. 页面分栏与列表分列
|
||||
|
||||
<!-- _class: trans -->
|
||||
<!-- _footer: "" -->
|
||||
<!-- _paginate: "" -->
|
||||
|
||||
## 4.1 页面分栏与列表分列：页面分栏
|
||||
|
||||
- Awesome Marp 提供了 8 种页面分栏方式，分别为：
|
||||
- `cols-2`：[两列分栏，五五平分](#23)
|
||||
- `cols-2-64`：[两列分栏，六四分](#24)
|
||||
- `cols-2-73`：[两列分栏，七三分](#25)
|
||||
- `cols-2-46`：[两列分栏，四六分](#26)
|
||||
- `cols-2-37`：[两列分栏，三七分](#27)
|
||||
- `cols-3`：[三列分栏，平分](#28)
|
||||
- `rows-2`：[两行分栏](#29)
|
||||
- `pin-3`：[品字型分栏](#30)
|
||||
|
||||
- 如果某一栏为图片，可以将 `class=ldiv` 换成 `class=limg`，这样能够实现图片的垂直居中对齐呢（`class=ldiv` 为居上对齐）
|
||||
|
||||
|
||||
## 4.1 页面分栏与列表分列：页面分栏
|
||||
|
||||
- 以 `<!-- _class: cols-2 -->` 为例，Markdown 的源码为：
|
||||
|
||||
```markdown
|
||||
<!-- _class: cols-2 -->
|
||||
<div class=ldiv>
|
||||
|
||||
第一列（左侧栏）的内容在这里
|
||||
|
||||
内容可以是普通纯文本，可以是列表，也可以是引用块、链接、图片等
|
||||
</div>
|
||||
|
||||
<div class=rdiv>
|
||||
|
||||
第二列（右侧栏）的内容在这里
|
||||
</div>
|
||||
```
|
||||
|
||||
- 如果是分三栏（`<!-- _class: cols-3 -->`），还需要再增加 `<div class="mdiv"></div>` 标签
|
||||
|
||||
|
||||
## 《荷塘月色》（两栏五五分）
|
||||
|
||||
<!-- _class: cols-2 -->
|
||||
|
||||
<div class=ldiv>
|
||||
|
||||
曲曲折折的荷塘上面，弥望的是田田的叶子。叶子出水很高，像亭亭的舞女的裙。
|
||||
|
||||
层层的叶子中间，零星地点缀着些白花，有袅娜地开着的，有羞涩地打着朵儿的；正如一粒粒的明珠，又如碧天里的星星，又如刚出浴的美人。
|
||||
|
||||
微风过处，送来缕缕清香，仿佛远处高楼上渺茫的歌声似的。这时候叶子与花也有一丝的颤动，像闪电般，霎时传过荷塘的那边去了。
|
||||
|
||||
叶子本是肩并肩密密地挨着，这便宛然有了一道凝碧的波痕。叶子底下是脉脉的流水，遮住了，不能见一些颜色；而叶子却更见风致了。
|
||||
|
||||
—— 朱自清《荷塘月色》 [返回](#21)
|
||||
</div>
|
||||
|
||||
<div class=rimg>
|
||||
|
||||
<!--  -->
|
||||
|
||||
</div>
|
||||
|
||||
## 《春》（两栏六四分）
|
||||
|
||||
<!-- _class: cols-2-64 -->
|
||||
|
||||
<div class=limg>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class=rdiv>
|
||||
|
||||
盼望着，盼望着，东风来了，春天的脚步近了。
|
||||
|
||||
一切都像刚睡醒的样子，欣欣然张开了眼。山朗润起来了，水涨起来了，太阳的脸红起来了。
|
||||
|
||||
小草偷偷地从土里钻出来，嫩嫩的，绿绿的。园子里，田野里，瞧去，一大片一大片满是的。坐着，躺着，打两个滚，踢几脚球，赛几趟跑，捉几回迷藏。风轻悄悄的，草软绵绵的。
|
||||
|
||||
—— 朱自清《春》
|
||||
|
||||
[返回](#21)
|
||||
</div>
|
||||
|
||||
## 经典散文诗篇（两栏七三分）
|
||||
|
||||
<!-- _class: cols-2-73 -->
|
||||
|
||||
<div class=limg>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class=rdiv>
|
||||
|
||||
经典的散文诗篇有：
|
||||
|
||||
- 朱自清：《荷塘月色》
|
||||
- 林清玄：《月到天心》
|
||||
- 郁达夫：《古都的秋》
|
||||
- 张爱玲：《花落的声音》
|
||||
- 余光中：《听听那冷雨》
|
||||
- 张抗抗：《牡丹的拒绝》
|
||||
- 丰子恺：《杨柳》
|
||||
- 周作人：《乌篷船》
|
||||
- 郑振铎：《石湖》
|
||||
- 梁实秋：《雅舍》
|
||||
|
||||
[返回](#21)
|
||||
</div>
|
||||
|
||||
## 《春》（两栏四六分）
|
||||
|
||||
<!-- _class: cols-2-46 -->
|
||||
|
||||
<div class=ldiv>
|
||||
|
||||
|
||||
盼望着，盼望着，东风来了，春天的脚步近了。
|
||||
|
||||
一切都像刚睡醒的样子，欣欣然张开了眼。山朗润起来了，水涨起来了，太阳的脸红起来了。
|
||||
|
||||
小草偷偷地从土里钻出来，嫩嫩的，绿绿的。园子里，田野里，瞧去，一大片一大片满是的。坐着，躺着，打两个滚，踢几脚球，赛几趟跑，捉几回迷藏。风轻悄悄的，草软绵绵的。
|
||||
|
||||
—— 朱自清《春》
|
||||
|
||||
[返回](#21)
|
||||
</div>
|
||||
|
||||
<div class=rimg>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
## 经典散文诗篇（两栏三七分）
|
||||
|
||||
<!-- _class: cols-2-37 -->
|
||||
|
||||
<div class=ldiv>
|
||||
|
||||
|
||||
经典的散文诗篇有：
|
||||
|
||||
- 朱自清：《荷塘月色》
|
||||
- 林清玄：《月到天心》
|
||||
- 郁达夫：《古都的秋》
|
||||
- 张爱玲：《花落的声音》
|
||||
- 余光中：《听听那冷雨》
|
||||
- 张抗抗：《牡丹的拒绝》
|
||||
- 丰子恺：《杨柳》
|
||||
- 周作人：《乌篷船》
|
||||
- 郑振铎：《石湖》
|
||||
- 梁实秋：《雅舍》
|
||||
|
||||
[返回](#21)
|
||||
</div>
|
||||
|
||||
<div class=rimg>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
## 夏与秋（三栏三平分）
|
||||
|
||||
<!-- _class: cols-3 -->
|
||||
|
||||
<div class=ldiv>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class=mdiv>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class=rdiv>
|
||||
|
||||
|
||||
|
||||
[返回](#21)
|
||||
</div>
|
||||
|
||||
|
||||
## 高山与沙漠（两行分栏）
|
||||
|
||||
<!-- _class: rows-2 -->
|
||||
|
||||
<div class="timg">
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="bimg">
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
## 《宇宙的奥秘》（品字型分栏）
|
||||
|
||||
<!-- _class: pin-3 -->
|
||||
|
||||
<div class="tdiv">
|
||||
|
||||
> 四百年前，两位截然不同的科学家突破了当时已知世界的边界。1609 年在威尼斯，伽利略・伽利雷透过望远镜观察星辰，并制作仪器和进行实验。在布拉格，科班出身的神学家约翰内斯・开普勒发现了行星运动定律，奠定了近代天体物理学的基础，并思考着宇宙的宏伟构造。托马斯・德・帕多瓦以至今较少受到关注却扣人心弦的通信往来为基础，讲述了这两位类型如此迥异的学者之间不对等的关系，以及他们如何在同样的时刻却以各自的方式探索星辰的奥秘。在彼此的鉴照下，他们的远见与固执、睿智与无知得以呈现。这是一部介绍新科学的崛起以及近代来临之际的巨大变革的作品。 ——《宇宙的奥妙》
|
||||
</div>
|
||||
|
||||
<div class="limg">
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="rimg">
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
## 4.2 页面分栏与列表分列：列表分列
|
||||
|
||||
Awesome Marp v1.3 提供了 6 种列表分列的方式，分别为：
|
||||
|
||||
- `cols2_ol_sq`：呈现效果为[有序列表 + 方形序号](#32)
|
||||
- `cols2_ol_ci`：呈现效果为[有序列表 + 圆形序号](#33)
|
||||
- `cols2_ul_sq`：呈现效果为[无序列表 + 方形序号](#34)
|
||||
- `cols2_ul_ci`：呈现效果为[无序列表 + 圆形序号](#35)
|
||||
- `col1_ul_sq`：呈现效果为[有序列表 + 方形序号](#36)
|
||||
- `col1_ul_ci`：呈现效应为[有序列表 + 圆形序号](#37)
|
||||
|
||||
|
||||
## 《微观经济学：现代观点》
|
||||
|
||||
<!-- _class: cols2_ol_sq fglass -->
|
||||
|
||||
渲染效果为**有序列表+方形序号**
|
||||
自定义样式为：`<!-- _class: cols2_ol_sq fglass -->`
|
||||
|
||||
- 偏好和效用
|
||||
- 预算约束和消费者的最优选择
|
||||
- 需求函数
|
||||
- 劳动力和储蓄的供给函数
|
||||
- 福利经济学：单人模型和多人模型
|
||||
- 企业理论：单投入品和多投入品模型
|
||||
- 完全竞争市场
|
||||
- 完全垄断、垄断竞争与双寡头垄断
|
||||
- 博弈论
|
||||
- 交换经济与生产经济
|
||||
- 外部性与公共品
|
||||
- 不确定性、期望效用和不对称信息
|
||||
|
||||
[返回](#28)
|
||||
|
||||
|
||||
## 《微观经济学：现代观点》
|
||||
|
||||
<!-- _class: cols2_ol_ci fglass -->
|
||||
|
||||
渲染效果为**有序列表+圆形序号**
|
||||
自定义样式为：`<!-- _class: cols2_ol_ci fglass -->`
|
||||
|
||||
- 偏好和效用
|
||||
- 预算约束和消费者的最优选择
|
||||
- 需求函数
|
||||
- 劳动力和储蓄的供给函数
|
||||
- 福利经济学：单人模型和多人模型
|
||||
- 企业理论：单投入品和多投入品模型
|
||||
- 完全竞争市场
|
||||
- 完全垄断、垄断竞争与双寡头垄断
|
||||
- 博弈论
|
||||
- 交换经济与生产经济
|
||||
- 外部性与公共品
|
||||
- 不确定性、期望效用和不对称信息
|
||||
|
||||
[返回](#28)
|
||||
|
||||
## 《置身事内》
|
||||
|
||||
<!-- _class: cols2_ul_sq fglass -->
|
||||
|
||||
渲染效果为**无序列表+方形序号**
|
||||
自定义样式为：`<!-- _class: cols2_ul_sq fglass -->`
|
||||
|
||||
- 第一章：地方政府的权力与事务
|
||||
- 第二章：财税与政府行为
|
||||
- 第三章：政府投融资与债务
|
||||
- 第四章：工业化中的政府角色
|
||||
- 第五章：城市化与不平衡
|
||||
- 第六章：债务与风险
|
||||
- 第七章：国内国际失衡
|
||||
- 第八章：政府与经济发展
|
||||
|
||||
[返回](#28)
|
||||
|
||||
## 《置身事内》
|
||||
|
||||
<!-- _class: cols2_ul_ci fglass -->
|
||||
|
||||
渲染效果为**无序列表+圆形序号**
|
||||
自定义样式为：`<!-- _class: cols2_ul_ci fglass -->`
|
||||
|
||||
- 第一章：地方政府的权力与事务
|
||||
- 第二章：财税与政府行为
|
||||
- 第三章：政府投融资与债务
|
||||
- 第四章：工业化中的政府角色
|
||||
- 第五章：城市化与不平衡
|
||||
- 第六章：债务与风险
|
||||
- 第七章：国内国际失衡
|
||||
- 第八章：政府与经济发展
|
||||
|
||||
[返回](#28)
|
||||
|
||||
## 《微观经济学：现代观点》
|
||||
|
||||
<!-- _class: col1_ol_sq fglass -->
|
||||
|
||||
渲染效果为**单列+有序列表+方形序号**
|
||||
自定义样式为：`<!-- _class: col1_ul_sq fglass -->`
|
||||
|
||||
- 预算约束和消费者的最优选择
|
||||
- 劳动力和储蓄的供给函数
|
||||
- 福利经济学：单人模型和多人模型
|
||||
- 企业理论：单投入品和多投入品模型
|
||||
- 完全竞争市场
|
||||
- 完全垄断、垄断竞争与双寡头垄断
|
||||
- 交换经济与生产经济
|
||||
- 不确定性、期望效用和不对称信息
|
||||
|
||||
## 《微观经济学：现代观点》
|
||||
|
||||
<!-- _class: col1_ol_ci fglass -->
|
||||
|
||||
渲染效果为**单列+有序列表+圆形序号**
|
||||
自定义样式为：`<!-- _class: col1_ul_ci fglass -->`
|
||||
|
||||
- 预算约束和消费者的最优选择
|
||||
- 劳动力和储蓄的供给函数
|
||||
- 福利经济学：单人模型和多人模型
|
||||
- 企业理论：单投入品和多投入品模型
|
||||
- 完全竞争市场
|
||||
- 完全垄断、垄断竞争与双寡头垄断
|
||||
- 交换经济与生产经济
|
||||
- 不确定性、期望效用和不对称信息
|
||||
|
||||
## 5. 引用、链接和 Callouts
|
||||
|
||||
<!-- _class: trans -->
|
||||
<!-- _footer: "" -->
|
||||
<!-- _paginate: "" -->
|
||||
|
||||
## 5. 引用、链接和 Callouts
|
||||
|
||||
- 引用的呈现效果为：
|
||||
|
||||
> 合成控制法 (Synthetic Control Method) 最早由 Abadie and Gardeazabal (2003) 提出，用来研究西班牙巴斯克地区恐怖活动的经济成本，属于案例研究范畴 (Case Study)。
|
||||
|
||||
- 链接的呈现效果：
|
||||
- [经管数据清洗与 Stata 实战：三大地级市数据库和 CSMAR 上市公司数据](https://mp.weixin.qq.com/s/D0cYVPJJsNiu61GcYwV6cg)
|
||||
- [Stata 基础：从论文文件夹体系的建立说起](https://mp.weixin.qq.com/s?__biz=MzkwOTE3NDExOQ==&mid=2247486489&idx=1&sn=2eb51e85a01541c7a552a9434e087512&scene=21#wechat_redirect)
|
||||
- Callouts 是 Awesome Marp 提供的自定义的样式，有 5 种颜色可选：
|
||||
- [紫色](#40)：`bq-purple`
|
||||
- [蓝色](#41)：`bq-blue`
|
||||
- [绿色](#42)：`bq-green`
|
||||
- [红色](#43)：`bq-red`
|
||||
- [黑色](#44)：`bq-black`
|
||||
|
||||
## 5. 引用、链接和引用盒子
|
||||
|
||||
<!-- _class: bq-purple -->
|
||||
|
||||
- 自定义样式为：`<!-- _class: bq-purple -->`
|
||||
|
||||
> 合成控制法 (Synthetic Control Method)
|
||||
>
|
||||
> SCM 最早由 Abadie and Gardeazabal (2003) 提出，用来研究西班牙巴斯克地区恐怖活动的经济成本，属于案例研究范畴 (Case Study)。Athey & Imbens (2017) 认为它是过去 15 年计量方法领域最重要的创新。<br>
|
||||
> 合成控制法的基本思想是：虽然无法找到巴斯克地区的最佳控制地区，但可对西班牙的若干大城市进行适当的线性组合（赋予不同的权重），以构造一个更为贴切的「合成控制地区」 (Synthetic Control Region)，然后将真实的巴斯克地区与「合成的巴斯克地区」进行对比，即可得到恐袭的影响。
|
||||
|
||||
[返回](#39)
|
||||
|
||||
## 5. 引用、链接和引用盒子
|
||||
|
||||
<!-- _class: bq-blue -->
|
||||
|
||||
- 自定义样式为：`<!-- _class: bq-blue -->`
|
||||
|
||||
> 合成控制法 (Synthetic Control Method)
|
||||
>
|
||||
> SCM 最早由 Abadie and Gardeazabal (2003) 提出，用来研究西班牙巴斯克地区恐怖活动的经济成本，属于案例研究范畴 (Case Study)。Athey & Imbens (2017) 认为它是过去 15 年计量方法领域最重要的创新。<br>
|
||||
> 合成控制法的基本思想是：虽然无法找到巴斯克地区的最佳控制地区，但可对西班牙的若干大城市进行适当的线性组合（赋予不同的权重），以构造一个更为贴切的「合成控制地区」 (Synthetic Control Region)，然后将真实的巴斯克地区与「合成的巴斯克地区」进行对比，即可得到恐袭的影响。
|
||||
|
||||
[返回](#39)
|
||||
|
||||
## 5. 引用、链接和引用盒子
|
||||
|
||||
<!-- _class: bq-green -->
|
||||
|
||||
- 自定义样式为：`<!-- _class: bq-green -->`
|
||||
|
||||
> 合成控制法 (Synthetic Control Method)
|
||||
>
|
||||
> SCM 最早由 Abadie and Gardeazabal (2003) 提出，用来研究西班牙巴斯克地区恐怖活动的经济成本，属于案例研究范畴 (Case Study)。Athey & Imbens (2017) 认为它是过去 15 年计量方法领域最重要的创新。<br>
|
||||
> 合成控制法的基本思想是：虽然无法找到巴斯克地区的最佳控制地区，但可对西班牙的若干大城市进行适当的线性组合（赋予不同的权重），以构造一个更为贴切的「合成控制地区」 (Synthetic Control Region)，然后将真实的巴斯克地区与「合成的巴斯克地区」进行对比，即可得到恐袭的影响。
|
||||
|
||||
[返回](#39)
|
||||
|
||||
## 5. 引用、链接和引用盒子
|
||||
|
||||
<!-- _class: bq-red -->
|
||||
|
||||
- 自定义样式为：`<!-- _class: bq-red -->`
|
||||
|
||||
> 合成控制法 (Synthetic Control Method)
|
||||
>
|
||||
> SCM 最早由 Abadie and Gardeazabal (2003) 提出，用来研究西班牙巴斯克地区恐怖活动的经济成本，属于案例研究范畴 (Case Study)。Athey & Imbens (2017) 认为它是过去 15 年计量方法领域最重要的创新。<br>
|
||||
> 合成控制法的基本思想是：虽然无法找到巴斯克地区的最佳控制地区，但可对西班牙的若干大城市进行适当的线性组合（赋予不同的权重），以构造一个更为贴切的「合成控制地区」 (Synthetic Control Region)，然后将真实的巴斯克地区与「合成的巴斯克地区」进行对比，即可得到恐袭的影响。
|
||||
|
||||
[返回](#39)
|
||||
|
||||
## 5. 引用、链接和引用盒子
|
||||
|
||||
<!-- _class: bq-black -->
|
||||
|
||||
- 自定义样式为：`<!-- _class: bq-black -->`
|
||||
|
||||
> 合成控制法 (Synthetic Control Method)
|
||||
>
|
||||
> SCM 最早由 Abadie and Gardeazabal (2003) 提出，用来研究西班牙巴斯克地区恐怖活动的经济成本，属于案例研究范畴 (Case Study)。Athey & Imbens (2017) 认为它是过去 15 年计量方法领域最重要的创新。<br>
|
||||
> 合成控制法的基本思想是：虽然无法找到巴斯克地区的最佳控制地区，但可对西班牙的若干大城市进行适当的线性组合（赋予不同的权重），以构造一个更为贴切的「合成控制地区」 (Synthetic Control Region)，然后将真实的巴斯克地区与「合成的巴斯克地区」进行对比，即可得到恐袭的影响。
|
||||
|
||||
[返回](#39)
|
||||
|
||||
|
||||
## 6. 导航栏
|
||||
|
||||
<!-- _class: trans -->
|
||||
<!-- _footer: "" -->
|
||||
<!-- _paginate: "" -->
|
||||
|
||||
## 6. 导航栏
|
||||
|
||||
<!-- _class: navbar -->
|
||||
<!-- _header: \ ***@Awesome Marp*** *关于模板* *封面页* *目录页* *分栏与分列* *引用盒子* **导航栏** *基础知识*-->
|
||||
|
||||
- 一句题外话：打造 Awesome Marp 模板的最早初衷就是来自几位公众号粉丝朋友的询问，「Marp 是否也能实现想 Beamer 那样的顶部导航栏？」为了实现导航栏的效果，我又多学了一些 CSS 的知识，这套模板才得以成型
|
||||
|
||||
- 自定义样式为 `navbar`：`<!-- _class: navbar -->`
|
||||
- 导航栏修改自 header，最前面必须加入 `\ `
|
||||
- 当前活动标题，使用粗体 `**粗体**`
|
||||
- 其余非活动标题，使用斜体 `*斜体*`
|
||||
- 如果左侧有文字，需要使用斜粗体 `***粗斜体***`
|
||||
- 默认根据内容自动分配间距，如果希望右对齐，可以手动增加空格的方式来推动右对齐
|
||||
|
||||
|
||||
## 6. 导航栏
|
||||
|
||||
<!-- _header: \ ***@Awesome Marp*** *关于模板* *封面页* *目录页* *分栏与分列* *引用盒子* **导航栏** *基础知识*-->
|
||||
<!-- _class: navbar -->
|
||||
|
||||
这张页面的部分 Markdown 源码：
|
||||
|
||||
```markdown
|
||||
<!-- _class: navbar -->
|
||||
<!-- _header: \ ***虹鹄山庄***
|
||||
|
||||
- 自定义样式为 `navbar`：`<!-- _class: navbar -->`
|
||||
- 导航栏修改自 header，最前面必须加入 `\ `
|
||||
- 当前活动标题：使用粗体 `**粗体**`
|
||||
- 其余非活动标题：使用斜体 `*斜体*`
|
||||
- 如果左侧有文字：使用斜粗体 `***粗斜体***`
|
||||
- 默认根据内容自动分配间距，如果希望右对齐，可以手动增加空格的方式来推动右对齐
|
||||
```
|
||||
|
||||
## 7. 其他自定义样式
|
||||
|
||||
<!-- _class: trans -->
|
||||
<!-- _footer: "" -->
|
||||
<!-- _paginate: "" -->
|
||||
|
||||
|
||||
|
||||
## 7.1 固定标题行：更像 Beamer 了（`fixedtitleA`）
|
||||
|
||||
<!-- _class: fixedtitleA -->
|
||||
|
||||
- 自定义样式：`<!-- _class: fixedtitleA -->`
|
||||
|
||||
- 使当前页面的标题栏固定在顶部，而非随着内容的多少浮动
|
||||
|
||||
- 同时，页面内容也会从顶部起笔，而非垂直方向上居中显示
|
||||
|
||||
|
||||
## 7.1 固定标题行：更像 Beamer 了（`fixedtitleB`）
|
||||
|
||||
<!-- _class: fixedtitleB -->
|
||||
|
||||
|
||||
<div class="div">
|
||||
|
||||
- 自定义样式：`<!-- _class: fixedtitleB -->`
|
||||
|
||||
- `fixedtitleB` 相比于 `fixedtitleA`，标题增加了底色色块，同时缩小了标题大小
|
||||
|
||||
- 其余效果与 `fixedtitleA` 相同
|
||||
|
||||
- 但是页面正文内容需要包裹在 `<div class="div'></div>` 标签中
|
||||
</div>
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: footnote -->
|
||||
|
||||
<div class="tdiv">
|
||||
|
||||
#### 7.2 脚注的自定义样式：`footnote`
|
||||
|
||||
使用方法：
|
||||
|
||||
- 自定义样式：`<!-- _class: footnote -->`
|
||||
- 页面除脚注外的其他内容，写在 `<div class = "tdiv"></div>`
|
||||
- 页面的脚注内容，写在 `<div class = "bdiv"></div>`
|
||||
|
||||
举个例子，展示一下显示效果：
|
||||
|
||||
- 一方面，经济金融化程度的加深，使得金融部门能够凭借资本跨期配置提前抽取其他部门的未来价值，从而扩大金融和非金融部门之间的外部收入差距$^1$。另一方面，经济金融化不断增加企业股东权力，促使企业更加追求股东价值最大化，这一导向将弱化普通劳动者阶层的议价能力，食利者阶层的财产性收入增加必然会挤压劳动收入份额，从而扩大了内部收入差距$^2$。
|
||||
|
||||
</div>
|
||||
|
||||
<div class="bdiv">
|
||||
|
||||
1 张甜迪. 金融化对中国金融、非金融行业收入差距的影响[J]. 经济问题, 2015(11): 40-46.
|
||||
2 Hein E. Finance-dominated capitalism and re-distribution of income: a Kaleckian perspective[J]. Cambridge Journal of Economics, 2015, 39(3): 907-934.
|
||||
</div>
|
||||
|
||||
## 7.3 调节文字大小的自定义样式
|
||||
|
||||
<!-- _class: largetext -->
|
||||
|
||||
对于字体大小的调节，直接修改 CSS 文件应该很方便的。但有小伙伴提出，“希望可以增加字体调节的自定义样式”，于是目前提供了四种微调样式：
|
||||
|
||||
- 自定义样式 1：`<!-- _class: tinytext -->` （是默认字体大小的 0.8 倍）
|
||||
- 自定义样式 2：`<!-- _class: smalltext -->` （是默认字体大小的 0.9 倍）
|
||||
- 自定义样式 3：`<!-- _class: largetext -->` （是默认字体大小的 1.15 倍）
|
||||
- 自定义样式 4：`<!-- _class: hugetext -->` （是默认字体大小的 1.3 倍）
|
||||
|
||||
比如，本页面采用的自定义样式为 `largetext`
|
||||
|
||||
## 7.4 图表标题的自定义样式：`caption`
|
||||
|
||||
<!-- _class: caption -->
|
||||
|
||||
- 通过 `<div class="caption">宇宙的奥妙</div>` 来定义图表的标题
|
||||
|
||||
|
||||
|
||||
<div class="caption">
|
||||
宇宙的奥妙
|
||||
</div>
|
||||
|
||||
|
||||
## 需要知道的基础知识……
|
||||
|
||||
<!-- _class: trans -->
|
||||
<!-- _footer: "" -->
|
||||
<!-- _paginate: "" -->
|
||||
|
||||
|
||||
## Markdown 概览
|
||||
|
||||
<!-- _header: \ ***@Awesome Marp*** *关于模板* *封面页* *目录页* *分栏与分列* *引用盒子* *导航栏* **基础知识**-->
|
||||
<!-- _class: navbar -->
|
||||
|
||||
- Markdown 是一种**极轻量**的文本标记语言，允许人们使用**易读易写**的纯文本格式编写文档，而且对于表格、代码、图片、公式等支持良好
|
||||
- 应用广泛：网站、课程笔记/讲义、演示文稿、撰写学术论文等
|
||||
- Markdown 基础语法：
|
||||
- 参阅：[Markdown 中文文档](https://markdown-zh.readthedocs.io/en/latest/)、[Markdown 指南](https://www.markdown.xyz/)、[Markdown 菜鸟教程](https://www.runoob.com/markdown/md-tutorial.html)
|
||||
- 标题 `#`、粗体 `** **`、斜体 `* *`、删除线 `~~ ~~`、分割线 `---`、超链接 `[]()`
|
||||
- 引用 `>`、列表 `-` / `1. `、代码块
|
||||
- 脚注 `[^1]` / `[^1]:`、待办事项 `[ ]` / `[x]`
|
||||
- Markdown 进阶语法：
|
||||
- 图片 `![]()`：本地路径、网络路径（参阅：[图床与 PicGo——让你爱上记录与分享](https://sspai.com/post/65716)）
|
||||
- 数学公式：行内公式 `$...$`、行间公式 `$$...$$`
|
||||
- 支持 HTML 元素：`<br>`/`<hr>`/`<b></b>`/`<i></i>`/`<kbd></kbd>` 等
|
||||
|
||||
## 推荐的 Markdown 编辑器
|
||||
|
||||
<!-- _class: cols-2-64 navbar -->
|
||||
<!-- _header: \ ***@Awesome Marp*** *关于模板* *封面页* *目录页* *分栏与分列* *引用盒子* *导航栏* **基础知识**-->
|
||||
|
||||
<div class=ldiv>
|
||||
|
||||
**VS Code**
|
||||
- Visual Studio Code[下载地址](https://code.visualstudio.com/Download)
|
||||
- VS Code 插件：
|
||||
- 配合 Markdown：[Markdown Preview Enhanced](https://marketplace.visualstudio.com/items?itemName=shd101wyy.markdown-preview-enhanced)、[Markdown All in One](https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one)
|
||||
- 图床：[PicGo](https://marketplace.visualstudio.com/items?itemName=Spades.vs-picgo)
|
||||
- 格式化文档：[Pangu-Markdown](https://marketplace.visualstudio.com/items?itemName=xlthu.Pangu-Markdown)
|
||||
- Markdown 转 PPT：[Marp for VScode](https://marketplace.visualstudio.com/items?itemName=marp-team.marp-vscode)
|
||||
- Markdown 转思维导图：[Markmap for VScode](https://marketplace.visualstudio.com/items?itemName=gera2ld.markmap-vscode)
|
||||
- 配合 Zotero：[Citation Picker for Zotero](https://marketplace.visualstudio.com/items?itemName=mblode.zotero)、[Pandoc Citer](https://marketplace.visualstudio.com/items?itemName=notZaki.pandocciter)
|
||||
|
||||
</div>
|
||||
|
||||
<div class=rdiv>
|
||||
|
||||
**Obsidian**
|
||||
- [Obsidian 主页](https://obsidian.md/)
|
||||
- 基于 Markdown 的本地知识管理软件
|
||||
- 除官方同步和发布功能外，对个人使用者完全免费
|
||||
- 功能丰富、插件众多、开发社区活跃
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
## Marp 基本用法
|
||||
|
||||
<!-- _header: \ ***@Awesome Marp*** *关于模板* *封面页* *目录页* *分栏与分列* *引用盒子* *导航栏* **基础知识**-->
|
||||
<!-- _class: navbar fixedtitleB -->
|
||||
|
||||
<div class="div">
|
||||
|
||||
- 几个字总结 [Marp](https://marp.app/)：使用 Markdown 创作演示文稿
|
||||
- 来自 Marp 官方网页的一段话：Marp (also known as the Markdown Presentation Ecosystem) provides an intuitive experience for creating beautiful slide decks. You only have to focus on writing your story in a Markdown document.
|
||||
|
||||
- 在 Markdown 文件的顶部 YAML 区域，通过 `marp: true` 启动 Marp，然后即可开启侧边预览，VS Code 界面左边是代码区域，右边为预览区域
|
||||
- 内容遵循 Markdown 语法，但 Marp 增加了一些内置指令，而且指令分为全局指令和[局部指令](https://marpit.marp.app/directives?id=local-directives-1)，全局指令建议放置于 YAML 区，局部指令位于当前页面，不同页面通过 `---` 切分
|
||||
- 推荐阅读：Marpit [官方文档](https://marpit.marp.app)及[中译版](https://caizhiyuan.gitee.io/categories/skills/20200730-marp.html#%E5%8A%9F%E8%83%BD)，五分钟学会 Marp[（上）](https://www.lianxh.cn/news/97fccdca2d7a5.html)、[（下）](https://www.lianxh.cn/news/521900220dd33.html)
|
||||
</div>
|
||||
|
||||
## Marp 基本用法
|
||||
|
||||
<!-- _header: \ ***@Awesome Marp*** *关于模板* *封面页* *目录页* *分栏与分列* *引用盒子* *导航栏* **基础知识**-->
|
||||
<!-- _class: navbar -->
|
||||
|
||||
```yaml
|
||||
---
|
||||
marp: true # 开启 Marp
|
||||
size: 16:9 # 设定页面比例，常见有 16:9 或 4:3，默认为16:9
|
||||
theme: gaia # 切换主题，内置 3 种样式的主题，可以自定义主题
|
||||
paginate: true # 开启页码
|
||||
headingDivider: 2 # 通过二级标题切分页面，省去手动换页的麻烦
|
||||
footer: 初虹 # 设置页脚区域的内容，如果设定页眉的内容，则为 header
|
||||
---
|
||||
```
|
||||
|
||||
- 如果想让页面同时被多个级别的标题切分，比如，以二级~四级标题分割页面，可以 `headingDivider: [2,3,4]`
|
||||
- 想要使得多个自定义样式渲染同一个页面，可直接将不同自定义样式以空格连接，比如：`<!-- _class: cols-2-64 fglass -->`
|
||||
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: lastpage -->
|
||||
<!-- _footer: "" -->
|
||||
|
||||
###### 欢迎交流 ~
|
||||
|
||||
<div class="icons">
|
||||
|
||||
- <i class="fa-solid fa-envelope"></i>
|
||||
- 邮箱：ch2099058972@163.com
|
||||
- <i class="fa-brands fa-weixin"></i>
|
||||
- 微信：favourhong
|
||||
- <i class="fa-solid fa-house"></i>
|
||||
- 公众号：虹鹄山庄
|
||||
|
||||
<div>
|
||||
|
||||
## 创作不易，buy me a coffee 🤙~
|
||||
|
||||
<!-- _class: trans -->
|
||||
<!-- _footer: "" -->
|
||||
<!-- _paginate: "" -->
|
||||
|
||||
<br>
|
||||
|
||||
|
||||
Executable
BIN
Binary file not shown.
Executable
+1032
File diff suppressed because one or more lines are too long
Executable
+942
@@ -0,0 +1,942 @@
|
||||
---
|
||||
marp: true
|
||||
size: 16:9
|
||||
theme: am_green
|
||||
paginate: true
|
||||
headingDivider:
|
||||
- 2
|
||||
- 3
|
||||
footer: \ *初虹（虹鹄山庄）* *Awesome Marp：轻松取代 LaTeX Beamer！* *2024年1月13日（v1.3）*
|
||||
created: 2025-09-09T18:22
|
||||
updated: 2025-09-22T13:27
|
||||
---
|
||||
|
||||
|
||||
<!-- _class: cover_a
|
||||
<!-- _header: "" -->
|
||||
<!-- _footer: "" -->
|
||||
<!-- _paginate: "" -->
|
||||
|
||||
# Awesome Marp：轻松取代 LaTeX Beamer！
|
||||
|
||||
###### “用法简单、功能全面的个性化 PPT 模板”
|
||||
|
||||
@初虹
|
||||
公众号：虹鹄山庄
|
||||
发布时间：2024 年 1 月 13 日（v1.3）
|
||||
<ch2099058972@163.com>
|
||||
Awesome-Marp 地址：[GitHub 库](https://github.com/favourhong/Awesome-Marp)/[Gitee 库](https://gitee.com/favourhong/Awesome-Marp)
|
||||
|
||||
## Awesome Marp 有什么？
|
||||
|
||||
<!-- _class: cols2_ol_ci fglass toc_a -->
|
||||
<!-- _footer: "" -->
|
||||
<!-- _header: "CONTENTS" -->
|
||||
<!-- _paginate: "" -->
|
||||
|
||||
- [关于模板](#3)
|
||||
- [封面页](#10)
|
||||
- [目录页](#16)
|
||||
- [页面分栏与列表分列](#20)
|
||||
- [引用、链接和引用盒子](#38)
|
||||
- [导航栏](#45)
|
||||
- [其他自定义样式](#48)
|
||||
- [需要知道的基础知识](#56)
|
||||
- [最后一页](#59)
|
||||
|
||||
## 1. 关于模板
|
||||
|
||||
<!-- _class: trans -->
|
||||
<!-- _footer: "" -->
|
||||
<!-- _paginate: "" -->
|
||||
|
||||
## 1. 关于模板
|
||||
|
||||
- **开始之前：** 你需要知道这样几个工具，Markdown、Markdown 编辑器（VS Code 或 Obsidian）和 Marp。关于这三者是个啥，我不做详细地介绍，但在[第 55 页](#55)-[第 58 页](#58)会有一些凝练性的内容给你参考，同时我提供了不少的链接，也供你参阅。
|
||||
- **为什么要开发 Awesome Marp？**
|
||||
- Marp 原生仅提供 3 种主题（`default` / `gaia` / `uncover`），呈现效果一般。于是我根据自己的使用情况，边用边改造，陆续打磨了这样的一整套模板。
|
||||
- **目前发布的 v1.3 有 38 个自定义样式、6 种颜色的主题**（后面有呈现效果）
|
||||
- **Awesome Marp 的几个特色：**
|
||||
- 支持分栏呈现、支持 Callouts（类似于 Beamer 中的定理框）、提供多种类型的封面页和目录页、可以实现导航进度栏、图片支持自定义居中/居左/居右对齐等
|
||||
|
||||
- 本着「开箱即用」的原则，我将本项目文件夹打包上传到了[GitHub](https://github.com/favourhong/Awesome-Marp) 和 [Gitee](https://gitee.com/favourhong/Awesome-Marp)
|
||||
- 用到的工具：软件 [Visual Studio Code](https://code.visualstudio.com) 或 [Obsidian](https://obsidian.md/)、[Marp for VScode（插件）](https://marketplace.visualstudio.com/items?itemName=marp-team.marp-vscode)
|
||||
|
||||
## 1. 关于模板
|
||||
|
||||
|
||||
- Awesome Marp 支持 38 个自定义样式，使用时需在页面指定（如 `<!-- _class: trans -->`）：
|
||||
|
||||
| 封面页 | 目录页 | 列表 | 引用盒子 | 其他 1 | 其他 2 |
|
||||
| --------- | ------- | ----------- | ----------- | ----------------------------- | --------------------------------------------------------------- |
|
||||
| `cover_a` | `toc_a` | `cols-2` | `bq-black` | 过渡页面 `trans` | 图表等的标题 `caption` |
|
||||
| `cover_b` | `toc_b` | `cols-2-64` | `bq-purple` | 最后一页 `lastpage` | 非嵌套无序列表的毛玻璃效果 `fglass` |
|
||||
| `cover_c` | | `cols-2-73` | `bq-red` | 导航栏 `navbar` | 脚注：`footnote` |
|
||||
| `cover_d` | | `cols-3` | `bq-blue` | 标题固定+无底色 `fixedtitleA` | 调节字体大小：`tinytext`/`smalltext`/<br>`largetext`/`hugetext` |
|
||||
| `cover_e` | | `cols-2-46` | `bq-green` | 标题固定+有底色 `fixedtitleB` | |
|
||||
| | | `cols-2-37` | | 两列有序列表 `cols2_ol_sq/ci` | |
|
||||
| | | `rows-2` | | 两列无序列表 `cols_ul_sq/ci` | |
|
||||
| | | `pin-3` | | 单列有序列表 `col1_ul_sq/ci` | |
|
||||
|
||||
|
||||
## 1. 关于模板
|
||||
|
||||
|
||||
- Awesome Marp 的主题色（6 种），可在 YAML 区切换 Theme，如 `theme: am_dark`：
|
||||
|
||||
| 深色 | 绿色 | 红色 | 蓝色 | 棕色 | 紫色
|
||||
|---------|----------|--------|---------|----------|----|
|
||||
| `am_dark` | `am_green` | `am_red` | `am_blue` | `am_brown` |`am_purple`|
|
||||
|
||||
|
||||
## 1. 关于模板
|
||||
|
||||
- 如何使用：
|
||||
- **搭配 VS Code**：直接使用 VS Code 打开 `Awesome-Marp` 文件夹
|
||||
- 如果你想「拿来即用」，直接根据我分享的 Markdown 源码文件，对照修改就好了~
|
||||
- 如果你对部分效果不满意、期望简单微调的话，目前在 `Awesome-Marp/themes` 下有 6 个 CSS 文件，这些 CSS 文件决定了 Markdown 源码的最终渲染效果，可以试着改一改~
|
||||
- 如果你能够自行定制个性化 CSS 文件，渲染前，别忘在 `Awesome-Marp/.vscode/settings.json` 里加上你的 CSS 文件路径~
|
||||
- **搭配 Obsidian**：安装 [Marp Slides 插件](https://github.com/samuele-cozzi/obsidian-marp-slides)，并配置相应 CSS 路径
|
||||
|
||||
- 字体：因担心版权问题，需自行下载字体并安装，Awesome Marp 用到的字体有：
|
||||
- 正文字体：`Latin Modern Math`、`方正宋刻本秀楷简体`，如果未安装，默认将使用 `Calibri` 和 `楷体`
|
||||
- 标题字体：`Optima LT Medium`、`方正苏新诗柳楷简体`，如果未安装，默认将使用 `Arial` 和 `黑体`
|
||||
- 脚注字体：`Charm` 和 `叶根友毛笔行书修正版`，如果未安装，默认将使用 `Calibri` 和 `楷体`
|
||||
- 代码字体：`Fira Code` 和 `霞鹜文楷等宽`，如果未安装，默认将使用 `Consolas` 和 `华文中宋`
|
||||
|
||||
## 1. 关于模板：更新日志
|
||||
|
||||
- [Awesome Marp v1.0：我开发了一整套 Marp 主题，Markdown 转换的 PPT 也可以很好看！](https://mp.weixin.qq.com/s?__biz=MzkwOTE3NDExOQ==&mid=2247486787&idx=1&sn=2652ddae81f50240844cb652780912e1&chksm=c13ff94bf648705da1ba986b91265e3ff018acaffcfa60d7807a81be22176005e7a2b4483627&scene=178&cur_album_id=3132459596339757070#rd)
|
||||
- [Awesome Marp v1.1：标题行不随正文浮动，这下更像 Beamer 了！](https://mp.weixin.qq.com/s?__biz=MzkwOTE3NDExOQ==&mid=2247486800&idx=1&sn=527348e242576079e4bd6cd1823c823a&chksm=c13ff958f648704e40a202db6ad5fa215ef4c189d66403e161d6ace9828406a8747ac755684f&scene=178&cur_album_id=3132459596339757070#rd)
|
||||
- [Awesome Marp v1.2：增加脚注、调节字体大小等样式～](https://mp.weixin.qq.com/s?__biz=MzkwOTE3NDExOQ==&mid=2247486825&idx=1&sn=56d632ce164831438ec87c1b20ed4c4c&chksm=c13ff961f64870774f069ab816340783d8f54fd6b89363b8d9412c593efc640851ce9edd8833&scene=178&cur_album_id=3132459596339757070#rd)
|
||||
- [Awesome Marp v1.3：几处小更新～](https://mp.weixin.qq.com/s?__biz=MzkwOTE3NDExOQ==&mid=2247486869&idx=1&sn=fcc377ff6a5930436e5078a09d53f0ab&chksm=c13ff99df648708b89bafba030b27909d0022279e26da723ca54a1666fe55f50a4230f050662&scene=178&cur_album_id=3132459596339757070#rd)
|
||||
|
||||
|
||||
## 下面让我们看看效果吧 ~
|
||||
|
||||
<!-- _class: trans -->
|
||||
<!-- _footer: "" -->
|
||||
<!-- _paginate: "" -->
|
||||
|
||||
## 2. 封面页
|
||||
|
||||
<!-- _class: trans -->
|
||||
<!-- _footer: "" -->
|
||||
<!-- _paginate: "" -->
|
||||
|
||||
## 2. 封面页
|
||||
|
||||
- 大标题：采用一级标题 `# ` （如：`# Awesome Marp：自定义 Marp 主题`）
|
||||
- 副标题：采用六级标题 `###### ` （如：`###### 打造简便又不失个性的演示文稿`）
|
||||
- 本套模板提供 5 种封面页样式，使用时需要在页面中设定局部指令，如：`<!-- _class: cover_a -->`
|
||||
- `cover_a`：[第 1 种](#1)
|
||||
- `cover_b`：[第 2 种](#12)
|
||||
- `cover_c`：预留 header 可设定学校 logo，footer 可设定校训 [第 3 种](#13)
|
||||
- `cover_d`：只预留了 footer 设定校训 [第 4 种](#14)
|
||||
- `cover_e`：预留 header 设定学校 logo，footer 设定学校 logo 和学校名称[第 5 种](#15)
|
||||
|
||||
- 如果已经设定了全局 footer、header 或页码，但又不期望在封面页中出现，可以 `<!-- _footer: "" -->` / `<!-- _header: "" -->` / `<!-- _paginate: "" -->` 分别将其局部隐藏起来
|
||||
- 当标题文字超过页面宽度会溢出换行，这里可以使用 `<!-- fit -->` 根据页面宽度自动调整文字大小
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: cover_b -->
|
||||
<!-- _header: "" -->
|
||||
<!-- _footer: "" -->
|
||||
<!-- _paginate: "" -->
|
||||
|
||||
# Awesome Marp：轻松取代 LaTeX Beamer！
|
||||
|
||||
###### “用法简单、功能全面的个性化 PPT 模板”
|
||||
|
||||
@初虹
|
||||
公众号：虹鹄山庄
|
||||
发布时间：2024 年 1 月 13 日（v1.3）
|
||||
<ch2099058972@163.com>
|
||||
Awesome-Marp 地址：[GitHub 库](https://github.com/favourhong/Awesome-Marp)/[Gitee 库](https://gitee.com/favourhong/Awesome-Marp)
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: cover_c -->
|
||||
<!-- _paginate: "" -->
|
||||
<!-- _footer: 厚德博学 经济匡时 -->
|
||||
<!-- _header:  -->
|
||||
|
||||
|
||||
# <!-- fit -->Awesome Marp：轻松取代 LaTeX Beamer！
|
||||
|
||||
###### “用法简单、功能全面的个性化 PPT 模板”
|
||||
|
||||
@初虹
|
||||
公众号：虹鹄山庄
|
||||
发布时间：2024 年 1 月 13 日（v1.3）
|
||||
<ch2099058972@163.com>
|
||||
Awesome-Marp 地址：[GitHub 库](https://github.com/favourhong/Awesome-Marp)/[Gitee 库](https://gitee.com/favourhong/Awesome-Marp)
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: cover_d -->
|
||||
<!-- _paginate: "" -->
|
||||
<!-- _footer: "厚德博学 经济匡时" -->
|
||||
|
||||
# <!-- fit -->Awesome Marp：轻松取代 LaTeX Beamer！
|
||||
|
||||
###### “用法简单、功能全面的个性化 PPT 模板”
|
||||
|
||||
@初虹
|
||||
公众号：虹鹄山庄
|
||||
发布时间：2024 年 1 月 13 日（v1.3）
|
||||
<ch2099058972@163.com>
|
||||
Awesome-Marp 地址：[GitHub 库](https://github.com/favourhong/Awesome-Marp)/[Gitee 库](https://gitee.com/favourhong/Awesome-Marp)
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: cover_e -->
|
||||
<!-- _paginate: "" -->
|
||||
<!-- _footer:  -->
|
||||
<!-- _header:  -->
|
||||
|
||||
|
||||
# <!-- fit -->Awesome Marp：轻松取代 LaTeX Beamer！
|
||||
|
||||
###### “用法简单、功能全面的个性化 PPT 模板”
|
||||
|
||||
@初虹
|
||||
公众号：虹鹄山庄
|
||||
发布时间：2024 年 1 月 13 日（v1.3）
|
||||
<ch2099058972@163.com>
|
||||
Awesome-Marp 地址：[GitHub 库](https://github.com/favourhong/Awesome-Marp)/[Gitee 库](https://gitee.com/favourhong/Awesome-Marp)
|
||||
|
||||
## 3. 目录页
|
||||
|
||||
<!-- _class: trans -->
|
||||
<!-- _footer: "" -->
|
||||
<!-- _paginate: "" -->
|
||||
|
||||
## 3. 目录页
|
||||
|
||||
- Awesome Marp 提供了至少 2 种目录页样式，使用时同样需要设定局部样式
|
||||
- `toc_a`：需要将 header 的内容设定为 `CONTENTS`，即 `<!-- _header: "CONTENTS" -->`
|
||||
- `toc_b`：需要将 header 的内容设定为 `目录<br>CONTENTS<br>你的LOGO地址`，即 `<!-- _header: 目录<br>CONTENTS<br>-->`
|
||||
- 提供的几种分栏列表样式，也可以作为目录页使用，如 `<!-- _class: cols2_ol_ci fglass -->`（效果见[这里](#32)）
|
||||
|
||||
- 类似地，如果已经定义了全局 footer 或页码，可以使用 `<!-- _footer: "" -->` / `<!-- _paginate: "" -->` 分别将其局部隐藏起来
|
||||
- 目录页样式：[第 1 种](#2)、[第 2 种](#18)和[第 3 种](#19)
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: toc_a -->
|
||||
<!-- _header: "CONTENTS" -->
|
||||
<!-- _footer: "" -->
|
||||
<!-- _paginate: "" -->
|
||||
|
||||
- [关于模板](#3)
|
||||
- [封面页](#10)
|
||||
- [目录页](#16)
|
||||
- [页面分栏与列表分列](#20)
|
||||
- [引用、链接和引用盒子](#38)
|
||||
- [导航栏](#45)
|
||||
- [其他自定义样式](#48)
|
||||
- [需要知道的基础知识](#56)
|
||||
- [最后一页](#59)
|
||||
|
||||
---
|
||||
|
||||
<!-- _header: 目录<br>CONTENTS<br>-->
|
||||
<!-- _class: toc_b -->
|
||||
<!-- _footer: "" -->
|
||||
<!-- _paginate: "" -->
|
||||
|
||||
- [关于模板](#3)
|
||||
- [封面页](#10)
|
||||
- [目录页](#16)
|
||||
- [页面分栏与列表分列](#20)
|
||||
- [引用、链接和引用盒子](#38)
|
||||
- [导航栏](#45)
|
||||
- [其他自定义样式](#48)
|
||||
- [需要知道的基础知识](#56)
|
||||
- [最后一页](#59)
|
||||
|
||||
|
||||
## 4. 页面分栏与列表分列
|
||||
|
||||
<!-- _class: trans -->
|
||||
<!-- _footer: "" -->
|
||||
<!-- _paginate: "" -->
|
||||
|
||||
## 4.1 页面分栏与列表分列：页面分栏
|
||||
|
||||
- Awesome Marp 提供了 8 种页面分栏方式，分别为：
|
||||
- `cols-2`：[两列分栏，五五平分](#23)
|
||||
- `cols-2-64`：[两列分栏，六四分](#24)
|
||||
- `cols-2-73`：[两列分栏，七三分](#25)
|
||||
- `cols-2-46`：[两列分栏，四六分](#26)
|
||||
- `cols-2-37`：[两列分栏，三七分](#27)
|
||||
- `cols-3`：[三列分栏，平分](#28)
|
||||
- `rows-2`：[两行分栏](#29)
|
||||
- `pin-3`：[品字型分栏](#30)
|
||||
|
||||
- 如果某一栏为图片，可以将 `class=ldiv` 换成 `class=limg`，这样能够实现图片的垂直居中对齐呢（`class=ldiv` 为居上对齐）
|
||||
|
||||
|
||||
## 4.1 页面分栏与列表分列：页面分栏
|
||||
|
||||
- 以 `<!-- _class: cols-2 -->` 为例，Markdown 的源码为：
|
||||
|
||||
```markdown
|
||||
<!-- _class: cols-2 -->
|
||||
<div class=ldiv>
|
||||
|
||||
第一列（左侧栏）的内容在这里
|
||||
|
||||
内容可以是普通纯文本，可以是列表，也可以是引用块、链接、图片等
|
||||
</div>
|
||||
|
||||
<div class=rdiv>
|
||||
|
||||
第二列（右侧栏）的内容在这里
|
||||
</div>
|
||||
```
|
||||
|
||||
- 如果是分三栏（`<!-- _class: cols-3 -->`），还需要再增加 `<div class="mdiv"></div>` 标签
|
||||
|
||||
|
||||
## 《荷塘月色》（两栏五五分）
|
||||
|
||||
<!-- _class: cols-2 -->
|
||||
|
||||
<div class=ldiv>
|
||||
|
||||
曲曲折折的荷塘上面，弥望的是田田的叶子。叶子出水很高，像亭亭的舞女的裙。
|
||||
|
||||
层层的叶子中间，零星地点缀着些白花，有袅娜地开着的，有羞涩地打着朵儿的；正如一粒粒的明珠，又如碧天里的星星，又如刚出浴的美人。
|
||||
|
||||
微风过处，送来缕缕清香，仿佛远处高楼上渺茫的歌声似的。这时候叶子与花也有一丝的颤动，像闪电般，霎时传过荷塘的那边去了。
|
||||
|
||||
叶子本是肩并肩密密地挨着，这便宛然有了一道凝碧的波痕。叶子底下是脉脉的流水，遮住了，不能见一些颜色；而叶子却更见风致了。
|
||||
|
||||
—— 朱自清《荷塘月色》 [返回](#21)
|
||||
</div>
|
||||
|
||||
<div class=rimg>
|
||||
|
||||
<!--  -->
|
||||
|
||||
</div>
|
||||
|
||||
## 《春》（两栏六四分）
|
||||
|
||||
<!-- _class: cols-2-64 -->
|
||||
|
||||
<div class=limg>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class=rdiv>
|
||||
|
||||
盼望着，盼望着，东风来了，春天的脚步近了。
|
||||
|
||||
一切都像刚睡醒的样子，欣欣然张开了眼。山朗润起来了，水涨起来了，太阳的脸红起来了。
|
||||
|
||||
小草偷偷地从土里钻出来，嫩嫩的，绿绿的。园子里，田野里，瞧去，一大片一大片满是的。坐着，躺着，打两个滚，踢几脚球，赛几趟跑，捉几回迷藏。风轻悄悄的，草软绵绵的。
|
||||
|
||||
—— 朱自清《春》
|
||||
|
||||
[返回](#21)
|
||||
</div>
|
||||
|
||||
## 经典散文诗篇（两栏七三分）
|
||||
|
||||
<!-- _class: cols-2-73 -->
|
||||
|
||||
<div class=limg>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class=rdiv>
|
||||
|
||||
经典的散文诗篇有：
|
||||
|
||||
- 朱自清：《荷塘月色》
|
||||
- 林清玄：《月到天心》
|
||||
- 郁达夫：《古都的秋》
|
||||
- 张爱玲：《花落的声音》
|
||||
- 余光中：《听听那冷雨》
|
||||
- 张抗抗：《牡丹的拒绝》
|
||||
- 丰子恺：《杨柳》
|
||||
- 周作人：《乌篷船》
|
||||
- 郑振铎：《石湖》
|
||||
- 梁实秋：《雅舍》
|
||||
|
||||
[返回](#21)
|
||||
</div>
|
||||
|
||||
## 《春》（两栏四六分）
|
||||
|
||||
<!-- _class: cols-2-46 -->
|
||||
|
||||
<div class=ldiv>
|
||||
|
||||
|
||||
盼望着，盼望着，东风来了，春天的脚步近了。
|
||||
|
||||
一切都像刚睡醒的样子，欣欣然张开了眼。山朗润起来了，水涨起来了，太阳的脸红起来了。
|
||||
|
||||
小草偷偷地从土里钻出来，嫩嫩的，绿绿的。园子里，田野里，瞧去，一大片一大片满是的。坐着，躺着，打两个滚，踢几脚球，赛几趟跑，捉几回迷藏。风轻悄悄的，草软绵绵的。
|
||||
|
||||
—— 朱自清《春》
|
||||
|
||||
[返回](#21)
|
||||
</div>
|
||||
|
||||
<div class=rimg>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
## 经典散文诗篇（两栏三七分）
|
||||
|
||||
<!-- _class: cols-2-37 -->
|
||||
|
||||
<div class=ldiv>
|
||||
|
||||
|
||||
经典的散文诗篇有：
|
||||
|
||||
- 朱自清：《荷塘月色》
|
||||
- 林清玄：《月到天心》
|
||||
- 郁达夫：《古都的秋》
|
||||
- 张爱玲：《花落的声音》
|
||||
- 余光中：《听听那冷雨》
|
||||
- 张抗抗：《牡丹的拒绝》
|
||||
- 丰子恺：《杨柳》
|
||||
- 周作人：《乌篷船》
|
||||
- 郑振铎：《石湖》
|
||||
- 梁实秋：《雅舍》
|
||||
|
||||
[返回](#21)
|
||||
</div>
|
||||
|
||||
<div class=rimg>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
## 夏与秋（三栏三平分）
|
||||
|
||||
<!-- _class: cols-3 -->
|
||||
|
||||
<div class=ldiv>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class=mdiv>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class=rdiv>
|
||||
|
||||
|
||||
|
||||
[返回](#21)
|
||||
</div>
|
||||
|
||||
|
||||
## 高山与沙漠（两行分栏）
|
||||
|
||||
<!-- _class: rows-2 -->
|
||||
|
||||
<div class="timg">
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="bimg">
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
## 《宇宙的奥秘》（品字型分栏）
|
||||
|
||||
<!-- _class: pin-3 -->
|
||||
|
||||
<div class="tdiv">
|
||||
|
||||
> 四百年前，两位截然不同的科学家突破了当时已知世界的边界。1609 年在威尼斯，伽利略・伽利雷透过望远镜观察星辰，并制作仪器和进行实验。在布拉格，科班出身的神学家约翰内斯・开普勒发现了行星运动定律，奠定了近代天体物理学的基础，并思考着宇宙的宏伟构造。托马斯・德・帕多瓦以至今较少受到关注却扣人心弦的通信往来为基础，讲述了这两位类型如此迥异的学者之间不对等的关系，以及他们如何在同样的时刻却以各自的方式探索星辰的奥秘。在彼此的鉴照下，他们的远见与固执、睿智与无知得以呈现。这是一部介绍新科学的崛起以及近代来临之际的巨大变革的作品。 ——《宇宙的奥妙》
|
||||
</div>
|
||||
|
||||
<div class="limg">
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="rimg">
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
## 4.2 页面分栏与列表分列：列表分列
|
||||
|
||||
Awesome Marp v1.3 提供了 6 种列表分列的方式，分别为：
|
||||
|
||||
- `cols2_ol_sq`：呈现效果为[有序列表 + 方形序号](#32)
|
||||
- `cols2_ol_ci`：呈现效果为[有序列表 + 圆形序号](#33)
|
||||
- `cols2_ul_sq`：呈现效果为[无序列表 + 方形序号](#34)
|
||||
- `cols2_ul_ci`：呈现效果为[无序列表 + 圆形序号](#35)
|
||||
- `col1_ul_sq`：呈现效果为[有序列表 + 方形序号](#36)
|
||||
- `col1_ul_ci`：呈现效应为[有序列表 + 圆形序号](#37)
|
||||
|
||||
|
||||
## 《微观经济学：现代观点》
|
||||
|
||||
<!-- _class: cols2_ol_sq fglass -->
|
||||
|
||||
渲染效果为**有序列表+方形序号**
|
||||
自定义样式为：`<!-- _class: cols2_ol_sq fglass -->`
|
||||
|
||||
- 偏好和效用
|
||||
- 预算约束和消费者的最优选择
|
||||
- 需求函数
|
||||
- 劳动力和储蓄的供给函数
|
||||
- 福利经济学：单人模型和多人模型
|
||||
- 企业理论：单投入品和多投入品模型
|
||||
- 完全竞争市场
|
||||
- 完全垄断、垄断竞争与双寡头垄断
|
||||
- 博弈论
|
||||
- 交换经济与生产经济
|
||||
- 外部性与公共品
|
||||
- 不确定性、期望效用和不对称信息
|
||||
|
||||
[返回](#28)
|
||||
|
||||
|
||||
## 《微观经济学：现代观点》
|
||||
|
||||
<!-- _class: cols2_ol_ci fglass -->
|
||||
|
||||
渲染效果为**有序列表+圆形序号**
|
||||
自定义样式为：`<!-- _class: cols2_ol_ci fglass -->`
|
||||
|
||||
- 偏好和效用
|
||||
- 预算约束和消费者的最优选择
|
||||
- 需求函数
|
||||
- 劳动力和储蓄的供给函数
|
||||
- 福利经济学：单人模型和多人模型
|
||||
- 企业理论：单投入品和多投入品模型
|
||||
- 完全竞争市场
|
||||
- 完全垄断、垄断竞争与双寡头垄断
|
||||
- 博弈论
|
||||
- 交换经济与生产经济
|
||||
- 外部性与公共品
|
||||
- 不确定性、期望效用和不对称信息
|
||||
|
||||
[返回](#28)
|
||||
|
||||
## 《置身事内》
|
||||
|
||||
<!-- _class: cols2_ul_sq fglass -->
|
||||
|
||||
渲染效果为**无序列表+方形序号**
|
||||
自定义样式为：`<!-- _class: cols2_ul_sq fglass -->`
|
||||
|
||||
- 第一章：地方政府的权力与事务
|
||||
- 第二章：财税与政府行为
|
||||
- 第三章：政府投融资与债务
|
||||
- 第四章：工业化中的政府角色
|
||||
- 第五章：城市化与不平衡
|
||||
- 第六章：债务与风险
|
||||
- 第七章：国内国际失衡
|
||||
- 第八章：政府与经济发展
|
||||
|
||||
[返回](#28)
|
||||
|
||||
## 《置身事内》
|
||||
|
||||
<!-- _class: cols2_ul_ci fglass -->
|
||||
|
||||
渲染效果为**无序列表+圆形序号**
|
||||
自定义样式为：`<!-- _class: cols2_ul_ci fglass -->`
|
||||
|
||||
- 第一章：地方政府的权力与事务
|
||||
- 第二章：财税与政府行为
|
||||
- 第三章：政府投融资与债务
|
||||
- 第四章：工业化中的政府角色
|
||||
- 第五章：城市化与不平衡
|
||||
- 第六章：债务与风险
|
||||
- 第七章：国内国际失衡
|
||||
- 第八章：政府与经济发展
|
||||
|
||||
[返回](#28)
|
||||
|
||||
## 《微观经济学：现代观点》
|
||||
|
||||
<!-- _class: col1_ol_sq fglass -->
|
||||
|
||||
渲染效果为**单列+有序列表+方形序号**
|
||||
自定义样式为：`<!-- _class: col1_ul_sq fglass -->`
|
||||
|
||||
- 预算约束和消费者的最优选择
|
||||
- 劳动力和储蓄的供给函数
|
||||
- 福利经济学：单人模型和多人模型
|
||||
- 企业理论：单投入品和多投入品模型
|
||||
- 完全竞争市场
|
||||
- 完全垄断、垄断竞争与双寡头垄断
|
||||
- 交换经济与生产经济
|
||||
- 不确定性、期望效用和不对称信息
|
||||
|
||||
## 《微观经济学：现代观点》
|
||||
|
||||
<!-- _class: col1_ol_ci fglass -->
|
||||
|
||||
渲染效果为**单列+有序列表+圆形序号**
|
||||
自定义样式为：`<!-- _class: col1_ul_ci fglass -->`
|
||||
|
||||
- 预算约束和消费者的最优选择
|
||||
- 劳动力和储蓄的供给函数
|
||||
- 福利经济学：单人模型和多人模型
|
||||
- 企业理论：单投入品和多投入品模型
|
||||
- 完全竞争市场
|
||||
- 完全垄断、垄断竞争与双寡头垄断
|
||||
- 交换经济与生产经济
|
||||
- 不确定性、期望效用和不对称信息
|
||||
|
||||
## 5. 引用、链接和 Callouts
|
||||
|
||||
<!-- _class: trans -->
|
||||
<!-- _footer: "" -->
|
||||
<!-- _paginate: "" -->
|
||||
|
||||
## 5. 引用、链接和 Callouts
|
||||
|
||||
- 引用的呈现效果为：
|
||||
|
||||
> 合成控制法 (Synthetic Control Method) 最早由 Abadie and Gardeazabal (2003) 提出，用来研究西班牙巴斯克地区恐怖活动的经济成本，属于案例研究范畴 (Case Study)。
|
||||
|
||||
- 链接的呈现效果：
|
||||
- [经管数据清洗与 Stata 实战：三大地级市数据库和 CSMAR 上市公司数据](https://mp.weixin.qq.com/s/D0cYVPJJsNiu61GcYwV6cg)
|
||||
- [Stata 基础：从论文文件夹体系的建立说起](https://mp.weixin.qq.com/s?__biz=MzkwOTE3NDExOQ==&mid=2247486489&idx=1&sn=2eb51e85a01541c7a552a9434e087512&scene=21#wechat_redirect)
|
||||
- Callouts 是 Awesome Marp 提供的自定义的样式，有 5 种颜色可选：
|
||||
- [紫色](#40)：`bq-purple`
|
||||
- [蓝色](#41)：`bq-blue`
|
||||
- [绿色](#42)：`bq-green`
|
||||
- [红色](#43)：`bq-red`
|
||||
- [黑色](#44)：`bq-black`
|
||||
|
||||
## 5. 引用、链接和引用盒子
|
||||
|
||||
<!-- _class: bq-purple -->
|
||||
|
||||
- 自定义样式为：`<!-- _class: bq-purple -->`
|
||||
|
||||
> 合成控制法 (Synthetic Control Method)
|
||||
>
|
||||
> SCM 最早由 Abadie and Gardeazabal (2003) 提出，用来研究西班牙巴斯克地区恐怖活动的经济成本，属于案例研究范畴 (Case Study)。Athey & Imbens (2017) 认为它是过去 15 年计量方法领域最重要的创新。<br>
|
||||
> 合成控制法的基本思想是：虽然无法找到巴斯克地区的最佳控制地区，但可对西班牙的若干大城市进行适当的线性组合（赋予不同的权重），以构造一个更为贴切的「合成控制地区」 (Synthetic Control Region)，然后将真实的巴斯克地区与「合成的巴斯克地区」进行对比，即可得到恐袭的影响。
|
||||
|
||||
[返回](#39)
|
||||
|
||||
## 5. 引用、链接和引用盒子
|
||||
|
||||
<!-- _class: bq-blue -->
|
||||
|
||||
- 自定义样式为：`<!-- _class: bq-blue -->`
|
||||
|
||||
> 合成控制法 (Synthetic Control Method)
|
||||
>
|
||||
> SCM 最早由 Abadie and Gardeazabal (2003) 提出，用来研究西班牙巴斯克地区恐怖活动的经济成本，属于案例研究范畴 (Case Study)。Athey & Imbens (2017) 认为它是过去 15 年计量方法领域最重要的创新。<br>
|
||||
> 合成控制法的基本思想是：虽然无法找到巴斯克地区的最佳控制地区，但可对西班牙的若干大城市进行适当的线性组合（赋予不同的权重），以构造一个更为贴切的「合成控制地区」 (Synthetic Control Region)，然后将真实的巴斯克地区与「合成的巴斯克地区」进行对比，即可得到恐袭的影响。
|
||||
|
||||
[返回](#39)
|
||||
|
||||
## 5. 引用、链接和引用盒子
|
||||
|
||||
<!-- _class: bq-green -->
|
||||
|
||||
- 自定义样式为：`<!-- _class: bq-green -->`
|
||||
|
||||
> 合成控制法 (Synthetic Control Method)
|
||||
>
|
||||
> SCM 最早由 Abadie and Gardeazabal (2003) 提出，用来研究西班牙巴斯克地区恐怖活动的经济成本，属于案例研究范畴 (Case Study)。Athey & Imbens (2017) 认为它是过去 15 年计量方法领域最重要的创新。<br>
|
||||
> 合成控制法的基本思想是：虽然无法找到巴斯克地区的最佳控制地区，但可对西班牙的若干大城市进行适当的线性组合（赋予不同的权重），以构造一个更为贴切的「合成控制地区」 (Synthetic Control Region)，然后将真实的巴斯克地区与「合成的巴斯克地区」进行对比，即可得到恐袭的影响。
|
||||
|
||||
[返回](#39)
|
||||
|
||||
## 5. 引用、链接和引用盒子
|
||||
|
||||
<!-- _class: bq-red -->
|
||||
|
||||
- 自定义样式为：`<!-- _class: bq-red -->`
|
||||
|
||||
> 合成控制法 (Synthetic Control Method)
|
||||
>
|
||||
> SCM 最早由 Abadie and Gardeazabal (2003) 提出，用来研究西班牙巴斯克地区恐怖活动的经济成本，属于案例研究范畴 (Case Study)。Athey & Imbens (2017) 认为它是过去 15 年计量方法领域最重要的创新。<br>
|
||||
> 合成控制法的基本思想是：虽然无法找到巴斯克地区的最佳控制地区，但可对西班牙的若干大城市进行适当的线性组合（赋予不同的权重），以构造一个更为贴切的「合成控制地区」 (Synthetic Control Region)，然后将真实的巴斯克地区与「合成的巴斯克地区」进行对比，即可得到恐袭的影响。
|
||||
|
||||
[返回](#39)
|
||||
|
||||
## 5. 引用、链接和引用盒子
|
||||
|
||||
<!-- _class: bq-black -->
|
||||
|
||||
- 自定义样式为：`<!-- _class: bq-black -->`
|
||||
|
||||
> 合成控制法 (Synthetic Control Method)
|
||||
>
|
||||
> SCM 最早由 Abadie and Gardeazabal (2003) 提出，用来研究西班牙巴斯克地区恐怖活动的经济成本，属于案例研究范畴 (Case Study)。Athey & Imbens (2017) 认为它是过去 15 年计量方法领域最重要的创新。<br>
|
||||
> 合成控制法的基本思想是：虽然无法找到巴斯克地区的最佳控制地区，但可对西班牙的若干大城市进行适当的线性组合（赋予不同的权重），以构造一个更为贴切的「合成控制地区」 (Synthetic Control Region)，然后将真实的巴斯克地区与「合成的巴斯克地区」进行对比，即可得到恐袭的影响。
|
||||
|
||||
[返回](#39)
|
||||
|
||||
|
||||
## 6. 导航栏
|
||||
|
||||
<!-- _class: trans -->
|
||||
<!-- _footer: "" -->
|
||||
<!-- _paginate: "" -->
|
||||
|
||||
## 6. 导航栏
|
||||
|
||||
<!-- _class: navbar -->
|
||||
<!-- _header: \ ***@Awesome Marp*** *关于模板* *封面页* *目录页* *分栏与分列* *引用盒子* **导航栏** *基础知识*-->
|
||||
|
||||
- 一句题外话：打造 Awesome Marp 模板的最早初衷就是来自几位公众号粉丝朋友的询问，「Marp 是否也能实现想 Beamer 那样的顶部导航栏？」为了实现导航栏的效果，我又多学了一些 CSS 的知识，这套模板才得以成型
|
||||
|
||||
- 自定义样式为 `navbar`：`<!-- _class: navbar -->`
|
||||
- 导航栏修改自 header，最前面必须加入 `\ `
|
||||
- 当前活动标题，使用粗体 `**粗体**`
|
||||
- 其余非活动标题，使用斜体 `*斜体*`
|
||||
- 如果左侧有文字，需要使用斜粗体 `***粗斜体***`
|
||||
- 默认根据内容自动分配间距，如果希望右对齐，可以手动增加空格的方式来推动右对齐
|
||||
|
||||
|
||||
## 6. 导航栏
|
||||
|
||||
<!-- _header: \ ***@Awesome Marp*** *关于模板* *封面页* *目录页* *分栏与分列* *引用盒子* **导航栏** *基础知识*-->
|
||||
<!-- _class: navbar -->
|
||||
|
||||
这张页面的部分 Markdown 源码：
|
||||
|
||||
```markdown
|
||||
<!-- _class: navbar -->
|
||||
<!-- _header: \ ***虹鹄山庄***
|
||||
|
||||
- 自定义样式为 `navbar`：`<!-- _class: navbar -->`
|
||||
- 导航栏修改自 header，最前面必须加入 `\ `
|
||||
- 当前活动标题：使用粗体 `**粗体**`
|
||||
- 其余非活动标题：使用斜体 `*斜体*`
|
||||
- 如果左侧有文字：使用斜粗体 `***粗斜体***`
|
||||
- 默认根据内容自动分配间距，如果希望右对齐，可以手动增加空格的方式来推动右对齐
|
||||
```
|
||||
|
||||
## 7. 其他自定义样式
|
||||
|
||||
<!-- _class: trans -->
|
||||
<!-- _footer: "" -->
|
||||
<!-- _paginate: "" -->
|
||||
|
||||
|
||||
|
||||
## 7.1 固定标题行：更像 Beamer 了（`fixedtitleA`）
|
||||
|
||||
<!-- _class: fixedtitleA -->
|
||||
|
||||
- 自定义样式：`<!-- _class: fixedtitleA -->`
|
||||
|
||||
- 使当前页面的标题栏固定在顶部，而非随着内容的多少浮动
|
||||
|
||||
- 同时，页面内容也会从顶部起笔，而非垂直方向上居中显示
|
||||
|
||||
|
||||
## 7.1 固定标题行：更像 Beamer 了（`fixedtitleB`）
|
||||
|
||||
<!-- _class: fixedtitleB -->
|
||||
|
||||
|
||||
<div class="div">
|
||||
|
||||
- 自定义样式：`<!-- _class: fixedtitleB -->`
|
||||
|
||||
- `fixedtitleB` 相比于 `fixedtitleA`，标题增加了底色色块，同时缩小了标题大小
|
||||
|
||||
- 其余效果与 `fixedtitleA` 相同
|
||||
|
||||
- 但是页面正文内容需要包裹在 `<div class="div'></div>` 标签中
|
||||
</div>
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: footnote -->
|
||||
|
||||
<div class="tdiv">
|
||||
|
||||
#### 7.2 脚注的自定义样式：`footnote`
|
||||
|
||||
使用方法：
|
||||
|
||||
- 自定义样式：`<!-- _class: footnote -->`
|
||||
- 页面除脚注外的其他内容，写在 `<div class = "tdiv"></div>`
|
||||
- 页面的脚注内容，写在 `<div class = "bdiv"></div>`
|
||||
|
||||
举个例子，展示一下显示效果：
|
||||
|
||||
- 一方面，经济金融化程度的加深，使得金融部门能够凭借资本跨期配置提前抽取其他部门的未来价值，从而扩大金融和非金融部门之间的外部收入差距$^1$。另一方面，经济金融化不断增加企业股东权力，促使企业更加追求股东价值最大化，这一导向将弱化普通劳动者阶层的议价能力，食利者阶层的财产性收入增加必然会挤压劳动收入份额，从而扩大了内部收入差距$^2$。
|
||||
|
||||
</div>
|
||||
|
||||
<div class="bdiv">
|
||||
|
||||
1 张甜迪. 金融化对中国金融、非金融行业收入差距的影响[J]. 经济问题, 2015(11): 40-46.
|
||||
2 Hein E. Finance-dominated capitalism and re-distribution of income: a Kaleckian perspective[J]. Cambridge Journal of Economics, 2015, 39(3): 907-934.
|
||||
</div>
|
||||
|
||||
## 7.3 调节文字大小的自定义样式
|
||||
|
||||
<!-- _class: largetext -->
|
||||
|
||||
对于字体大小的调节，直接修改 CSS 文件应该很方便的。但有小伙伴提出，“希望可以增加字体调节的自定义样式”，于是目前提供了四种微调样式：
|
||||
|
||||
- 自定义样式 1：`<!-- _class: tinytext -->` （是默认字体大小的 0.8 倍）
|
||||
- 自定义样式 2：`<!-- _class: smalltext -->` （是默认字体大小的 0.9 倍）
|
||||
- 自定义样式 3：`<!-- _class: largetext -->` （是默认字体大小的 1.15 倍）
|
||||
- 自定义样式 4：`<!-- _class: hugetext -->` （是默认字体大小的 1.3 倍）
|
||||
|
||||
比如，本页面采用的自定义样式为 `largetext`
|
||||
|
||||
## 7.4 图表标题的自定义样式：`caption`
|
||||
|
||||
<!-- _class: caption -->
|
||||
|
||||
- 通过 `<div class="caption">宇宙的奥妙</div>` 来定义图表的标题
|
||||
|
||||
|
||||
|
||||
<div class="caption">
|
||||
宇宙的奥妙
|
||||
</div>
|
||||
|
||||
|
||||
## 需要知道的基础知识……
|
||||
|
||||
<!-- _class: trans -->
|
||||
<!-- _footer: "" -->
|
||||
<!-- _paginate: "" -->
|
||||
|
||||
|
||||
## Markdown 概览
|
||||
|
||||
<!-- _header: \ ***@Awesome Marp*** *关于模板* *封面页* *目录页* *分栏与分列* *引用盒子* *导航栏* **基础知识**-->
|
||||
<!-- _class: navbar -->
|
||||
|
||||
- Markdown 是一种**极轻量**的文本标记语言，允许人们使用**易读易写**的纯文本格式编写文档，而且对于表格、代码、图片、公式等支持良好
|
||||
- 应用广泛：网站、课程笔记/讲义、演示文稿、撰写学术论文等
|
||||
- Markdown 基础语法：
|
||||
- 参阅：[Markdown 中文文档](https://markdown-zh.readthedocs.io/en/latest/)、[Markdown 指南](https://www.markdown.xyz/)、[Markdown 菜鸟教程](https://www.runoob.com/markdown/md-tutorial.html)
|
||||
- 标题 `#`、粗体 `** **`、斜体 `* *`、删除线 `~~ ~~`、分割线 `---`、超链接 `[]()`
|
||||
- 引用 `>`、列表 `-` / `1. `、代码块
|
||||
- 脚注 `[^1]` / `[^1]:`、待办事项 `[ ]` / `[x]`
|
||||
- Markdown 进阶语法：
|
||||
- 图片 `![]()`：本地路径、网络路径（参阅：[图床与 PicGo——让你爱上记录与分享](https://sspai.com/post/65716)）
|
||||
- 数学公式：行内公式 `$...$`、行间公式 `$$...$$`
|
||||
- 支持 HTML 元素：`<br>`/`<hr>`/`<b></b>`/`<i></i>`/`<kbd></kbd>` 等
|
||||
|
||||
## 推荐的 Markdown 编辑器
|
||||
|
||||
<!-- _class: cols-2-64 navbar -->
|
||||
<!-- _header: \ ***@Awesome Marp*** *关于模板* *封面页* *目录页* *分栏与分列* *引用盒子* *导航栏* **基础知识**-->
|
||||
|
||||
<div class=ldiv>
|
||||
|
||||
**VS Code**
|
||||
- Visual Studio Code[下载地址](https://code.visualstudio.com/Download)
|
||||
- VS Code 插件：
|
||||
- 配合 Markdown：[Markdown Preview Enhanced](https://marketplace.visualstudio.com/items?itemName=shd101wyy.markdown-preview-enhanced)、[Markdown All in One](https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one)
|
||||
- 图床：[PicGo](https://marketplace.visualstudio.com/items?itemName=Spades.vs-picgo)
|
||||
- 格式化文档：[Pangu-Markdown](https://marketplace.visualstudio.com/items?itemName=xlthu.Pangu-Markdown)
|
||||
- Markdown 转 PPT：[Marp for VScode](https://marketplace.visualstudio.com/items?itemName=marp-team.marp-vscode)
|
||||
- Markdown 转思维导图：[Markmap for VScode](https://marketplace.visualstudio.com/items?itemName=gera2ld.markmap-vscode)
|
||||
- 配合 Zotero：[Citation Picker for Zotero](https://marketplace.visualstudio.com/items?itemName=mblode.zotero)、[Pandoc Citer](https://marketplace.visualstudio.com/items?itemName=notZaki.pandocciter)
|
||||
|
||||
</div>
|
||||
|
||||
<div class=rdiv>
|
||||
|
||||
**Obsidian**
|
||||
- [Obsidian 主页](https://obsidian.md/)
|
||||
- 基于 Markdown 的本地知识管理软件
|
||||
- 除官方同步和发布功能外，对个人使用者完全免费
|
||||
- 功能丰富、插件众多、开发社区活跃
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
## Marp 基本用法
|
||||
|
||||
<!-- _header: \ ***@Awesome Marp*** *关于模板* *封面页* *目录页* *分栏与分列* *引用盒子* *导航栏* **基础知识**-->
|
||||
<!-- _class: navbar fixedtitleB -->
|
||||
|
||||
<div class="div">
|
||||
|
||||
- 几个字总结 [Marp](https://marp.app/)：使用 Markdown 创作演示文稿
|
||||
- 来自 Marp 官方网页的一段话：Marp (also known as the Markdown Presentation Ecosystem) provides an intuitive experience for creating beautiful slide decks. You only have to focus on writing your story in a Markdown document.
|
||||
|
||||
- 在 Markdown 文件的顶部 YAML 区域，通过 `marp: true` 启动 Marp，然后即可开启侧边预览，VS Code 界面左边是代码区域，右边为预览区域
|
||||
- 内容遵循 Markdown 语法，但 Marp 增加了一些内置指令，而且指令分为全局指令和[局部指令](https://marpit.marp.app/directives?id=local-directives-1)，全局指令建议放置于 YAML 区，局部指令位于当前页面，不同页面通过 `---` 切分
|
||||
- 推荐阅读：Marpit [官方文档](https://marpit.marp.app)及[中译版](https://caizhiyuan.gitee.io/categories/skills/20200730-marp.html#%E5%8A%9F%E8%83%BD)，五分钟学会 Marp[（上）](https://www.lianxh.cn/news/97fccdca2d7a5.html)、[（下）](https://www.lianxh.cn/news/521900220dd33.html)
|
||||
</div>
|
||||
|
||||
## Marp 基本用法
|
||||
|
||||
<!-- _header: \ ***@Awesome Marp*** *关于模板* *封面页* *目录页* *分栏与分列* *引用盒子* *导航栏* **基础知识**-->
|
||||
<!-- _class: navbar -->
|
||||
|
||||
```yaml
|
||||
---
|
||||
marp: true # 开启 Marp
|
||||
size: 16:9 # 设定页面比例，常见有 16:9 或 4:3，默认为16:9
|
||||
theme: gaia # 切换主题，内置 3 种样式的主题，可以自定义主题
|
||||
paginate: true # 开启页码
|
||||
headingDivider: 2 # 通过二级标题切分页面，省去手动换页的麻烦
|
||||
footer: 初虹 # 设置页脚区域的内容，如果设定页眉的内容，则为 header
|
||||
---
|
||||
```
|
||||
|
||||
- 如果想让页面同时被多个级别的标题切分，比如，以二级~四级标题分割页面，可以 `headingDivider: [2,3,4]`
|
||||
- 想要使得多个自定义样式渲染同一个页面，可直接将不同自定义样式以空格连接，比如：`<!-- _class: cols-2-64 fglass -->`
|
||||
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: lastpage -->
|
||||
<!-- _footer: "" -->
|
||||
|
||||
###### 欢迎交流 ~
|
||||
|
||||
<div class="icons">
|
||||
|
||||
- <i class="fa-solid fa-envelope"></i>
|
||||
- 邮箱：ch2099058972@163.com
|
||||
- <i class="fa-brands fa-weixin"></i>
|
||||
- 微信：favourhong
|
||||
- <i class="fa-solid fa-house"></i>
|
||||
- 公众号：虹鹄山庄
|
||||
|
||||
<div>
|
||||
|
||||
## 创作不易，buy me a coffee 🤙~
|
||||
|
||||
<!-- _class: trans -->
|
||||
<!-- _footer: "" -->
|
||||
<!-- _paginate: "" -->
|
||||
|
||||
<br>
|
||||
|
||||
|
||||
Executable
BIN
Binary file not shown.
Executable
+1032
File diff suppressed because one or more lines are too long
Executable
+942
@@ -0,0 +1,942 @@
|
||||
---
|
||||
marp: true
|
||||
size: 16:9
|
||||
theme: am_purple
|
||||
paginate: true
|
||||
headingDivider:
|
||||
- 2
|
||||
- 3
|
||||
footer: \ *初虹（虹鹄山庄）* *Awesome Marp：轻松取代 LaTeX Beamer！* *2024年1月13日（v1.3）*
|
||||
created: 2025-09-09T18:22
|
||||
updated: 2025-09-22T13:27
|
||||
---
|
||||
|
||||
|
||||
<!-- _class: cover_a
|
||||
<!-- _header: "" -->
|
||||
<!-- _footer: "" -->
|
||||
<!-- _paginate: "" -->
|
||||
|
||||
# Awesome Marp：轻松取代 LaTeX Beamer！
|
||||
|
||||
###### “用法简单、功能全面的个性化 PPT 模板”
|
||||
|
||||
@初虹
|
||||
公众号：虹鹄山庄
|
||||
发布时间：2024 年 1 月 13 日（v1.3）
|
||||
<ch2099058972@163.com>
|
||||
Awesome-Marp 地址：[GitHub 库](https://github.com/favourhong/Awesome-Marp)/[Gitee 库](https://gitee.com/favourhong/Awesome-Marp)
|
||||
|
||||
## Awesome Marp 有什么？
|
||||
|
||||
<!-- _class: cols2_ol_ci fglass toc_a -->
|
||||
<!-- _footer: "" -->
|
||||
<!-- _header: "CONTENTS" -->
|
||||
<!-- _paginate: "" -->
|
||||
|
||||
- [关于模板](#3)
|
||||
- [封面页](#10)
|
||||
- [目录页](#16)
|
||||
- [页面分栏与列表分列](#20)
|
||||
- [引用、链接和引用盒子](#38)
|
||||
- [导航栏](#45)
|
||||
- [其他自定义样式](#48)
|
||||
- [需要知道的基础知识](#56)
|
||||
- [最后一页](#59)
|
||||
|
||||
## 1. 关于模板
|
||||
|
||||
<!-- _class: trans -->
|
||||
<!-- _footer: "" -->
|
||||
<!-- _paginate: "" -->
|
||||
|
||||
## 1. 关于模板
|
||||
|
||||
- **开始之前：** 你需要知道这样几个工具，Markdown、Markdown 编辑器（VS Code 或 Obsidian）和 Marp。关于这三者是个啥，我不做详细地介绍，但在[第 55 页](#55)-[第 58 页](#58)会有一些凝练性的内容给你参考，同时我提供了不少的链接，也供你参阅。
|
||||
- **为什么要开发 Awesome Marp？**
|
||||
- Marp 原生仅提供 3 种主题（`default` / `gaia` / `uncover`），呈现效果一般。于是我根据自己的使用情况，边用边改造，陆续打磨了这样的一整套模板。
|
||||
- **目前发布的 v1.3 有 38 个自定义样式、6 种颜色的主题**（后面有呈现效果）
|
||||
- **Awesome Marp 的几个特色：**
|
||||
- 支持分栏呈现、支持 Callouts（类似于 Beamer 中的定理框）、提供多种类型的封面页和目录页、可以实现导航进度栏、图片支持自定义居中/居左/居右对齐等
|
||||
|
||||
- 本着「开箱即用」的原则，我将本项目文件夹打包上传到了[GitHub](https://github.com/favourhong/Awesome-Marp) 和 [Gitee](https://gitee.com/favourhong/Awesome-Marp)
|
||||
- 用到的工具：软件 [Visual Studio Code](https://code.visualstudio.com) 或 [Obsidian](https://obsidian.md/)、[Marp for VScode（插件）](https://marketplace.visualstudio.com/items?itemName=marp-team.marp-vscode)
|
||||
|
||||
## 1. 关于模板
|
||||
|
||||
|
||||
- Awesome Marp 支持 38 个自定义样式，使用时需在页面指定（如 `<!-- _class: trans -->`）：
|
||||
|
||||
| 封面页 | 目录页 | 列表 | 引用盒子 | 其他 1 | 其他 2 |
|
||||
| --------- | ------- | ----------- | ----------- | ----------------------------- | --------------------------------------------------------------- |
|
||||
| `cover_a` | `toc_a` | `cols-2` | `bq-black` | 过渡页面 `trans` | 图表等的标题 `caption` |
|
||||
| `cover_b` | `toc_b` | `cols-2-64` | `bq-purple` | 最后一页 `lastpage` | 非嵌套无序列表的毛玻璃效果 `fglass` |
|
||||
| `cover_c` | | `cols-2-73` | `bq-red` | 导航栏 `navbar` | 脚注：`footnote` |
|
||||
| `cover_d` | | `cols-3` | `bq-blue` | 标题固定+无底色 `fixedtitleA` | 调节字体大小：`tinytext`/`smalltext`/<br>`largetext`/`hugetext` |
|
||||
| `cover_e` | | `cols-2-46` | `bq-green` | 标题固定+有底色 `fixedtitleB` | |
|
||||
| | | `cols-2-37` | | 两列有序列表 `cols2_ol_sq/ci` | |
|
||||
| | | `rows-2` | | 两列无序列表 `cols_ul_sq/ci` | |
|
||||
| | | `pin-3` | | 单列有序列表 `col1_ul_sq/ci` | |
|
||||
|
||||
|
||||
## 1. 关于模板
|
||||
|
||||
|
||||
- Awesome Marp 的主题色（6 种），可在 YAML 区切换 Theme，如 `theme: am_dark`：
|
||||
|
||||
| 深色 | 绿色 | 红色 | 蓝色 | 棕色 | 紫色
|
||||
|---------|----------|--------|---------|----------|----|
|
||||
| `am_dark` | `am_green` | `am_red` | `am_blue` | `am_brown` |`am_purple`|
|
||||
|
||||
|
||||
## 1. 关于模板
|
||||
|
||||
- 如何使用：
|
||||
- **搭配 VS Code**：直接使用 VS Code 打开 `Awesome-Marp` 文件夹
|
||||
- 如果你想「拿来即用」，直接根据我分享的 Markdown 源码文件，对照修改就好了~
|
||||
- 如果你对部分效果不满意、期望简单微调的话，目前在 `Awesome-Marp/themes` 下有 6 个 CSS 文件，这些 CSS 文件决定了 Markdown 源码的最终渲染效果，可以试着改一改~
|
||||
- 如果你能够自行定制个性化 CSS 文件，渲染前，别忘在 `Awesome-Marp/.vscode/settings.json` 里加上你的 CSS 文件路径~
|
||||
- **搭配 Obsidian**：安装 [Marp Slides 插件](https://github.com/samuele-cozzi/obsidian-marp-slides)，并配置相应 CSS 路径
|
||||
|
||||
- 字体：因担心版权问题，需自行下载字体并安装，Awesome Marp 用到的字体有：
|
||||
- 正文字体：`Latin Modern Math`、`方正宋刻本秀楷简体`，如果未安装，默认将使用 `Calibri` 和 `楷体`
|
||||
- 标题字体：`Optima LT Medium`、`方正苏新诗柳楷简体`，如果未安装，默认将使用 `Arial` 和 `黑体`
|
||||
- 脚注字体：`Charm` 和 `叶根友毛笔行书修正版`，如果未安装，默认将使用 `Calibri` 和 `楷体`
|
||||
- 代码字体：`Fira Code` 和 `霞鹜文楷等宽`，如果未安装，默认将使用 `Consolas` 和 `华文中宋`
|
||||
|
||||
## 1. 关于模板：更新日志
|
||||
|
||||
- [Awesome Marp v1.0：我开发了一整套 Marp 主题，Markdown 转换的 PPT 也可以很好看！](https://mp.weixin.qq.com/s?__biz=MzkwOTE3NDExOQ==&mid=2247486787&idx=1&sn=2652ddae81f50240844cb652780912e1&chksm=c13ff94bf648705da1ba986b91265e3ff018acaffcfa60d7807a81be22176005e7a2b4483627&scene=178&cur_album_id=3132459596339757070#rd)
|
||||
- [Awesome Marp v1.1：标题行不随正文浮动，这下更像 Beamer 了！](https://mp.weixin.qq.com/s?__biz=MzkwOTE3NDExOQ==&mid=2247486800&idx=1&sn=527348e242576079e4bd6cd1823c823a&chksm=c13ff958f648704e40a202db6ad5fa215ef4c189d66403e161d6ace9828406a8747ac755684f&scene=178&cur_album_id=3132459596339757070#rd)
|
||||
- [Awesome Marp v1.2：增加脚注、调节字体大小等样式～](https://mp.weixin.qq.com/s?__biz=MzkwOTE3NDExOQ==&mid=2247486825&idx=1&sn=56d632ce164831438ec87c1b20ed4c4c&chksm=c13ff961f64870774f069ab816340783d8f54fd6b89363b8d9412c593efc640851ce9edd8833&scene=178&cur_album_id=3132459596339757070#rd)
|
||||
- [Awesome Marp v1.3：几处小更新～](https://mp.weixin.qq.com/s?__biz=MzkwOTE3NDExOQ==&mid=2247486869&idx=1&sn=fcc377ff6a5930436e5078a09d53f0ab&chksm=c13ff99df648708b89bafba030b27909d0022279e26da723ca54a1666fe55f50a4230f050662&scene=178&cur_album_id=3132459596339757070#rd)
|
||||
|
||||
|
||||
## 下面让我们看看效果吧 ~
|
||||
|
||||
<!-- _class: trans -->
|
||||
<!-- _footer: "" -->
|
||||
<!-- _paginate: "" -->
|
||||
|
||||
## 2. 封面页
|
||||
|
||||
<!-- _class: trans -->
|
||||
<!-- _footer: "" -->
|
||||
<!-- _paginate: "" -->
|
||||
|
||||
## 2. 封面页
|
||||
|
||||
- 大标题：采用一级标题 `# ` （如：`# Awesome Marp：自定义 Marp 主题`）
|
||||
- 副标题：采用六级标题 `###### ` （如：`###### 打造简便又不失个性的演示文稿`）
|
||||
- 本套模板提供 5 种封面页样式，使用时需要在页面中设定局部指令，如：`<!-- _class: cover_a -->`
|
||||
- `cover_a`：[第 1 种](#1)
|
||||
- `cover_b`：[第 2 种](#12)
|
||||
- `cover_c`：预留 header 可设定学校 logo，footer 可设定校训 [第 3 种](#13)
|
||||
- `cover_d`：只预留了 footer 设定校训 [第 4 种](#14)
|
||||
- `cover_e`：预留 header 设定学校 logo，footer 设定学校 logo 和学校名称[第 5 种](#15)
|
||||
|
||||
- 如果已经设定了全局 footer、header 或页码，但又不期望在封面页中出现，可以 `<!-- _footer: "" -->` / `<!-- _header: "" -->` / `<!-- _paginate: "" -->` 分别将其局部隐藏起来
|
||||
- 当标题文字超过页面宽度会溢出换行，这里可以使用 `<!-- fit -->` 根据页面宽度自动调整文字大小
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: cover_b -->
|
||||
<!-- _header: "" -->
|
||||
<!-- _footer: "" -->
|
||||
<!-- _paginate: "" -->
|
||||
|
||||
# Awesome Marp：轻松取代 LaTeX Beamer！
|
||||
|
||||
###### “用法简单、功能全面的个性化 PPT 模板”
|
||||
|
||||
@初虹
|
||||
公众号：虹鹄山庄
|
||||
发布时间：2024 年 1 月 13 日（v1.3）
|
||||
<ch2099058972@163.com>
|
||||
Awesome-Marp 地址：[GitHub 库](https://github.com/favourhong/Awesome-Marp)/[Gitee 库](https://gitee.com/favourhong/Awesome-Marp)
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: cover_c -->
|
||||
<!-- _paginate: "" -->
|
||||
<!-- _footer: 厚德博学 经济匡时 -->
|
||||
<!-- _header:  -->
|
||||
|
||||
|
||||
# <!-- fit -->Awesome Marp：轻松取代 LaTeX Beamer！
|
||||
|
||||
###### “用法简单、功能全面的个性化 PPT 模板”
|
||||
|
||||
@初虹
|
||||
公众号：虹鹄山庄
|
||||
发布时间：2024 年 1 月 13 日（v1.3）
|
||||
<ch2099058972@163.com>
|
||||
Awesome-Marp 地址：[GitHub 库](https://github.com/favourhong/Awesome-Marp)/[Gitee 库](https://gitee.com/favourhong/Awesome-Marp)
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: cover_d -->
|
||||
<!-- _paginate: "" -->
|
||||
<!-- _footer: "厚德博学 经济匡时" -->
|
||||
|
||||
# <!-- fit -->Awesome Marp：轻松取代 LaTeX Beamer！
|
||||
|
||||
###### “用法简单、功能全面的个性化 PPT 模板”
|
||||
|
||||
@初虹
|
||||
公众号：虹鹄山庄
|
||||
发布时间：2024 年 1 月 13 日（v1.3）
|
||||
<ch2099058972@163.com>
|
||||
Awesome-Marp 地址：[GitHub 库](https://github.com/favourhong/Awesome-Marp)/[Gitee 库](https://gitee.com/favourhong/Awesome-Marp)
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: cover_e -->
|
||||
<!-- _paginate: "" -->
|
||||
<!-- _footer:  -->
|
||||
<!-- _header:  -->
|
||||
|
||||
|
||||
# <!-- fit -->Awesome Marp：轻松取代 LaTeX Beamer！
|
||||
|
||||
###### “用法简单、功能全面的个性化 PPT 模板”
|
||||
|
||||
@初虹
|
||||
公众号：虹鹄山庄
|
||||
发布时间：2024 年 1 月 13 日（v1.3）
|
||||
<ch2099058972@163.com>
|
||||
Awesome-Marp 地址：[GitHub 库](https://github.com/favourhong/Awesome-Marp)/[Gitee 库](https://gitee.com/favourhong/Awesome-Marp)
|
||||
|
||||
## 3. 目录页
|
||||
|
||||
<!-- _class: trans -->
|
||||
<!-- _footer: "" -->
|
||||
<!-- _paginate: "" -->
|
||||
|
||||
## 3. 目录页
|
||||
|
||||
- Awesome Marp 提供了至少 2 种目录页样式，使用时同样需要设定局部样式
|
||||
- `toc_a`：需要将 header 的内容设定为 `CONTENTS`，即 `<!-- _header: "CONTENTS" -->`
|
||||
- `toc_b`：需要将 header 的内容设定为 `目录<br>CONTENTS<br>你的LOGO地址`，即 `<!-- _header: 目录<br>CONTENTS<br>-->`
|
||||
- 提供的几种分栏列表样式，也可以作为目录页使用，如 `<!-- _class: cols2_ol_ci fglass -->`（效果见[这里](#32)）
|
||||
|
||||
- 类似地，如果已经定义了全局 footer 或页码，可以使用 `<!-- _footer: "" -->` / `<!-- _paginate: "" -->` 分别将其局部隐藏起来
|
||||
- 目录页样式：[第 1 种](#2)、[第 2 种](#18)和[第 3 种](#19)
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: toc_a -->
|
||||
<!-- _header: "CONTENTS" -->
|
||||
<!-- _footer: "" -->
|
||||
<!-- _paginate: "" -->
|
||||
|
||||
- [关于模板](#3)
|
||||
- [封面页](#10)
|
||||
- [目录页](#16)
|
||||
- [页面分栏与列表分列](#20)
|
||||
- [引用、链接和引用盒子](#38)
|
||||
- [导航栏](#45)
|
||||
- [其他自定义样式](#48)
|
||||
- [需要知道的基础知识](#56)
|
||||
- [最后一页](#59)
|
||||
|
||||
---
|
||||
|
||||
<!-- _header: 目录<br>CONTENTS<br>-->
|
||||
<!-- _class: toc_b -->
|
||||
<!-- _footer: "" -->
|
||||
<!-- _paginate: "" -->
|
||||
|
||||
- [关于模板](#3)
|
||||
- [封面页](#10)
|
||||
- [目录页](#16)
|
||||
- [页面分栏与列表分列](#20)
|
||||
- [引用、链接和引用盒子](#38)
|
||||
- [导航栏](#45)
|
||||
- [其他自定义样式](#48)
|
||||
- [需要知道的基础知识](#56)
|
||||
- [最后一页](#59)
|
||||
|
||||
|
||||
## 4. 页面分栏与列表分列
|
||||
|
||||
<!-- _class: trans -->
|
||||
<!-- _footer: "" -->
|
||||
<!-- _paginate: "" -->
|
||||
|
||||
## 4.1 页面分栏与列表分列：页面分栏
|
||||
|
||||
- Awesome Marp 提供了 8 种页面分栏方式，分别为：
|
||||
- `cols-2`：[两列分栏，五五平分](#23)
|
||||
- `cols-2-64`：[两列分栏，六四分](#24)
|
||||
- `cols-2-73`：[两列分栏，七三分](#25)
|
||||
- `cols-2-46`：[两列分栏，四六分](#26)
|
||||
- `cols-2-37`：[两列分栏，三七分](#27)
|
||||
- `cols-3`：[三列分栏，平分](#28)
|
||||
- `rows-2`：[两行分栏](#29)
|
||||
- `pin-3`：[品字型分栏](#30)
|
||||
|
||||
- 如果某一栏为图片，可以将 `class=ldiv` 换成 `class=limg`，这样能够实现图片的垂直居中对齐呢（`class=ldiv` 为居上对齐）
|
||||
|
||||
|
||||
## 4.1 页面分栏与列表分列：页面分栏
|
||||
|
||||
- 以 `<!-- _class: cols-2 -->` 为例，Markdown 的源码为：
|
||||
|
||||
```markdown
|
||||
<!-- _class: cols-2 -->
|
||||
<div class=ldiv>
|
||||
|
||||
第一列（左侧栏）的内容在这里
|
||||
|
||||
内容可以是普通纯文本，可以是列表，也可以是引用块、链接、图片等
|
||||
</div>
|
||||
|
||||
<div class=rdiv>
|
||||
|
||||
第二列（右侧栏）的内容在这里
|
||||
</div>
|
||||
```
|
||||
|
||||
- 如果是分三栏（`<!-- _class: cols-3 -->`），还需要再增加 `<div class="mdiv"></div>` 标签
|
||||
|
||||
|
||||
## 《荷塘月色》（两栏五五分）
|
||||
|
||||
<!-- _class: cols-2 -->
|
||||
|
||||
<div class=ldiv>
|
||||
|
||||
曲曲折折的荷塘上面，弥望的是田田的叶子。叶子出水很高，像亭亭的舞女的裙。
|
||||
|
||||
层层的叶子中间，零星地点缀着些白花，有袅娜地开着的，有羞涩地打着朵儿的；正如一粒粒的明珠，又如碧天里的星星，又如刚出浴的美人。
|
||||
|
||||
微风过处，送来缕缕清香，仿佛远处高楼上渺茫的歌声似的。这时候叶子与花也有一丝的颤动，像闪电般，霎时传过荷塘的那边去了。
|
||||
|
||||
叶子本是肩并肩密密地挨着，这便宛然有了一道凝碧的波痕。叶子底下是脉脉的流水，遮住了，不能见一些颜色；而叶子却更见风致了。
|
||||
|
||||
—— 朱自清《荷塘月色》 [返回](#21)
|
||||
</div>
|
||||
|
||||
<div class=rimg>
|
||||
|
||||
<!--  -->
|
||||
|
||||
</div>
|
||||
|
||||
## 《春》（两栏六四分）
|
||||
|
||||
<!-- _class: cols-2-64 -->
|
||||
|
||||
<div class=limg>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class=rdiv>
|
||||
|
||||
盼望着，盼望着，东风来了，春天的脚步近了。
|
||||
|
||||
一切都像刚睡醒的样子，欣欣然张开了眼。山朗润起来了，水涨起来了，太阳的脸红起来了。
|
||||
|
||||
小草偷偷地从土里钻出来，嫩嫩的，绿绿的。园子里，田野里，瞧去，一大片一大片满是的。坐着，躺着，打两个滚，踢几脚球，赛几趟跑，捉几回迷藏。风轻悄悄的，草软绵绵的。
|
||||
|
||||
—— 朱自清《春》
|
||||
|
||||
[返回](#21)
|
||||
</div>
|
||||
|
||||
## 经典散文诗篇（两栏七三分）
|
||||
|
||||
<!-- _class: cols-2-73 -->
|
||||
|
||||
<div class=limg>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class=rdiv>
|
||||
|
||||
经典的散文诗篇有：
|
||||
|
||||
- 朱自清：《荷塘月色》
|
||||
- 林清玄：《月到天心》
|
||||
- 郁达夫：《古都的秋》
|
||||
- 张爱玲：《花落的声音》
|
||||
- 余光中：《听听那冷雨》
|
||||
- 张抗抗：《牡丹的拒绝》
|
||||
- 丰子恺：《杨柳》
|
||||
- 周作人：《乌篷船》
|
||||
- 郑振铎：《石湖》
|
||||
- 梁实秋：《雅舍》
|
||||
|
||||
[返回](#21)
|
||||
</div>
|
||||
|
||||
## 《春》（两栏四六分）
|
||||
|
||||
<!-- _class: cols-2-46 -->
|
||||
|
||||
<div class=ldiv>
|
||||
|
||||
|
||||
盼望着，盼望着，东风来了，春天的脚步近了。
|
||||
|
||||
一切都像刚睡醒的样子，欣欣然张开了眼。山朗润起来了，水涨起来了，太阳的脸红起来了。
|
||||
|
||||
小草偷偷地从土里钻出来，嫩嫩的，绿绿的。园子里，田野里，瞧去，一大片一大片满是的。坐着，躺着，打两个滚，踢几脚球，赛几趟跑，捉几回迷藏。风轻悄悄的，草软绵绵的。
|
||||
|
||||
—— 朱自清《春》
|
||||
|
||||
[返回](#21)
|
||||
</div>
|
||||
|
||||
<div class=rimg>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
## 经典散文诗篇（两栏三七分）
|
||||
|
||||
<!-- _class: cols-2-37 -->
|
||||
|
||||
<div class=ldiv>
|
||||
|
||||
|
||||
经典的散文诗篇有：
|
||||
|
||||
- 朱自清：《荷塘月色》
|
||||
- 林清玄：《月到天心》
|
||||
- 郁达夫：《古都的秋》
|
||||
- 张爱玲：《花落的声音》
|
||||
- 余光中：《听听那冷雨》
|
||||
- 张抗抗：《牡丹的拒绝》
|
||||
- 丰子恺：《杨柳》
|
||||
- 周作人：《乌篷船》
|
||||
- 郑振铎：《石湖》
|
||||
- 梁实秋：《雅舍》
|
||||
|
||||
[返回](#21)
|
||||
</div>
|
||||
|
||||
<div class=rimg>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
## 夏与秋（三栏三平分）
|
||||
|
||||
<!-- _class: cols-3 -->
|
||||
|
||||
<div class=ldiv>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class=mdiv>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class=rdiv>
|
||||
|
||||
|
||||
|
||||
[返回](#21)
|
||||
</div>
|
||||
|
||||
|
||||
## 高山与沙漠（两行分栏）
|
||||
|
||||
<!-- _class: rows-2 -->
|
||||
|
||||
<div class="timg">
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="bimg">
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
## 《宇宙的奥秘》（品字型分栏）
|
||||
|
||||
<!-- _class: pin-3 -->
|
||||
|
||||
<div class="tdiv">
|
||||
|
||||
> 四百年前，两位截然不同的科学家突破了当时已知世界的边界。1609 年在威尼斯，伽利略・伽利雷透过望远镜观察星辰，并制作仪器和进行实验。在布拉格，科班出身的神学家约翰内斯・开普勒发现了行星运动定律，奠定了近代天体物理学的基础，并思考着宇宙的宏伟构造。托马斯・德・帕多瓦以至今较少受到关注却扣人心弦的通信往来为基础，讲述了这两位类型如此迥异的学者之间不对等的关系，以及他们如何在同样的时刻却以各自的方式探索星辰的奥秘。在彼此的鉴照下，他们的远见与固执、睿智与无知得以呈现。这是一部介绍新科学的崛起以及近代来临之际的巨大变革的作品。 ——《宇宙的奥妙》
|
||||
</div>
|
||||
|
||||
<div class="limg">
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="rimg">
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
## 4.2 页面分栏与列表分列：列表分列
|
||||
|
||||
Awesome Marp v1.3 提供了 6 种列表分列的方式，分别为：
|
||||
|
||||
- `cols2_ol_sq`：呈现效果为[有序列表 + 方形序号](#32)
|
||||
- `cols2_ol_ci`：呈现效果为[有序列表 + 圆形序号](#33)
|
||||
- `cols2_ul_sq`：呈现效果为[无序列表 + 方形序号](#34)
|
||||
- `cols2_ul_ci`：呈现效果为[无序列表 + 圆形序号](#35)
|
||||
- `col1_ul_sq`：呈现效果为[有序列表 + 方形序号](#36)
|
||||
- `col1_ul_ci`：呈现效应为[有序列表 + 圆形序号](#37)
|
||||
|
||||
|
||||
## 《微观经济学：现代观点》
|
||||
|
||||
<!-- _class: cols2_ol_sq fglass -->
|
||||
|
||||
渲染效果为**有序列表+方形序号**
|
||||
自定义样式为：`<!-- _class: cols2_ol_sq fglass -->`
|
||||
|
||||
- 偏好和效用
|
||||
- 预算约束和消费者的最优选择
|
||||
- 需求函数
|
||||
- 劳动力和储蓄的供给函数
|
||||
- 福利经济学：单人模型和多人模型
|
||||
- 企业理论：单投入品和多投入品模型
|
||||
- 完全竞争市场
|
||||
- 完全垄断、垄断竞争与双寡头垄断
|
||||
- 博弈论
|
||||
- 交换经济与生产经济
|
||||
- 外部性与公共品
|
||||
- 不确定性、期望效用和不对称信息
|
||||
|
||||
[返回](#28)
|
||||
|
||||
|
||||
## 《微观经济学：现代观点》
|
||||
|
||||
<!-- _class: cols2_ol_ci fglass -->
|
||||
|
||||
渲染效果为**有序列表+圆形序号**
|
||||
自定义样式为：`<!-- _class: cols2_ol_ci fglass -->`
|
||||
|
||||
- 偏好和效用
|
||||
- 预算约束和消费者的最优选择
|
||||
- 需求函数
|
||||
- 劳动力和储蓄的供给函数
|
||||
- 福利经济学：单人模型和多人模型
|
||||
- 企业理论：单投入品和多投入品模型
|
||||
- 完全竞争市场
|
||||
- 完全垄断、垄断竞争与双寡头垄断
|
||||
- 博弈论
|
||||
- 交换经济与生产经济
|
||||
- 外部性与公共品
|
||||
- 不确定性、期望效用和不对称信息
|
||||
|
||||
[返回](#28)
|
||||
|
||||
## 《置身事内》
|
||||
|
||||
<!-- _class: cols2_ul_sq fglass -->
|
||||
|
||||
渲染效果为**无序列表+方形序号**
|
||||
自定义样式为：`<!-- _class: cols2_ul_sq fglass -->`
|
||||
|
||||
- 第一章：地方政府的权力与事务
|
||||
- 第二章：财税与政府行为
|
||||
- 第三章：政府投融资与债务
|
||||
- 第四章：工业化中的政府角色
|
||||
- 第五章：城市化与不平衡
|
||||
- 第六章：债务与风险
|
||||
- 第七章：国内国际失衡
|
||||
- 第八章：政府与经济发展
|
||||
|
||||
[返回](#28)
|
||||
|
||||
## 《置身事内》
|
||||
|
||||
<!-- _class: cols2_ul_ci fglass -->
|
||||
|
||||
渲染效果为**无序列表+圆形序号**
|
||||
自定义样式为：`<!-- _class: cols2_ul_ci fglass -->`
|
||||
|
||||
- 第一章：地方政府的权力与事务
|
||||
- 第二章：财税与政府行为
|
||||
- 第三章：政府投融资与债务
|
||||
- 第四章：工业化中的政府角色
|
||||
- 第五章：城市化与不平衡
|
||||
- 第六章：债务与风险
|
||||
- 第七章：国内国际失衡
|
||||
- 第八章：政府与经济发展
|
||||
|
||||
[返回](#28)
|
||||
|
||||
## 《微观经济学：现代观点》
|
||||
|
||||
<!-- _class: col1_ol_sq fglass -->
|
||||
|
||||
渲染效果为**单列+有序列表+方形序号**
|
||||
自定义样式为：`<!-- _class: col1_ul_sq fglass -->`
|
||||
|
||||
- 预算约束和消费者的最优选择
|
||||
- 劳动力和储蓄的供给函数
|
||||
- 福利经济学：单人模型和多人模型
|
||||
- 企业理论：单投入品和多投入品模型
|
||||
- 完全竞争市场
|
||||
- 完全垄断、垄断竞争与双寡头垄断
|
||||
- 交换经济与生产经济
|
||||
- 不确定性、期望效用和不对称信息
|
||||
|
||||
## 《微观经济学：现代观点》
|
||||
|
||||
<!-- _class: col1_ol_ci fglass -->
|
||||
|
||||
渲染效果为**单列+有序列表+圆形序号**
|
||||
自定义样式为：`<!-- _class: col1_ul_ci fglass -->`
|
||||
|
||||
- 预算约束和消费者的最优选择
|
||||
- 劳动力和储蓄的供给函数
|
||||
- 福利经济学：单人模型和多人模型
|
||||
- 企业理论：单投入品和多投入品模型
|
||||
- 完全竞争市场
|
||||
- 完全垄断、垄断竞争与双寡头垄断
|
||||
- 交换经济与生产经济
|
||||
- 不确定性、期望效用和不对称信息
|
||||
|
||||
## 5. 引用、链接和 Callouts
|
||||
|
||||
<!-- _class: trans -->
|
||||
<!-- _footer: "" -->
|
||||
<!-- _paginate: "" -->
|
||||
|
||||
## 5. 引用、链接和 Callouts
|
||||
|
||||
- 引用的呈现效果为：
|
||||
|
||||
> 合成控制法 (Synthetic Control Method) 最早由 Abadie and Gardeazabal (2003) 提出，用来研究西班牙巴斯克地区恐怖活动的经济成本，属于案例研究范畴 (Case Study)。
|
||||
|
||||
- 链接的呈现效果：
|
||||
- [经管数据清洗与 Stata 实战：三大地级市数据库和 CSMAR 上市公司数据](https://mp.weixin.qq.com/s/D0cYVPJJsNiu61GcYwV6cg)
|
||||
- [Stata 基础：从论文文件夹体系的建立说起](https://mp.weixin.qq.com/s?__biz=MzkwOTE3NDExOQ==&mid=2247486489&idx=1&sn=2eb51e85a01541c7a552a9434e087512&scene=21#wechat_redirect)
|
||||
- Callouts 是 Awesome Marp 提供的自定义的样式，有 5 种颜色可选：
|
||||
- [紫色](#40)：`bq-purple`
|
||||
- [蓝色](#41)：`bq-blue`
|
||||
- [绿色](#42)：`bq-green`
|
||||
- [红色](#43)：`bq-red`
|
||||
- [黑色](#44)：`bq-black`
|
||||
|
||||
## 5. 引用、链接和引用盒子
|
||||
|
||||
<!-- _class: bq-purple -->
|
||||
|
||||
- 自定义样式为：`<!-- _class: bq-purple -->`
|
||||
|
||||
> 合成控制法 (Synthetic Control Method)
|
||||
>
|
||||
> SCM 最早由 Abadie and Gardeazabal (2003) 提出，用来研究西班牙巴斯克地区恐怖活动的经济成本，属于案例研究范畴 (Case Study)。Athey & Imbens (2017) 认为它是过去 15 年计量方法领域最重要的创新。<br>
|
||||
> 合成控制法的基本思想是：虽然无法找到巴斯克地区的最佳控制地区，但可对西班牙的若干大城市进行适当的线性组合（赋予不同的权重），以构造一个更为贴切的「合成控制地区」 (Synthetic Control Region)，然后将真实的巴斯克地区与「合成的巴斯克地区」进行对比，即可得到恐袭的影响。
|
||||
|
||||
[返回](#39)
|
||||
|
||||
## 5. 引用、链接和引用盒子
|
||||
|
||||
<!-- _class: bq-blue -->
|
||||
|
||||
- 自定义样式为：`<!-- _class: bq-blue -->`
|
||||
|
||||
> 合成控制法 (Synthetic Control Method)
|
||||
>
|
||||
> SCM 最早由 Abadie and Gardeazabal (2003) 提出，用来研究西班牙巴斯克地区恐怖活动的经济成本，属于案例研究范畴 (Case Study)。Athey & Imbens (2017) 认为它是过去 15 年计量方法领域最重要的创新。<br>
|
||||
> 合成控制法的基本思想是：虽然无法找到巴斯克地区的最佳控制地区，但可对西班牙的若干大城市进行适当的线性组合（赋予不同的权重），以构造一个更为贴切的「合成控制地区」 (Synthetic Control Region)，然后将真实的巴斯克地区与「合成的巴斯克地区」进行对比，即可得到恐袭的影响。
|
||||
|
||||
[返回](#39)
|
||||
|
||||
## 5. 引用、链接和引用盒子
|
||||
|
||||
<!-- _class: bq-green -->
|
||||
|
||||
- 自定义样式为：`<!-- _class: bq-green -->`
|
||||
|
||||
> 合成控制法 (Synthetic Control Method)
|
||||
>
|
||||
> SCM 最早由 Abadie and Gardeazabal (2003) 提出，用来研究西班牙巴斯克地区恐怖活动的经济成本，属于案例研究范畴 (Case Study)。Athey & Imbens (2017) 认为它是过去 15 年计量方法领域最重要的创新。<br>
|
||||
> 合成控制法的基本思想是：虽然无法找到巴斯克地区的最佳控制地区，但可对西班牙的若干大城市进行适当的线性组合（赋予不同的权重），以构造一个更为贴切的「合成控制地区」 (Synthetic Control Region)，然后将真实的巴斯克地区与「合成的巴斯克地区」进行对比，即可得到恐袭的影响。
|
||||
|
||||
[返回](#39)
|
||||
|
||||
## 5. 引用、链接和引用盒子
|
||||
|
||||
<!-- _class: bq-red -->
|
||||
|
||||
- 自定义样式为：`<!-- _class: bq-red -->`
|
||||
|
||||
> 合成控制法 (Synthetic Control Method)
|
||||
>
|
||||
> SCM 最早由 Abadie and Gardeazabal (2003) 提出，用来研究西班牙巴斯克地区恐怖活动的经济成本，属于案例研究范畴 (Case Study)。Athey & Imbens (2017) 认为它是过去 15 年计量方法领域最重要的创新。<br>
|
||||
> 合成控制法的基本思想是：虽然无法找到巴斯克地区的最佳控制地区，但可对西班牙的若干大城市进行适当的线性组合（赋予不同的权重），以构造一个更为贴切的「合成控制地区」 (Synthetic Control Region)，然后将真实的巴斯克地区与「合成的巴斯克地区」进行对比，即可得到恐袭的影响。
|
||||
|
||||
[返回](#39)
|
||||
|
||||
## 5. 引用、链接和引用盒子
|
||||
|
||||
<!-- _class: bq-black -->
|
||||
|
||||
- 自定义样式为：`<!-- _class: bq-black -->`
|
||||
|
||||
> 合成控制法 (Synthetic Control Method)
|
||||
>
|
||||
> SCM 最早由 Abadie and Gardeazabal (2003) 提出，用来研究西班牙巴斯克地区恐怖活动的经济成本，属于案例研究范畴 (Case Study)。Athey & Imbens (2017) 认为它是过去 15 年计量方法领域最重要的创新。<br>
|
||||
> 合成控制法的基本思想是：虽然无法找到巴斯克地区的最佳控制地区，但可对西班牙的若干大城市进行适当的线性组合（赋予不同的权重），以构造一个更为贴切的「合成控制地区」 (Synthetic Control Region)，然后将真实的巴斯克地区与「合成的巴斯克地区」进行对比，即可得到恐袭的影响。
|
||||
|
||||
[返回](#39)
|
||||
|
||||
|
||||
## 6. 导航栏
|
||||
|
||||
<!-- _class: trans -->
|
||||
<!-- _footer: "" -->
|
||||
<!-- _paginate: "" -->
|
||||
|
||||
## 6. 导航栏
|
||||
|
||||
<!-- _class: navbar -->
|
||||
<!-- _header: \ ***@Awesome Marp*** *关于模板* *封面页* *目录页* *分栏与分列* *引用盒子* **导航栏** *基础知识*-->
|
||||
|
||||
- 一句题外话：打造 Awesome Marp 模板的最早初衷就是来自几位公众号粉丝朋友的询问，「Marp 是否也能实现想 Beamer 那样的顶部导航栏？」为了实现导航栏的效果，我又多学了一些 CSS 的知识，这套模板才得以成型
|
||||
|
||||
- 自定义样式为 `navbar`：`<!-- _class: navbar -->`
|
||||
- 导航栏修改自 header，最前面必须加入 `\ `
|
||||
- 当前活动标题，使用粗体 `**粗体**`
|
||||
- 其余非活动标题，使用斜体 `*斜体*`
|
||||
- 如果左侧有文字，需要使用斜粗体 `***粗斜体***`
|
||||
- 默认根据内容自动分配间距，如果希望右对齐，可以手动增加空格的方式来推动右对齐
|
||||
|
||||
|
||||
## 6. 导航栏
|
||||
|
||||
<!-- _header: \ ***@Awesome Marp*** *关于模板* *封面页* *目录页* *分栏与分列* *引用盒子* **导航栏** *基础知识*-->
|
||||
<!-- _class: navbar -->
|
||||
|
||||
这张页面的部分 Markdown 源码：
|
||||
|
||||
```markdown
|
||||
<!-- _class: navbar -->
|
||||
<!-- _header: \ ***虹鹄山庄***
|
||||
|
||||
- 自定义样式为 `navbar`：`<!-- _class: navbar -->`
|
||||
- 导航栏修改自 header，最前面必须加入 `\ `
|
||||
- 当前活动标题：使用粗体 `**粗体**`
|
||||
- 其余非活动标题：使用斜体 `*斜体*`
|
||||
- 如果左侧有文字：使用斜粗体 `***粗斜体***`
|
||||
- 默认根据内容自动分配间距，如果希望右对齐，可以手动增加空格的方式来推动右对齐
|
||||
```
|
||||
|
||||
## 7. 其他自定义样式
|
||||
|
||||
<!-- _class: trans -->
|
||||
<!-- _footer: "" -->
|
||||
<!-- _paginate: "" -->
|
||||
|
||||
|
||||
|
||||
## 7.1 固定标题行：更像 Beamer 了（`fixedtitleA`）
|
||||
|
||||
<!-- _class: fixedtitleA -->
|
||||
|
||||
- 自定义样式：`<!-- _class: fixedtitleA -->`
|
||||
|
||||
- 使当前页面的标题栏固定在顶部，而非随着内容的多少浮动
|
||||
|
||||
- 同时，页面内容也会从顶部起笔，而非垂直方向上居中显示
|
||||
|
||||
|
||||
## 7.1 固定标题行：更像 Beamer 了（`fixedtitleB`）
|
||||
|
||||
<!-- _class: fixedtitleB -->
|
||||
|
||||
|
||||
<div class="div">
|
||||
|
||||
- 自定义样式：`<!-- _class: fixedtitleB -->`
|
||||
|
||||
- `fixedtitleB` 相比于 `fixedtitleA`，标题增加了底色色块，同时缩小了标题大小
|
||||
|
||||
- 其余效果与 `fixedtitleA` 相同
|
||||
|
||||
- 但是页面正文内容需要包裹在 `<div class="div'></div>` 标签中
|
||||
</div>
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: footnote -->
|
||||
|
||||
<div class="tdiv">
|
||||
|
||||
#### 7.2 脚注的自定义样式：`footnote`
|
||||
|
||||
使用方法：
|
||||
|
||||
- 自定义样式：`<!-- _class: footnote -->`
|
||||
- 页面除脚注外的其他内容，写在 `<div class = "tdiv"></div>`
|
||||
- 页面的脚注内容，写在 `<div class = "bdiv"></div>`
|
||||
|
||||
举个例子，展示一下显示效果：
|
||||
|
||||
- 一方面，经济金融化程度的加深，使得金融部门能够凭借资本跨期配置提前抽取其他部门的未来价值，从而扩大金融和非金融部门之间的外部收入差距$^1$。另一方面，经济金融化不断增加企业股东权力，促使企业更加追求股东价值最大化，这一导向将弱化普通劳动者阶层的议价能力，食利者阶层的财产性收入增加必然会挤压劳动收入份额，从而扩大了内部收入差距$^2$。
|
||||
|
||||
</div>
|
||||
|
||||
<div class="bdiv">
|
||||
|
||||
1 张甜迪. 金融化对中国金融、非金融行业收入差距的影响[J]. 经济问题, 2015(11): 40-46.
|
||||
2 Hein E. Finance-dominated capitalism and re-distribution of income: a Kaleckian perspective[J]. Cambridge Journal of Economics, 2015, 39(3): 907-934.
|
||||
</div>
|
||||
|
||||
## 7.3 调节文字大小的自定义样式
|
||||
|
||||
<!-- _class: largetext -->
|
||||
|
||||
对于字体大小的调节，直接修改 CSS 文件应该很方便的。但有小伙伴提出，“希望可以增加字体调节的自定义样式”，于是目前提供了四种微调样式：
|
||||
|
||||
- 自定义样式 1：`<!-- _class: tinytext -->` （是默认字体大小的 0.8 倍）
|
||||
- 自定义样式 2：`<!-- _class: smalltext -->` （是默认字体大小的 0.9 倍）
|
||||
- 自定义样式 3：`<!-- _class: largetext -->` （是默认字体大小的 1.15 倍）
|
||||
- 自定义样式 4：`<!-- _class: hugetext -->` （是默认字体大小的 1.3 倍）
|
||||
|
||||
比如，本页面采用的自定义样式为 `largetext`
|
||||
|
||||
## 7.4 图表标题的自定义样式：`caption`
|
||||
|
||||
<!-- _class: caption -->
|
||||
|
||||
- 通过 `<div class="caption">宇宙的奥妙</div>` 来定义图表的标题
|
||||
|
||||
|
||||
|
||||
<div class="caption">
|
||||
宇宙的奥妙
|
||||
</div>
|
||||
|
||||
|
||||
## 需要知道的基础知识……
|
||||
|
||||
<!-- _class: trans -->
|
||||
<!-- _footer: "" -->
|
||||
<!-- _paginate: "" -->
|
||||
|
||||
|
||||
## Markdown 概览
|
||||
|
||||
<!-- _header: \ ***@Awesome Marp*** *关于模板* *封面页* *目录页* *分栏与分列* *引用盒子* *导航栏* **基础知识**-->
|
||||
<!-- _class: navbar -->
|
||||
|
||||
- Markdown 是一种**极轻量**的文本标记语言，允许人们使用**易读易写**的纯文本格式编写文档，而且对于表格、代码、图片、公式等支持良好
|
||||
- 应用广泛：网站、课程笔记/讲义、演示文稿、撰写学术论文等
|
||||
- Markdown 基础语法：
|
||||
- 参阅：[Markdown 中文文档](https://markdown-zh.readthedocs.io/en/latest/)、[Markdown 指南](https://www.markdown.xyz/)、[Markdown 菜鸟教程](https://www.runoob.com/markdown/md-tutorial.html)
|
||||
- 标题 `#`、粗体 `** **`、斜体 `* *`、删除线 `~~ ~~`、分割线 `---`、超链接 `[]()`
|
||||
- 引用 `>`、列表 `-` / `1. `、代码块
|
||||
- 脚注 `[^1]` / `[^1]:`、待办事项 `[ ]` / `[x]`
|
||||
- Markdown 进阶语法：
|
||||
- 图片 `![]()`：本地路径、网络路径（参阅：[图床与 PicGo——让你爱上记录与分享](https://sspai.com/post/65716)）
|
||||
- 数学公式：行内公式 `$...$`、行间公式 `$$...$$`
|
||||
- 支持 HTML 元素：`<br>`/`<hr>`/`<b></b>`/`<i></i>`/`<kbd></kbd>` 等
|
||||
|
||||
## 推荐的 Markdown 编辑器
|
||||
|
||||
<!-- _class: cols-2-64 navbar -->
|
||||
<!-- _header: \ ***@Awesome Marp*** *关于模板* *封面页* *目录页* *分栏与分列* *引用盒子* *导航栏* **基础知识**-->
|
||||
|
||||
<div class=ldiv>
|
||||
|
||||
**VS Code**
|
||||
- Visual Studio Code[下载地址](https://code.visualstudio.com/Download)
|
||||
- VS Code 插件：
|
||||
- 配合 Markdown：[Markdown Preview Enhanced](https://marketplace.visualstudio.com/items?itemName=shd101wyy.markdown-preview-enhanced)、[Markdown All in One](https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one)
|
||||
- 图床：[PicGo](https://marketplace.visualstudio.com/items?itemName=Spades.vs-picgo)
|
||||
- 格式化文档：[Pangu-Markdown](https://marketplace.visualstudio.com/items?itemName=xlthu.Pangu-Markdown)
|
||||
- Markdown 转 PPT：[Marp for VScode](https://marketplace.visualstudio.com/items?itemName=marp-team.marp-vscode)
|
||||
- Markdown 转思维导图：[Markmap for VScode](https://marketplace.visualstudio.com/items?itemName=gera2ld.markmap-vscode)
|
||||
- 配合 Zotero：[Citation Picker for Zotero](https://marketplace.visualstudio.com/items?itemName=mblode.zotero)、[Pandoc Citer](https://marketplace.visualstudio.com/items?itemName=notZaki.pandocciter)
|
||||
|
||||
</div>
|
||||
|
||||
<div class=rdiv>
|
||||
|
||||
**Obsidian**
|
||||
- [Obsidian 主页](https://obsidian.md/)
|
||||
- 基于 Markdown 的本地知识管理软件
|
||||
- 除官方同步和发布功能外，对个人使用者完全免费
|
||||
- 功能丰富、插件众多、开发社区活跃
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
## Marp 基本用法
|
||||
|
||||
<!-- _header: \ ***@Awesome Marp*** *关于模板* *封面页* *目录页* *分栏与分列* *引用盒子* *导航栏* **基础知识**-->
|
||||
<!-- _class: navbar fixedtitleB -->
|
||||
|
||||
<div class="div">
|
||||
|
||||
- 几个字总结 [Marp](https://marp.app/)：使用 Markdown 创作演示文稿
|
||||
- 来自 Marp 官方网页的一段话：Marp (also known as the Markdown Presentation Ecosystem) provides an intuitive experience for creating beautiful slide decks. You only have to focus on writing your story in a Markdown document.
|
||||
|
||||
- 在 Markdown 文件的顶部 YAML 区域，通过 `marp: true` 启动 Marp，然后即可开启侧边预览，VS Code 界面左边是代码区域，右边为预览区域
|
||||
- 内容遵循 Markdown 语法，但 Marp 增加了一些内置指令，而且指令分为全局指令和[局部指令](https://marpit.marp.app/directives?id=local-directives-1)，全局指令建议放置于 YAML 区，局部指令位于当前页面，不同页面通过 `---` 切分
|
||||
- 推荐阅读：Marpit [官方文档](https://marpit.marp.app)及[中译版](https://caizhiyuan.gitee.io/categories/skills/20200730-marp.html#%E5%8A%9F%E8%83%BD)，五分钟学会 Marp[（上）](https://www.lianxh.cn/news/97fccdca2d7a5.html)、[（下）](https://www.lianxh.cn/news/521900220dd33.html)
|
||||
</div>
|
||||
|
||||
## Marp 基本用法
|
||||
|
||||
<!-- _header: \ ***@Awesome Marp*** *关于模板* *封面页* *目录页* *分栏与分列* *引用盒子* *导航栏* **基础知识**-->
|
||||
<!-- _class: navbar -->
|
||||
|
||||
```yaml
|
||||
---
|
||||
marp: true # 开启 Marp
|
||||
size: 16:9 # 设定页面比例，常见有 16:9 或 4:3，默认为16:9
|
||||
theme: gaia # 切换主题，内置 3 种样式的主题，可以自定义主题
|
||||
paginate: true # 开启页码
|
||||
headingDivider: 2 # 通过二级标题切分页面，省去手动换页的麻烦
|
||||
footer: 初虹 # 设置页脚区域的内容，如果设定页眉的内容，则为 header
|
||||
---
|
||||
```
|
||||
|
||||
- 如果想让页面同时被多个级别的标题切分，比如，以二级~四级标题分割页面，可以 `headingDivider: [2,3,4]`
|
||||
- 想要使得多个自定义样式渲染同一个页面，可直接将不同自定义样式以空格连接，比如：`<!-- _class: cols-2-64 fglass -->`
|
||||
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: lastpage -->
|
||||
<!-- _footer: "" -->
|
||||
|
||||
###### 欢迎交流 ~
|
||||
|
||||
<div class="icons">
|
||||
|
||||
- <i class="fa-solid fa-envelope"></i>
|
||||
- 邮箱：ch2099058972@163.com
|
||||
- <i class="fa-brands fa-weixin"></i>
|
||||
- 微信：favourhong
|
||||
- <i class="fa-solid fa-house"></i>
|
||||
- 公众号：虹鹄山庄
|
||||
|
||||
<div>
|
||||
|
||||
## 创作不易，buy me a coffee 🤙~
|
||||
|
||||
<!-- _class: trans -->
|
||||
<!-- _footer: "" -->
|
||||
<!-- _paginate: "" -->
|
||||
|
||||
<br>
|
||||
|
||||
|
||||
Executable
BIN
Binary file not shown.
Executable
+1032
File diff suppressed because one or more lines are too long
Executable
+942
@@ -0,0 +1,942 @@
|
||||
---
|
||||
marp: true
|
||||
size: 16:9
|
||||
theme: am_red
|
||||
paginate: true
|
||||
headingDivider:
|
||||
- 2
|
||||
- 3
|
||||
footer: \ *初虹（虹鹄山庄）* *Awesome Marp：轻松取代 LaTeX Beamer！* *2024年1月13日（v1.3）*
|
||||
created: 2025-09-09T18:22
|
||||
updated: 2025-09-22T13:27
|
||||
---
|
||||
|
||||
|
||||
<!-- _class: cover_a
|
||||
<!-- _header: "" -->
|
||||
<!-- _footer: "" -->
|
||||
<!-- _paginate: "" -->
|
||||
|
||||
# Awesome Marp：轻松取代 LaTeX Beamer！
|
||||
|
||||
###### “用法简单、功能全面的个性化 PPT 模板”
|
||||
|
||||
@初虹
|
||||
公众号：虹鹄山庄
|
||||
发布时间：2024 年 1 月 13 日（v1.3）
|
||||
<ch2099058972@163.com>
|
||||
Awesome-Marp 地址：[GitHub 库](https://github.com/favourhong/Awesome-Marp)/[Gitee 库](https://gitee.com/favourhong/Awesome-Marp)
|
||||
|
||||
## Awesome Marp 有什么？
|
||||
|
||||
<!-- _class: cols2_ol_ci fglass toc_a -->
|
||||
<!-- _footer: "" -->
|
||||
<!-- _header: "CONTENTS" -->
|
||||
<!-- _paginate: "" -->
|
||||
|
||||
- [关于模板](#3)
|
||||
- [封面页](#10)
|
||||
- [目录页](#16)
|
||||
- [页面分栏与列表分列](#20)
|
||||
- [引用、链接和引用盒子](#38)
|
||||
- [导航栏](#45)
|
||||
- [其他自定义样式](#48)
|
||||
- [需要知道的基础知识](#56)
|
||||
- [最后一页](#59)
|
||||
|
||||
## 1. 关于模板
|
||||
|
||||
<!-- _class: trans -->
|
||||
<!-- _footer: "" -->
|
||||
<!-- _paginate: "" -->
|
||||
|
||||
## 1. 关于模板
|
||||
|
||||
- **开始之前：** 你需要知道这样几个工具，Markdown、Markdown 编辑器（VS Code 或 Obsidian）和 Marp。关于这三者是个啥，我不做详细地介绍，但在[第 55 页](#55)-[第 58 页](#58)会有一些凝练性的内容给你参考，同时我提供了不少的链接，也供你参阅。
|
||||
- **为什么要开发 Awesome Marp？**
|
||||
- Marp 原生仅提供 3 种主题（`default` / `gaia` / `uncover`），呈现效果一般。于是我根据自己的使用情况，边用边改造，陆续打磨了这样的一整套模板。
|
||||
- **目前发布的 v1.3 有 38 个自定义样式、6 种颜色的主题**（后面有呈现效果）
|
||||
- **Awesome Marp 的几个特色：**
|
||||
- 支持分栏呈现、支持 Callouts（类似于 Beamer 中的定理框）、提供多种类型的封面页和目录页、可以实现导航进度栏、图片支持自定义居中/居左/居右对齐等
|
||||
|
||||
- 本着「开箱即用」的原则，我将本项目文件夹打包上传到了[GitHub](https://github.com/favourhong/Awesome-Marp) 和 [Gitee](https://gitee.com/favourhong/Awesome-Marp)
|
||||
- 用到的工具：软件 [Visual Studio Code](https://code.visualstudio.com) 或 [Obsidian](https://obsidian.md/)、[Marp for VScode（插件）](https://marketplace.visualstudio.com/items?itemName=marp-team.marp-vscode)
|
||||
|
||||
## 1. 关于模板
|
||||
|
||||
|
||||
- Awesome Marp 支持 38 个自定义样式，使用时需在页面指定（如 `<!-- _class: trans -->`）：
|
||||
|
||||
| 封面页 | 目录页 | 列表 | 引用盒子 | 其他 1 | 其他 2 |
|
||||
| --------- | ------- | ----------- | ----------- | ----------------------------- | --------------------------------------------------------------- |
|
||||
| `cover_a` | `toc_a` | `cols-2` | `bq-black` | 过渡页面 `trans` | 图表等的标题 `caption` |
|
||||
| `cover_b` | `toc_b` | `cols-2-64` | `bq-purple` | 最后一页 `lastpage` | 非嵌套无序列表的毛玻璃效果 `fglass` |
|
||||
| `cover_c` | | `cols-2-73` | `bq-red` | 导航栏 `navbar` | 脚注：`footnote` |
|
||||
| `cover_d` | | `cols-3` | `bq-blue` | 标题固定+无底色 `fixedtitleA` | 调节字体大小：`tinytext`/`smalltext`/<br>`largetext`/`hugetext` |
|
||||
| `cover_e` | | `cols-2-46` | `bq-green` | 标题固定+有底色 `fixedtitleB` | |
|
||||
| | | `cols-2-37` | | 两列有序列表 `cols2_ol_sq/ci` | |
|
||||
| | | `rows-2` | | 两列无序列表 `cols_ul_sq/ci` | |
|
||||
| | | `pin-3` | | 单列有序列表 `col1_ul_sq/ci` | |
|
||||
|
||||
|
||||
## 1. 关于模板
|
||||
|
||||
|
||||
- Awesome Marp 的主题色（6 种），可在 YAML 区切换 Theme，如 `theme: am_dark`：
|
||||
|
||||
| 深色 | 绿色 | 红色 | 蓝色 | 棕色 | 紫色
|
||||
|---------|----------|--------|---------|----------|----|
|
||||
| `am_dark` | `am_green` | `am_red` | `am_blue` | `am_brown` |`am_purple`|
|
||||
|
||||
|
||||
## 1. 关于模板
|
||||
|
||||
- 如何使用：
|
||||
- **搭配 VS Code**：直接使用 VS Code 打开 `Awesome-Marp` 文件夹
|
||||
- 如果你想「拿来即用」，直接根据我分享的 Markdown 源码文件，对照修改就好了~
|
||||
- 如果你对部分效果不满意、期望简单微调的话，目前在 `Awesome-Marp/themes` 下有 6 个 CSS 文件，这些 CSS 文件决定了 Markdown 源码的最终渲染效果，可以试着改一改~
|
||||
- 如果你能够自行定制个性化 CSS 文件，渲染前，别忘在 `Awesome-Marp/.vscode/settings.json` 里加上你的 CSS 文件路径~
|
||||
- **搭配 Obsidian**：安装 [Marp Slides 插件](https://github.com/samuele-cozzi/obsidian-marp-slides)，并配置相应 CSS 路径
|
||||
|
||||
- 字体：因担心版权问题，需自行下载字体并安装，Awesome Marp 用到的字体有：
|
||||
- 正文字体：`Latin Modern Math`、`方正宋刻本秀楷简体`，如果未安装，默认将使用 `Calibri` 和 `楷体`
|
||||
- 标题字体：`Optima LT Medium`、`方正苏新诗柳楷简体`，如果未安装，默认将使用 `Arial` 和 `黑体`
|
||||
- 脚注字体：`Charm` 和 `叶根友毛笔行书修正版`，如果未安装，默认将使用 `Calibri` 和 `楷体`
|
||||
- 代码字体：`Fira Code` 和 `霞鹜文楷等宽`，如果未安装，默认将使用 `Consolas` 和 `华文中宋`
|
||||
|
||||
## 1. 关于模板：更新日志
|
||||
|
||||
- [Awesome Marp v1.0：我开发了一整套 Marp 主题，Markdown 转换的 PPT 也可以很好看！](https://mp.weixin.qq.com/s?__biz=MzkwOTE3NDExOQ==&mid=2247486787&idx=1&sn=2652ddae81f50240844cb652780912e1&chksm=c13ff94bf648705da1ba986b91265e3ff018acaffcfa60d7807a81be22176005e7a2b4483627&scene=178&cur_album_id=3132459596339757070#rd)
|
||||
- [Awesome Marp v1.1：标题行不随正文浮动，这下更像 Beamer 了！](https://mp.weixin.qq.com/s?__biz=MzkwOTE3NDExOQ==&mid=2247486800&idx=1&sn=527348e242576079e4bd6cd1823c823a&chksm=c13ff958f648704e40a202db6ad5fa215ef4c189d66403e161d6ace9828406a8747ac755684f&scene=178&cur_album_id=3132459596339757070#rd)
|
||||
- [Awesome Marp v1.2：增加脚注、调节字体大小等样式～](https://mp.weixin.qq.com/s?__biz=MzkwOTE3NDExOQ==&mid=2247486825&idx=1&sn=56d632ce164831438ec87c1b20ed4c4c&chksm=c13ff961f64870774f069ab816340783d8f54fd6b89363b8d9412c593efc640851ce9edd8833&scene=178&cur_album_id=3132459596339757070#rd)
|
||||
- [Awesome Marp v1.3：几处小更新～](https://mp.weixin.qq.com/s?__biz=MzkwOTE3NDExOQ==&mid=2247486869&idx=1&sn=fcc377ff6a5930436e5078a09d53f0ab&chksm=c13ff99df648708b89bafba030b27909d0022279e26da723ca54a1666fe55f50a4230f050662&scene=178&cur_album_id=3132459596339757070#rd)
|
||||
|
||||
|
||||
## 下面让我们看看效果吧 ~
|
||||
|
||||
<!-- _class: trans -->
|
||||
<!-- _footer: "" -->
|
||||
<!-- _paginate: "" -->
|
||||
|
||||
## 2. 封面页
|
||||
|
||||
<!-- _class: trans -->
|
||||
<!-- _footer: "" -->
|
||||
<!-- _paginate: "" -->
|
||||
|
||||
## 2. 封面页
|
||||
|
||||
- 大标题：采用一级标题 `# ` （如：`# Awesome Marp：自定义 Marp 主题`）
|
||||
- 副标题：采用六级标题 `###### ` （如：`###### 打造简便又不失个性的演示文稿`）
|
||||
- 本套模板提供 5 种封面页样式，使用时需要在页面中设定局部指令，如：`<!-- _class: cover_a -->`
|
||||
- `cover_a`：[第 1 种](#1)
|
||||
- `cover_b`：[第 2 种](#12)
|
||||
- `cover_c`：预留 header 可设定学校 logo，footer 可设定校训 [第 3 种](#13)
|
||||
- `cover_d`：只预留了 footer 设定校训 [第 4 种](#14)
|
||||
- `cover_e`：预留 header 设定学校 logo，footer 设定学校 logo 和学校名称[第 5 种](#15)
|
||||
|
||||
- 如果已经设定了全局 footer、header 或页码，但又不期望在封面页中出现，可以 `<!-- _footer: "" -->` / `<!-- _header: "" -->` / `<!-- _paginate: "" -->` 分别将其局部隐藏起来
|
||||
- 当标题文字超过页面宽度会溢出换行，这里可以使用 `<!-- fit -->` 根据页面宽度自动调整文字大小
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: cover_b -->
|
||||
<!-- _header: "" -->
|
||||
<!-- _footer: "" -->
|
||||
<!-- _paginate: "" -->
|
||||
|
||||
# Awesome Marp：轻松取代 LaTeX Beamer！
|
||||
|
||||
###### “用法简单、功能全面的个性化 PPT 模板”
|
||||
|
||||
@初虹
|
||||
公众号：虹鹄山庄
|
||||
发布时间：2024 年 1 月 13 日（v1.3）
|
||||
<ch2099058972@163.com>
|
||||
Awesome-Marp 地址：[GitHub 库](https://github.com/favourhong/Awesome-Marp)/[Gitee 库](https://gitee.com/favourhong/Awesome-Marp)
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: cover_c -->
|
||||
<!-- _paginate: "" -->
|
||||
<!-- _footer: 厚德博学 经济匡时 -->
|
||||
<!-- _header:  -->
|
||||
|
||||
|
||||
# <!-- fit -->Awesome Marp：轻松取代 LaTeX Beamer！
|
||||
|
||||
###### “用法简单、功能全面的个性化 PPT 模板”
|
||||
|
||||
@初虹
|
||||
公众号：虹鹄山庄
|
||||
发布时间：2024 年 1 月 13 日（v1.3）
|
||||
<ch2099058972@163.com>
|
||||
Awesome-Marp 地址：[GitHub 库](https://github.com/favourhong/Awesome-Marp)/[Gitee 库](https://gitee.com/favourhong/Awesome-Marp)
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: cover_d -->
|
||||
<!-- _paginate: "" -->
|
||||
<!-- _footer: "厚德博学 经济匡时" -->
|
||||
|
||||
# <!-- fit -->Awesome Marp：轻松取代 LaTeX Beamer！
|
||||
|
||||
###### “用法简单、功能全面的个性化 PPT 模板”
|
||||
|
||||
@初虹
|
||||
公众号：虹鹄山庄
|
||||
发布时间：2024 年 1 月 13 日（v1.3）
|
||||
<ch2099058972@163.com>
|
||||
Awesome-Marp 地址：[GitHub 库](https://github.com/favourhong/Awesome-Marp)/[Gitee 库](https://gitee.com/favourhong/Awesome-Marp)
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: cover_e -->
|
||||
<!-- _paginate: "" -->
|
||||
<!-- _footer:  -->
|
||||
<!-- _header:  -->
|
||||
|
||||
|
||||
# <!-- fit -->Awesome Marp：轻松取代 LaTeX Beamer！
|
||||
|
||||
###### “用法简单、功能全面的个性化 PPT 模板”
|
||||
|
||||
@初虹
|
||||
公众号：虹鹄山庄
|
||||
发布时间：2024 年 1 月 13 日（v1.3）
|
||||
<ch2099058972@163.com>
|
||||
Awesome-Marp 地址：[GitHub 库](https://github.com/favourhong/Awesome-Marp)/[Gitee 库](https://gitee.com/favourhong/Awesome-Marp)
|
||||
|
||||
## 3. 目录页
|
||||
|
||||
<!-- _class: trans -->
|
||||
<!-- _footer: "" -->
|
||||
<!-- _paginate: "" -->
|
||||
|
||||
## 3. 目录页
|
||||
|
||||
- Awesome Marp 提供了至少 2 种目录页样式，使用时同样需要设定局部样式
|
||||
- `toc_a`：需要将 header 的内容设定为 `CONTENTS`，即 `<!-- _header: "CONTENTS" -->`
|
||||
- `toc_b`：需要将 header 的内容设定为 `目录<br>CONTENTS<br>你的LOGO地址`，即 `<!-- _header: 目录<br>CONTENTS<br>-->`
|
||||
- 提供的几种分栏列表样式，也可以作为目录页使用，如 `<!-- _class: cols2_ol_ci fglass -->`（效果见[这里](#32)）
|
||||
|
||||
- 类似地，如果已经定义了全局 footer 或页码，可以使用 `<!-- _footer: "" -->` / `<!-- _paginate: "" -->` 分别将其局部隐藏起来
|
||||
- 目录页样式：[第 1 种](#2)、[第 2 种](#18)和[第 3 种](#19)
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: toc_a -->
|
||||
<!-- _header: "CONTENTS" -->
|
||||
<!-- _footer: "" -->
|
||||
<!-- _paginate: "" -->
|
||||
|
||||
- [关于模板](#3)
|
||||
- [封面页](#10)
|
||||
- [目录页](#16)
|
||||
- [页面分栏与列表分列](#20)
|
||||
- [引用、链接和引用盒子](#38)
|
||||
- [导航栏](#45)
|
||||
- [其他自定义样式](#48)
|
||||
- [需要知道的基础知识](#56)
|
||||
- [最后一页](#59)
|
||||
|
||||
---
|
||||
|
||||
<!-- _header: 目录<br>CONTENTS<br>-->
|
||||
<!-- _class: toc_b -->
|
||||
<!-- _footer: "" -->
|
||||
<!-- _paginate: "" -->
|
||||
|
||||
- [关于模板](#3)
|
||||
- [封面页](#10)
|
||||
- [目录页](#16)
|
||||
- [页面分栏与列表分列](#20)
|
||||
- [引用、链接和引用盒子](#38)
|
||||
- [导航栏](#45)
|
||||
- [其他自定义样式](#48)
|
||||
- [需要知道的基础知识](#56)
|
||||
- [最后一页](#59)
|
||||
|
||||
|
||||
## 4. 页面分栏与列表分列
|
||||
|
||||
<!-- _class: trans -->
|
||||
<!-- _footer: "" -->
|
||||
<!-- _paginate: "" -->
|
||||
|
||||
## 4.1 页面分栏与列表分列：页面分栏
|
||||
|
||||
- Awesome Marp 提供了 8 种页面分栏方式，分别为：
|
||||
- `cols-2`：[两列分栏，五五平分](#23)
|
||||
- `cols-2-64`：[两列分栏，六四分](#24)
|
||||
- `cols-2-73`：[两列分栏，七三分](#25)
|
||||
- `cols-2-46`：[两列分栏，四六分](#26)
|
||||
- `cols-2-37`：[两列分栏，三七分](#27)
|
||||
- `cols-3`：[三列分栏，平分](#28)
|
||||
- `rows-2`：[两行分栏](#29)
|
||||
- `pin-3`：[品字型分栏](#30)
|
||||
|
||||
- 如果某一栏为图片，可以将 `class=ldiv` 换成 `class=limg`，这样能够实现图片的垂直居中对齐呢（`class=ldiv` 为居上对齐）
|
||||
|
||||
|
||||
## 4.1 页面分栏与列表分列：页面分栏
|
||||
|
||||
- 以 `<!-- _class: cols-2 -->` 为例，Markdown 的源码为：
|
||||
|
||||
```markdown
|
||||
<!-- _class: cols-2 -->
|
||||
<div class=ldiv>
|
||||
|
||||
第一列（左侧栏）的内容在这里
|
||||
|
||||
内容可以是普通纯文本，可以是列表，也可以是引用块、链接、图片等
|
||||
</div>
|
||||
|
||||
<div class=rdiv>
|
||||
|
||||
第二列（右侧栏）的内容在这里
|
||||
</div>
|
||||
```
|
||||
|
||||
- 如果是分三栏（`<!-- _class: cols-3 -->`），还需要再增加 `<div class="mdiv"></div>` 标签
|
||||
|
||||
|
||||
## 《荷塘月色》（两栏五五分）
|
||||
|
||||
<!-- _class: cols-2 -->
|
||||
|
||||
<div class=ldiv>
|
||||
|
||||
曲曲折折的荷塘上面，弥望的是田田的叶子。叶子出水很高，像亭亭的舞女的裙。
|
||||
|
||||
层层的叶子中间，零星地点缀着些白花，有袅娜地开着的，有羞涩地打着朵儿的；正如一粒粒的明珠，又如碧天里的星星，又如刚出浴的美人。
|
||||
|
||||
微风过处，送来缕缕清香，仿佛远处高楼上渺茫的歌声似的。这时候叶子与花也有一丝的颤动，像闪电般，霎时传过荷塘的那边去了。
|
||||
|
||||
叶子本是肩并肩密密地挨着，这便宛然有了一道凝碧的波痕。叶子底下是脉脉的流水，遮住了，不能见一些颜色；而叶子却更见风致了。
|
||||
|
||||
—— 朱自清《荷塘月色》 [返回](#21)
|
||||
</div>
|
||||
|
||||
<div class=rimg>
|
||||
|
||||
<!--  -->
|
||||
|
||||
</div>
|
||||
|
||||
## 《春》（两栏六四分）
|
||||
|
||||
<!-- _class: cols-2-64 -->
|
||||
|
||||
<div class=limg>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class=rdiv>
|
||||
|
||||
盼望着，盼望着，东风来了，春天的脚步近了。
|
||||
|
||||
一切都像刚睡醒的样子，欣欣然张开了眼。山朗润起来了，水涨起来了，太阳的脸红起来了。
|
||||
|
||||
小草偷偷地从土里钻出来，嫩嫩的，绿绿的。园子里，田野里，瞧去，一大片一大片满是的。坐着，躺着，打两个滚，踢几脚球，赛几趟跑，捉几回迷藏。风轻悄悄的，草软绵绵的。
|
||||
|
||||
—— 朱自清《春》
|
||||
|
||||
[返回](#21)
|
||||
</div>
|
||||
|
||||
## 经典散文诗篇（两栏七三分）
|
||||
|
||||
<!-- _class: cols-2-73 -->
|
||||
|
||||
<div class=limg>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class=rdiv>
|
||||
|
||||
经典的散文诗篇有：
|
||||
|
||||
- 朱自清：《荷塘月色》
|
||||
- 林清玄：《月到天心》
|
||||
- 郁达夫：《古都的秋》
|
||||
- 张爱玲：《花落的声音》
|
||||
- 余光中：《听听那冷雨》
|
||||
- 张抗抗：《牡丹的拒绝》
|
||||
- 丰子恺：《杨柳》
|
||||
- 周作人：《乌篷船》
|
||||
- 郑振铎：《石湖》
|
||||
- 梁实秋：《雅舍》
|
||||
|
||||
[返回](#21)
|
||||
</div>
|
||||
|
||||
## 《春》（两栏四六分）
|
||||
|
||||
<!-- _class: cols-2-46 -->
|
||||
|
||||
<div class=ldiv>
|
||||
|
||||
|
||||
盼望着，盼望着，东风来了，春天的脚步近了。
|
||||
|
||||
一切都像刚睡醒的样子，欣欣然张开了眼。山朗润起来了，水涨起来了，太阳的脸红起来了。
|
||||
|
||||
小草偷偷地从土里钻出来，嫩嫩的，绿绿的。园子里，田野里，瞧去，一大片一大片满是的。坐着，躺着，打两个滚，踢几脚球，赛几趟跑，捉几回迷藏。风轻悄悄的，草软绵绵的。
|
||||
|
||||
—— 朱自清《春》
|
||||
|
||||
[返回](#21)
|
||||
</div>
|
||||
|
||||
<div class=rimg>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
## 经典散文诗篇（两栏三七分）
|
||||
|
||||
<!-- _class: cols-2-37 -->
|
||||
|
||||
<div class=ldiv>
|
||||
|
||||
|
||||
经典的散文诗篇有：
|
||||
|
||||
- 朱自清：《荷塘月色》
|
||||
- 林清玄：《月到天心》
|
||||
- 郁达夫：《古都的秋》
|
||||
- 张爱玲：《花落的声音》
|
||||
- 余光中：《听听那冷雨》
|
||||
- 张抗抗：《牡丹的拒绝》
|
||||
- 丰子恺：《杨柳》
|
||||
- 周作人：《乌篷船》
|
||||
- 郑振铎：《石湖》
|
||||
- 梁实秋：《雅舍》
|
||||
|
||||
[返回](#21)
|
||||
</div>
|
||||
|
||||
<div class=rimg>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
## 夏与秋（三栏三平分）
|
||||
|
||||
<!-- _class: cols-3 -->
|
||||
|
||||
<div class=ldiv>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class=mdiv>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class=rdiv>
|
||||
|
||||
|
||||
|
||||
[返回](#21)
|
||||
</div>
|
||||
|
||||
|
||||
## 高山与沙漠（两行分栏）
|
||||
|
||||
<!-- _class: rows-2 -->
|
||||
|
||||
<div class="timg">
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="bimg">
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
## 《宇宙的奥秘》（品字型分栏）
|
||||
|
||||
<!-- _class: pin-3 -->
|
||||
|
||||
<div class="tdiv">
|
||||
|
||||
> 四百年前，两位截然不同的科学家突破了当时已知世界的边界。1609 年在威尼斯，伽利略・伽利雷透过望远镜观察星辰，并制作仪器和进行实验。在布拉格，科班出身的神学家约翰内斯・开普勒发现了行星运动定律，奠定了近代天体物理学的基础，并思考着宇宙的宏伟构造。托马斯・德・帕多瓦以至今较少受到关注却扣人心弦的通信往来为基础，讲述了这两位类型如此迥异的学者之间不对等的关系，以及他们如何在同样的时刻却以各自的方式探索星辰的奥秘。在彼此的鉴照下，他们的远见与固执、睿智与无知得以呈现。这是一部介绍新科学的崛起以及近代来临之际的巨大变革的作品。 ——《宇宙的奥妙》
|
||||
</div>
|
||||
|
||||
<div class="limg">
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="rimg">
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
## 4.2 页面分栏与列表分列：列表分列
|
||||
|
||||
Awesome Marp v1.3 提供了 6 种列表分列的方式，分别为：
|
||||
|
||||
- `cols2_ol_sq`：呈现效果为[有序列表 + 方形序号](#32)
|
||||
- `cols2_ol_ci`：呈现效果为[有序列表 + 圆形序号](#33)
|
||||
- `cols2_ul_sq`：呈现效果为[无序列表 + 方形序号](#34)
|
||||
- `cols2_ul_ci`：呈现效果为[无序列表 + 圆形序号](#35)
|
||||
- `col1_ul_sq`：呈现效果为[有序列表 + 方形序号](#36)
|
||||
- `col1_ul_ci`：呈现效应为[有序列表 + 圆形序号](#37)
|
||||
|
||||
|
||||
## 《微观经济学：现代观点》
|
||||
|
||||
<!-- _class: cols2_ol_sq fglass -->
|
||||
|
||||
渲染效果为**有序列表+方形序号**
|
||||
自定义样式为：`<!-- _class: cols2_ol_sq fglass -->`
|
||||
|
||||
- 偏好和效用
|
||||
- 预算约束和消费者的最优选择
|
||||
- 需求函数
|
||||
- 劳动力和储蓄的供给函数
|
||||
- 福利经济学：单人模型和多人模型
|
||||
- 企业理论：单投入品和多投入品模型
|
||||
- 完全竞争市场
|
||||
- 完全垄断、垄断竞争与双寡头垄断
|
||||
- 博弈论
|
||||
- 交换经济与生产经济
|
||||
- 外部性与公共品
|
||||
- 不确定性、期望效用和不对称信息
|
||||
|
||||
[返回](#28)
|
||||
|
||||
|
||||
## 《微观经济学：现代观点》
|
||||
|
||||
<!-- _class: cols2_ol_ci fglass -->
|
||||
|
||||
渲染效果为**有序列表+圆形序号**
|
||||
自定义样式为：`<!-- _class: cols2_ol_ci fglass -->`
|
||||
|
||||
- 偏好和效用
|
||||
- 预算约束和消费者的最优选择
|
||||
- 需求函数
|
||||
- 劳动力和储蓄的供给函数
|
||||
- 福利经济学：单人模型和多人模型
|
||||
- 企业理论：单投入品和多投入品模型
|
||||
- 完全竞争市场
|
||||
- 完全垄断、垄断竞争与双寡头垄断
|
||||
- 博弈论
|
||||
- 交换经济与生产经济
|
||||
- 外部性与公共品
|
||||
- 不确定性、期望效用和不对称信息
|
||||
|
||||
[返回](#28)
|
||||
|
||||
## 《置身事内》
|
||||
|
||||
<!-- _class: cols2_ul_sq fglass -->
|
||||
|
||||
渲染效果为**无序列表+方形序号**
|
||||
自定义样式为：`<!-- _class: cols2_ul_sq fglass -->`
|
||||
|
||||
- 第一章：地方政府的权力与事务
|
||||
- 第二章：财税与政府行为
|
||||
- 第三章：政府投融资与债务
|
||||
- 第四章：工业化中的政府角色
|
||||
- 第五章：城市化与不平衡
|
||||
- 第六章：债务与风险
|
||||
- 第七章：国内国际失衡
|
||||
- 第八章：政府与经济发展
|
||||
|
||||
[返回](#28)
|
||||
|
||||
## 《置身事内》
|
||||
|
||||
<!-- _class: cols2_ul_ci fglass -->
|
||||
|
||||
渲染效果为**无序列表+圆形序号**
|
||||
自定义样式为：`<!-- _class: cols2_ul_ci fglass -->`
|
||||
|
||||
- 第一章：地方政府的权力与事务
|
||||
- 第二章：财税与政府行为
|
||||
- 第三章：政府投融资与债务
|
||||
- 第四章：工业化中的政府角色
|
||||
- 第五章：城市化与不平衡
|
||||
- 第六章：债务与风险
|
||||
- 第七章：国内国际失衡
|
||||
- 第八章：政府与经济发展
|
||||
|
||||
[返回](#28)
|
||||
|
||||
## 《微观经济学：现代观点》
|
||||
|
||||
<!-- _class: col1_ol_sq fglass -->
|
||||
|
||||
渲染效果为**单列+有序列表+方形序号**
|
||||
自定义样式为：`<!-- _class: col1_ul_sq fglass -->`
|
||||
|
||||
- 预算约束和消费者的最优选择
|
||||
- 劳动力和储蓄的供给函数
|
||||
- 福利经济学：单人模型和多人模型
|
||||
- 企业理论：单投入品和多投入品模型
|
||||
- 完全竞争市场
|
||||
- 完全垄断、垄断竞争与双寡头垄断
|
||||
- 交换经济与生产经济
|
||||
- 不确定性、期望效用和不对称信息
|
||||
|
||||
## 《微观经济学：现代观点》
|
||||
|
||||
<!-- _class: col1_ol_ci fglass -->
|
||||
|
||||
渲染效果为**单列+有序列表+圆形序号**
|
||||
自定义样式为：`<!-- _class: col1_ul_ci fglass -->`
|
||||
|
||||
- 预算约束和消费者的最优选择
|
||||
- 劳动力和储蓄的供给函数
|
||||
- 福利经济学：单人模型和多人模型
|
||||
- 企业理论：单投入品和多投入品模型
|
||||
- 完全竞争市场
|
||||
- 完全垄断、垄断竞争与双寡头垄断
|
||||
- 交换经济与生产经济
|
||||
- 不确定性、期望效用和不对称信息
|
||||
|
||||
## 5. 引用、链接和 Callouts
|
||||
|
||||
<!-- _class: trans -->
|
||||
<!-- _footer: "" -->
|
||||
<!-- _paginate: "" -->
|
||||
|
||||
## 5. 引用、链接和 Callouts
|
||||
|
||||
- 引用的呈现效果为：
|
||||
|
||||
> 合成控制法 (Synthetic Control Method) 最早由 Abadie and Gardeazabal (2003) 提出，用来研究西班牙巴斯克地区恐怖活动的经济成本，属于案例研究范畴 (Case Study)。
|
||||
|
||||
- 链接的呈现效果：
|
||||
- [经管数据清洗与 Stata 实战：三大地级市数据库和 CSMAR 上市公司数据](https://mp.weixin.qq.com/s/D0cYVPJJsNiu61GcYwV6cg)
|
||||
- [Stata 基础：从论文文件夹体系的建立说起](https://mp.weixin.qq.com/s?__biz=MzkwOTE3NDExOQ==&mid=2247486489&idx=1&sn=2eb51e85a01541c7a552a9434e087512&scene=21#wechat_redirect)
|
||||
- Callouts 是 Awesome Marp 提供的自定义的样式，有 5 种颜色可选：
|
||||
- [紫色](#40)：`bq-purple`
|
||||
- [蓝色](#41)：`bq-blue`
|
||||
- [绿色](#42)：`bq-green`
|
||||
- [红色](#43)：`bq-red`
|
||||
- [黑色](#44)：`bq-black`
|
||||
|
||||
## 5. 引用、链接和引用盒子
|
||||
|
||||
<!-- _class: bq-purple -->
|
||||
|
||||
- 自定义样式为：`<!-- _class: bq-purple -->`
|
||||
|
||||
> 合成控制法 (Synthetic Control Method)
|
||||
>
|
||||
> SCM 最早由 Abadie and Gardeazabal (2003) 提出，用来研究西班牙巴斯克地区恐怖活动的经济成本，属于案例研究范畴 (Case Study)。Athey & Imbens (2017) 认为它是过去 15 年计量方法领域最重要的创新。<br>
|
||||
> 合成控制法的基本思想是：虽然无法找到巴斯克地区的最佳控制地区，但可对西班牙的若干大城市进行适当的线性组合（赋予不同的权重），以构造一个更为贴切的「合成控制地区」 (Synthetic Control Region)，然后将真实的巴斯克地区与「合成的巴斯克地区」进行对比，即可得到恐袭的影响。
|
||||
|
||||
[返回](#39)
|
||||
|
||||
## 5. 引用、链接和引用盒子
|
||||
|
||||
<!-- _class: bq-blue -->
|
||||
|
||||
- 自定义样式为：`<!-- _class: bq-blue -->`
|
||||
|
||||
> 合成控制法 (Synthetic Control Method)
|
||||
>
|
||||
> SCM 最早由 Abadie and Gardeazabal (2003) 提出，用来研究西班牙巴斯克地区恐怖活动的经济成本，属于案例研究范畴 (Case Study)。Athey & Imbens (2017) 认为它是过去 15 年计量方法领域最重要的创新。<br>
|
||||
> 合成控制法的基本思想是：虽然无法找到巴斯克地区的最佳控制地区，但可对西班牙的若干大城市进行适当的线性组合（赋予不同的权重），以构造一个更为贴切的「合成控制地区」 (Synthetic Control Region)，然后将真实的巴斯克地区与「合成的巴斯克地区」进行对比，即可得到恐袭的影响。
|
||||
|
||||
[返回](#39)
|
||||
|
||||
## 5. 引用、链接和引用盒子
|
||||
|
||||
<!-- _class: bq-green -->
|
||||
|
||||
- 自定义样式为：`<!-- _class: bq-green -->`
|
||||
|
||||
> 合成控制法 (Synthetic Control Method)
|
||||
>
|
||||
> SCM 最早由 Abadie and Gardeazabal (2003) 提出，用来研究西班牙巴斯克地区恐怖活动的经济成本，属于案例研究范畴 (Case Study)。Athey & Imbens (2017) 认为它是过去 15 年计量方法领域最重要的创新。<br>
|
||||
> 合成控制法的基本思想是：虽然无法找到巴斯克地区的最佳控制地区，但可对西班牙的若干大城市进行适当的线性组合（赋予不同的权重），以构造一个更为贴切的「合成控制地区」 (Synthetic Control Region)，然后将真实的巴斯克地区与「合成的巴斯克地区」进行对比，即可得到恐袭的影响。
|
||||
|
||||
[返回](#39)
|
||||
|
||||
## 5. 引用、链接和引用盒子
|
||||
|
||||
<!-- _class: bq-red -->
|
||||
|
||||
- 自定义样式为：`<!-- _class: bq-red -->`
|
||||
|
||||
> 合成控制法 (Synthetic Control Method)
|
||||
>
|
||||
> SCM 最早由 Abadie and Gardeazabal (2003) 提出，用来研究西班牙巴斯克地区恐怖活动的经济成本，属于案例研究范畴 (Case Study)。Athey & Imbens (2017) 认为它是过去 15 年计量方法领域最重要的创新。<br>
|
||||
> 合成控制法的基本思想是：虽然无法找到巴斯克地区的最佳控制地区，但可对西班牙的若干大城市进行适当的线性组合（赋予不同的权重），以构造一个更为贴切的「合成控制地区」 (Synthetic Control Region)，然后将真实的巴斯克地区与「合成的巴斯克地区」进行对比，即可得到恐袭的影响。
|
||||
|
||||
[返回](#39)
|
||||
|
||||
## 5. 引用、链接和引用盒子
|
||||
|
||||
<!-- _class: bq-black -->
|
||||
|
||||
- 自定义样式为：`<!-- _class: bq-black -->`
|
||||
|
||||
> 合成控制法 (Synthetic Control Method)
|
||||
>
|
||||
> SCM 最早由 Abadie and Gardeazabal (2003) 提出，用来研究西班牙巴斯克地区恐怖活动的经济成本，属于案例研究范畴 (Case Study)。Athey & Imbens (2017) 认为它是过去 15 年计量方法领域最重要的创新。<br>
|
||||
> 合成控制法的基本思想是：虽然无法找到巴斯克地区的最佳控制地区，但可对西班牙的若干大城市进行适当的线性组合（赋予不同的权重），以构造一个更为贴切的「合成控制地区」 (Synthetic Control Region)，然后将真实的巴斯克地区与「合成的巴斯克地区」进行对比，即可得到恐袭的影响。
|
||||
|
||||
[返回](#39)
|
||||
|
||||
|
||||
## 6. 导航栏
|
||||
|
||||
<!-- _class: trans -->
|
||||
<!-- _footer: "" -->
|
||||
<!-- _paginate: "" -->
|
||||
|
||||
## 6. 导航栏
|
||||
|
||||
<!-- _class: navbar -->
|
||||
<!-- _header: \ ***@Awesome Marp*** *关于模板* *封面页* *目录页* *分栏与分列* *引用盒子* **导航栏** *基础知识*-->
|
||||
|
||||
- 一句题外话：打造 Awesome Marp 模板的最早初衷就是来自几位公众号粉丝朋友的询问，「Marp 是否也能实现想 Beamer 那样的顶部导航栏？」为了实现导航栏的效果，我又多学了一些 CSS 的知识，这套模板才得以成型
|
||||
|
||||
- 自定义样式为 `navbar`：`<!-- _class: navbar -->`
|
||||
- 导航栏修改自 header，最前面必须加入 `\ `
|
||||
- 当前活动标题，使用粗体 `**粗体**`
|
||||
- 其余非活动标题，使用斜体 `*斜体*`
|
||||
- 如果左侧有文字，需要使用斜粗体 `***粗斜体***`
|
||||
- 默认根据内容自动分配间距，如果希望右对齐，可以手动增加空格的方式来推动右对齐
|
||||
|
||||
|
||||
## 6. 导航栏
|
||||
|
||||
<!-- _header: \ ***@Awesome Marp*** *关于模板* *封面页* *目录页* *分栏与分列* *引用盒子* **导航栏** *基础知识*-->
|
||||
<!-- _class: navbar -->
|
||||
|
||||
这张页面的部分 Markdown 源码：
|
||||
|
||||
```markdown
|
||||
<!-- _class: navbar -->
|
||||
<!-- _header: \ ***虹鹄山庄***
|
||||
|
||||
- 自定义样式为 `navbar`：`<!-- _class: navbar -->`
|
||||
- 导航栏修改自 header，最前面必须加入 `\ `
|
||||
- 当前活动标题：使用粗体 `**粗体**`
|
||||
- 其余非活动标题：使用斜体 `*斜体*`
|
||||
- 如果左侧有文字：使用斜粗体 `***粗斜体***`
|
||||
- 默认根据内容自动分配间距，如果希望右对齐，可以手动增加空格的方式来推动右对齐
|
||||
```
|
||||
|
||||
## 7. 其他自定义样式
|
||||
|
||||
<!-- _class: trans -->
|
||||
<!-- _footer: "" -->
|
||||
<!-- _paginate: "" -->
|
||||
|
||||
|
||||
|
||||
## 7.1 固定标题行：更像 Beamer 了（`fixedtitleA`）
|
||||
|
||||
<!-- _class: fixedtitleA -->
|
||||
|
||||
- 自定义样式：`<!-- _class: fixedtitleA -->`
|
||||
|
||||
- 使当前页面的标题栏固定在顶部，而非随着内容的多少浮动
|
||||
|
||||
- 同时，页面内容也会从顶部起笔，而非垂直方向上居中显示
|
||||
|
||||
|
||||
## 7.1 固定标题行：更像 Beamer 了（`fixedtitleB`）
|
||||
|
||||
<!-- _class: fixedtitleB -->
|
||||
|
||||
|
||||
<div class="div">
|
||||
|
||||
- 自定义样式：`<!-- _class: fixedtitleB -->`
|
||||
|
||||
- `fixedtitleB` 相比于 `fixedtitleA`，标题增加了底色色块，同时缩小了标题大小
|
||||
|
||||
- 其余效果与 `fixedtitleA` 相同
|
||||
|
||||
- 但是页面正文内容需要包裹在 `<div class="div'></div>` 标签中
|
||||
</div>
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: footnote -->
|
||||
|
||||
<div class="tdiv">
|
||||
|
||||
#### 7.2 脚注的自定义样式：`footnote`
|
||||
|
||||
使用方法：
|
||||
|
||||
- 自定义样式：`<!-- _class: footnote -->`
|
||||
- 页面除脚注外的其他内容，写在 `<div class = "tdiv"></div>`
|
||||
- 页面的脚注内容，写在 `<div class = "bdiv"></div>`
|
||||
|
||||
举个例子，展示一下显示效果：
|
||||
|
||||
- 一方面，经济金融化程度的加深，使得金融部门能够凭借资本跨期配置提前抽取其他部门的未来价值，从而扩大金融和非金融部门之间的外部收入差距$^1$。另一方面，经济金融化不断增加企业股东权力，促使企业更加追求股东价值最大化，这一导向将弱化普通劳动者阶层的议价能力，食利者阶层的财产性收入增加必然会挤压劳动收入份额，从而扩大了内部收入差距$^2$。
|
||||
|
||||
</div>
|
||||
|
||||
<div class="bdiv">
|
||||
|
||||
1 张甜迪. 金融化对中国金融、非金融行业收入差距的影响[J]. 经济问题, 2015(11): 40-46.
|
||||
2 Hein E. Finance-dominated capitalism and re-distribution of income: a Kaleckian perspective[J]. Cambridge Journal of Economics, 2015, 39(3): 907-934.
|
||||
</div>
|
||||
|
||||
## 7.3 调节文字大小的自定义样式
|
||||
|
||||
<!-- _class: largetext -->
|
||||
|
||||
对于字体大小的调节，直接修改 CSS 文件应该很方便的。但有小伙伴提出，“希望可以增加字体调节的自定义样式”，于是目前提供了四种微调样式：
|
||||
|
||||
- 自定义样式 1：`<!-- _class: tinytext -->` （是默认字体大小的 0.8 倍）
|
||||
- 自定义样式 2：`<!-- _class: smalltext -->` （是默认字体大小的 0.9 倍）
|
||||
- 自定义样式 3：`<!-- _class: largetext -->` （是默认字体大小的 1.15 倍）
|
||||
- 自定义样式 4：`<!-- _class: hugetext -->` （是默认字体大小的 1.3 倍）
|
||||
|
||||
比如，本页面采用的自定义样式为 `largetext`
|
||||
|
||||
## 7.4 图表标题的自定义样式：`caption`
|
||||
|
||||
<!-- _class: caption -->
|
||||
|
||||
- 通过 `<div class="caption">宇宙的奥妙</div>` 来定义图表的标题
|
||||
|
||||
|
||||
|
||||
<div class="caption">
|
||||
宇宙的奥妙
|
||||
</div>
|
||||
|
||||
|
||||
## 需要知道的基础知识……
|
||||
|
||||
<!-- _class: trans -->
|
||||
<!-- _footer: "" -->
|
||||
<!-- _paginate: "" -->
|
||||
|
||||
|
||||
## Markdown 概览
|
||||
|
||||
<!-- _header: \ ***@Awesome Marp*** *关于模板* *封面页* *目录页* *分栏与分列* *引用盒子* *导航栏* **基础知识**-->
|
||||
<!-- _class: navbar -->
|
||||
|
||||
- Markdown 是一种**极轻量**的文本标记语言，允许人们使用**易读易写**的纯文本格式编写文档，而且对于表格、代码、图片、公式等支持良好
|
||||
- 应用广泛：网站、课程笔记/讲义、演示文稿、撰写学术论文等
|
||||
- Markdown 基础语法：
|
||||
- 参阅：[Markdown 中文文档](https://markdown-zh.readthedocs.io/en/latest/)、[Markdown 指南](https://www.markdown.xyz/)、[Markdown 菜鸟教程](https://www.runoob.com/markdown/md-tutorial.html)
|
||||
- 标题 `#`、粗体 `** **`、斜体 `* *`、删除线 `~~ ~~`、分割线 `---`、超链接 `[]()`
|
||||
- 引用 `>`、列表 `-` / `1. `、代码块
|
||||
- 脚注 `[^1]` / `[^1]:`、待办事项 `[ ]` / `[x]`
|
||||
- Markdown 进阶语法：
|
||||
- 图片 `![]()`：本地路径、网络路径（参阅：[图床与 PicGo——让你爱上记录与分享](https://sspai.com/post/65716)）
|
||||
- 数学公式：行内公式 `$...$`、行间公式 `$$...$$`
|
||||
- 支持 HTML 元素：`<br>`/`<hr>`/`<b></b>`/`<i></i>`/`<kbd></kbd>` 等
|
||||
|
||||
## 推荐的 Markdown 编辑器
|
||||
|
||||
<!-- _class: cols-2-64 navbar -->
|
||||
<!-- _header: \ ***@Awesome Marp*** *关于模板* *封面页* *目录页* *分栏与分列* *引用盒子* *导航栏* **基础知识**-->
|
||||
|
||||
<div class=ldiv>
|
||||
|
||||
**VS Code**
|
||||
- Visual Studio Code[下载地址](https://code.visualstudio.com/Download)
|
||||
- VS Code 插件：
|
||||
- 配合 Markdown：[Markdown Preview Enhanced](https://marketplace.visualstudio.com/items?itemName=shd101wyy.markdown-preview-enhanced)、[Markdown All in One](https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one)
|
||||
- 图床：[PicGo](https://marketplace.visualstudio.com/items?itemName=Spades.vs-picgo)
|
||||
- 格式化文档：[Pangu-Markdown](https://marketplace.visualstudio.com/items?itemName=xlthu.Pangu-Markdown)
|
||||
- Markdown 转 PPT：[Marp for VScode](https://marketplace.visualstudio.com/items?itemName=marp-team.marp-vscode)
|
||||
- Markdown 转思维导图：[Markmap for VScode](https://marketplace.visualstudio.com/items?itemName=gera2ld.markmap-vscode)
|
||||
- 配合 Zotero：[Citation Picker for Zotero](https://marketplace.visualstudio.com/items?itemName=mblode.zotero)、[Pandoc Citer](https://marketplace.visualstudio.com/items?itemName=notZaki.pandocciter)
|
||||
|
||||
</div>
|
||||
|
||||
<div class=rdiv>
|
||||
|
||||
**Obsidian**
|
||||
- [Obsidian 主页](https://obsidian.md/)
|
||||
- 基于 Markdown 的本地知识管理软件
|
||||
- 除官方同步和发布功能外，对个人使用者完全免费
|
||||
- 功能丰富、插件众多、开发社区活跃
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
## Marp 基本用法
|
||||
|
||||
<!-- _header: \ ***@Awesome Marp*** *关于模板* *封面页* *目录页* *分栏与分列* *引用盒子* *导航栏* **基础知识**-->
|
||||
<!-- _class: navbar fixedtitleB -->
|
||||
|
||||
<div class="div">
|
||||
|
||||
- 几个字总结 [Marp](https://marp.app/)：使用 Markdown 创作演示文稿
|
||||
- 来自 Marp 官方网页的一段话：Marp (also known as the Markdown Presentation Ecosystem) provides an intuitive experience for creating beautiful slide decks. You only have to focus on writing your story in a Markdown document.
|
||||
|
||||
- 在 Markdown 文件的顶部 YAML 区域，通过 `marp: true` 启动 Marp，然后即可开启侧边预览，VS Code 界面左边是代码区域，右边为预览区域
|
||||
- 内容遵循 Markdown 语法，但 Marp 增加了一些内置指令，而且指令分为全局指令和[局部指令](https://marpit.marp.app/directives?id=local-directives-1)，全局指令建议放置于 YAML 区，局部指令位于当前页面，不同页面通过 `---` 切分
|
||||
- 推荐阅读：Marpit [官方文档](https://marpit.marp.app)及[中译版](https://caizhiyuan.gitee.io/categories/skills/20200730-marp.html#%E5%8A%9F%E8%83%BD)，五分钟学会 Marp[（上）](https://www.lianxh.cn/news/97fccdca2d7a5.html)、[（下）](https://www.lianxh.cn/news/521900220dd33.html)
|
||||
</div>
|
||||
|
||||
## Marp 基本用法
|
||||
|
||||
<!-- _header: \ ***@Awesome Marp*** *关于模板* *封面页* *目录页* *分栏与分列* *引用盒子* *导航栏* **基础知识**-->
|
||||
<!-- _class: navbar -->
|
||||
|
||||
```yaml
|
||||
---
|
||||
marp: true # 开启 Marp
|
||||
size: 16:9 # 设定页面比例，常见有 16:9 或 4:3，默认为16:9
|
||||
theme: gaia # 切换主题，内置 3 种样式的主题，可以自定义主题
|
||||
paginate: true # 开启页码
|
||||
headingDivider: 2 # 通过二级标题切分页面，省去手动换页的麻烦
|
||||
footer: 初虹 # 设置页脚区域的内容，如果设定页眉的内容，则为 header
|
||||
---
|
||||
```
|
||||
|
||||
- 如果想让页面同时被多个级别的标题切分，比如，以二级~四级标题分割页面，可以 `headingDivider: [2,3,4]`
|
||||
- 想要使得多个自定义样式渲染同一个页面，可直接将不同自定义样式以空格连接，比如：`<!-- _class: cols-2-64 fglass -->`
|
||||
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: lastpage -->
|
||||
<!-- _footer: "" -->
|
||||
|
||||
###### 欢迎交流 ~
|
||||
|
||||
<div class="icons">
|
||||
|
||||
- <i class="fa-solid fa-envelope"></i>
|
||||
- 邮箱：ch2099058972@163.com
|
||||
- <i class="fa-brands fa-weixin"></i>
|
||||
- 微信：favourhong
|
||||
- <i class="fa-solid fa-house"></i>
|
||||
- 公众号：虹鹄山庄
|
||||
|
||||
<div>
|
||||
|
||||
## 创作不易，buy me a coffee 🤙~
|
||||
|
||||
<!-- _class: trans -->
|
||||
<!-- _footer: "" -->
|
||||
<!-- _paginate: "" -->
|
||||
|
||||
<br>
|
||||
|
||||
|
||||
Executable
BIN
Binary file not shown.
BIN
Binary file not shown.
BIN
Binary file not shown.
BIN
Binary file not shown.
BIN
Binary file not shown.
Executable
+168
@@ -0,0 +1,168 @@
|
||||
---
|
||||
theme: border
|
||||
size: 16:9
|
||||
header: title of presentation
|
||||
_header: ""
|
||||
footer: footer
|
||||
_footer: ""
|
||||
paginate: true
|
||||
_paginate: false
|
||||
created: 2025-09-09T19:23
|
||||
updated: 2025-09-22T13:27
|
||||
---
|
||||
<!-- _class: title -->
|
||||
<!-- _class: lead -->
|
||||
|
||||
# Title
|
||||
|
||||
---
|
||||
|
||||
# Agenda
|
||||
|
||||
1. text
|
||||
1. text
|
||||
1. text
|
||||
1. text
|
||||
|
||||
---
|
||||
|
||||
# Section
|
||||
|
||||
Text
|
||||
|
||||
---
|
||||
|
||||
# Introduction
|
||||
|
||||
Text
|
||||
|
||||
---
|
||||
|
||||
# Text
|
||||
|
||||
text
|
||||
|
||||
---
|
||||
|
||||
# Two Columns
|
||||
|
||||
## column 1
|
||||
|
||||
text
|
||||
|
||||
## column 2
|
||||
|
||||
text
|
||||
|
||||
---
|
||||
|
||||
# Two Columns with Picture
|
||||
|
||||
## column 1
|
||||
|
||||
text
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
# Three Columns
|
||||
|
||||
## column 1
|
||||
|
||||
text
|
||||
|
||||
## column 2
|
||||
|
||||
text
|
||||
|
||||
## column 3
|
||||
|
||||
text
|
||||
|
||||
---
|
||||
|
||||
# Basic Block List
|
||||
|
||||
- text
|
||||
- text
|
||||
- text
|
||||
- text
|
||||
- text
|
||||
---
|
||||
|
||||
# Picture
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
# Table
|
||||
|
||||
| text | text | text | text |
|
||||
|---|---|---|---|
|
||||
| text | text | text | text |
|
||||
| text | text | text | text |
|
||||
| text | text | text | text |
|
||||
|
||||
---
|
||||
|
||||
# Quote
|
||||
|
||||
> Quote of the day
|
||||
|
||||
---
|
||||
|
||||
# Code
|
||||
|
||||
``` javascript
|
||||
var foo = ""
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
# Long Code
|
||||
|
||||
``` javascript
|
||||
var foo = ""
|
||||
var foo = ""
|
||||
var foo = ""
|
||||
var foo = ""
|
||||
var foo = ""
|
||||
var foo = ""
|
||||
var foo = ""
|
||||
var foo = ""
|
||||
var foo = ""
|
||||
var foo = ""
|
||||
var foo = ""
|
||||
var foo = ""
|
||||
var foo = ""
|
||||
var foo = ""
|
||||
var foo = ""
|
||||
var foo = ""
|
||||
var foo = ""
|
||||
var foo = ""
|
||||
var foo = ""
|
||||
var foo1 = ""
|
||||
var foo1 = ""
|
||||
var foo1 = ""
|
||||
var foo1 = ""
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
# Math
|
||||
|
||||
Text text .....:
|
||||
|
||||
$$ I_{xx}=\int\int_Ry^2f(x,y)\cdot{}dydx $$
|
||||
|
||||
Text text .....:
|
||||
|
||||
$$
|
||||
f(x) = \int_{-\infty}^\infty
|
||||
\hat f(\xi)\,e^{2 \pi i \xi x}
|
||||
\,d\xi
|
||||
$$
|
||||
|
||||
Conclusion
|
||||
Executable
+84
@@ -0,0 +1,84 @@
|
||||
---
|
||||
theme: academic
|
||||
paginate: true
|
||||
math: latex
|
||||
created: 2025-09-08T22:43
|
||||
updated: 2025-09-09T18:22
|
||||
---
|
||||
|
||||
<!-- _class: lead -->
|
||||
# Create lab presentation slides with Marp
|
||||
|
||||
#### ~Let's graduate from Beamer~
|
||||
|
||||
<br />
|
||||
|
||||
**Author Taro**
|
||||
Hogehoge Laboratory M2
|
||||
YYYY/MM/DD
|
||||
|
||||
---
|
||||
|
||||
<!-- _header: table of contents -->
|
||||
|
||||
1. First of all
|
||||
1. Code block
|
||||
1. Formula
|
||||
1. Figure
|
||||
|
||||
---
|
||||
|
||||
<!-- _header: Introduction -->
|
||||
|
||||
- Marp is software for creating **slides** in **Markdown**.
|
||||
- Basic Markdown syntax is supported.
|
||||
- You can move to the next page just by putting `---` in Markdown. $^1$
|
||||
|
||||
> 1: Marp is developed according to the Markdown specification called CommonMark, so the "footnote" grammar (using `[^1]`), which is not included in CommonMark, is not provided. Therefore, by referring to https://github.com/marp-team/marp/discussions/150#discussioncomment-1302384, a pseudo-footnote was realized.
|
||||
|
||||
---
|
||||
|
||||
<!-- _header: code block -->
|
||||
|
||||
```python
|
||||
import torch
|
||||
print(torch.cuda.is_available())
|
||||
```
|
||||
|
||||
You can write a code block like this.
|
||||
|
||||
```python
|
||||
from transformers import AutoModelForMaskedLM, AutoTokenizer
|
||||
model = AutoModelForMaskedLM.from_pretrained("cl-tohoku/bert-base-japanese-whole-word-masking")
|
||||
tokenizer = AutoTokenizer.from_pretrained("cl-tohoku/bert-base-japanese-whole-word-masking")
|
||||
|
||||
inputs = tokenizer.encode_plus("I'm very [MASK]", return_tensors='pt')
|
||||
outputs = model(**inputs)
|
||||
tokenizer.convert_ids_to_tokens(outputs.logits[0][1:-1].argmax(axis=-1))
|
||||
```
|
||||
|
||||
The width is automatically adjusted (see [Auto-scaling](https://github.com/marp-team/marp-core#auto-scaling-features) in the document).
|
||||
|
||||
---
|
||||
|
||||
<!-- _header: formula -->
|
||||
|
||||
$$I_{xx}=\int\int_Ry^2f(x,y)\cdot{}dydx$$
|
||||
|
||||
$$
|
||||
f(x) = \int_{-\infty}^\infty
|
||||
\hat f(\xi)\,e^{2 \pi i \xi x}
|
||||
\,d\xi
|
||||
$$
|
||||
|
||||
You can write the formula like this. Of course you can also use inline $\LaTeX$.
|
||||
You can also use emojis :smile:
|
||||
|
||||
---
|
||||
|
||||
<!-- _header: Figure -->
|
||||
|
||||
1. First, right-click to download the image (`kenkyu_woman_seikou.png`) from [This Irasutoya link](https://www.irasutoya.com/2018/10/blog-post_723.html).
|
||||
2. Create a directory named `images` in this directory with Markdown, and place the image you downloaded earlier. You are now ready to go.
|
||||
|
||||
|
||||
Executable
+56
@@ -0,0 +1,56 @@
|
||||
---
|
||||
marp: true
|
||||
theme: beamer
|
||||
paginate: true
|
||||
size: 16:9
|
||||
header: This is a header
|
||||
footer: This is a footer
|
||||
title: Marp custom themes
|
||||
created: 2025-09-09T18:22
|
||||
updated: 2025-09-22T13:27
|
||||
---
|
||||
<!-- _class: title -->
|
||||
|
||||
# A very long title of my beamer presentation
|
||||
<br/>
|
||||
|
||||
Author's name
|
||||
University of XYZ
|
||||
2022-26-03
|
||||
(Only normal text is centered now)
|
||||
|
||||
---
|
||||
|
||||
# A normal slide
|
||||
|
||||
# H1 again
|
||||
## H2
|
||||
### H3
|
||||
- bullet
|
||||
> quote
|
||||
```
|
||||
code
|
||||
```
|
||||
text
|
||||
|
||||
---
|
||||
# Title page ad hoc fix
|
||||
|
||||
If the title of your presentation is too long and the border intersects with the text underneath, use the following
|
||||
|
||||
```html
|
||||
# Title
|
||||
<br/>
|
||||
<!-- empty line here --->
|
||||
Author's name
|
||||
University of XYZ
|
||||
...
|
||||
```
|
||||
make sure to leave an empty line below the `<br/>` tag
|
||||
|
||||
---
|
||||
<!-- _class: tinytext -->
|
||||
# Tinytext class
|
||||
|
||||
- use `<!-- _class: tinytext -->` to make some text tiny
|
||||
- might be useful for References
|
||||
Executable
+48
@@ -0,0 +1,48 @@
|
||||
---
|
||||
created: 2025-09-09T18:22
|
||||
updated: 2025-09-22T13:27
|
||||
---
|
||||
<!-- _class: lead -->
|
||||
# Title
|
||||
|
||||
|
||||
---
|
||||
<!-- _class: divider -->
|
||||
# Agenda
|
||||
|
||||
- title 1
|
||||
- title 2
|
||||
- title 3
|
||||
|
||||
---
|
||||
|
||||
# Content
|
||||
|
||||
|
||||
|
||||
## Content 1
|
||||
### Content 2
|
||||
|
||||
Content 3
|
||||
|
||||
---
|
||||
|
||||
# Content 1
|
||||
|
||||
|
||||
|
||||
## Content 1
|
||||
### Content 2
|
||||
|
||||
Content 3
|
||||
|
||||
---
|
||||
|
||||
# Content 2
|
||||
|
||||
|
||||
|
||||
## Content 1
|
||||
### Content 2
|
||||
|
||||
Content 3
|
||||
Executable
+24
@@ -0,0 +1,24 @@
|
||||
---
|
||||
theme: gaia
|
||||
paginate: true
|
||||
backgroundColor: #fff
|
||||
backgroundImage: url('https://marp.app/assets/hero-background.svg')
|
||||
style: @import url('https://unpkg.com/tailwindcss@^2/dist/utilities.min.css')
|
||||
---
|
||||
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
|
||||
## Column 1
|
||||
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas eveniet, corporis commodi vitae accusamus obcaecati dolor corrupti eaque id numquam officia velit sapiente incidunt dolores provident laboriosam praesentium nobis culpa.
|
||||
|
||||
</div>
|
||||
<div>
|
||||
|
||||
## Column 2
|
||||
|
||||
Tempore ad exercitationem necessitatibus nulla, optio distinctio illo non similique? Laborum dolor odio, ipsam incidunt corrupti quia nemo quo exercitationem adipisci quidem nesciunt deserunt repellendus inventore deleniti reprehenderit at earum.
|
||||
|
||||
</div>
|
||||
</div>
|
||||
Executable
+25
@@ -0,0 +1,25 @@
|
||||
---
|
||||
theme: default
|
||||
footer: Samuele Cozzi
|
||||
created: 2025-09-09T18:22
|
||||
updated: 2025-09-22T13:27
|
||||
---
|
||||
|
||||
# First Slide
|
||||
|
||||
---
|
||||
|
||||
# Second Slide
|
||||
|
||||
## subtitle
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
# Third Slide
|
||||
|
||||
## second subtitle
|
||||
|
||||
|
||||
|
||||
Executable
+94
@@ -0,0 +1,94 @@
|
||||
---
|
||||
theme: default
|
||||
footer: Samuele Cozzi
|
||||
created: 2025-09-09T18:22
|
||||
updated: 2025-09-22T13:27
|
||||
---
|
||||
|
||||
# <!-- fit --> First Slide
|
||||
|
||||
|
||||
ciao
|
||||
|
||||
---
|
||||
|
||||
# Second Slide
|
||||
|
||||
## subtitle
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
# Third Slide
|
||||
|
||||
## second subtitle
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
# Autoscaling Code
|
||||
|
||||
```
|
||||
bool getBit(int num, int i) {
|
||||
return ((num & (1<<i)) != 0);
|
||||
}
|
||||
|
||||
bool getBit(int num, int i) {
|
||||
return ((num & (1<<i)) != 0) + ((num & (1<<i)) != 0) + ((num & (1<<i)) != 0) + ((num & (1<<i)) != 0) + ((num & (1<<i)) != 0);
|
||||
}
|
||||
|
||||
bool getBit(int num, int i) {
|
||||
int i = 0;
|
||||
int i = 0;
|
||||
int i = 0;
|
||||
int i = 0;
|
||||
int i = 0;
|
||||
int i = 0;
|
||||
int i = 0;
|
||||
int i = 0;
|
||||
int i = 0;
|
||||
int i = 0;int i = 0;
|
||||
int i = 0;
|
||||
int i = 0;int i = 0;
|
||||
|
||||
int i = 0;
|
||||
int i = 0;
|
||||
int i = 0;
|
||||
int i = 0;
|
||||
int i = 0;
|
||||
int i = 0;
|
||||
int i = 0;
|
||||
int i = 0;
|
||||
int i = 0;
|
||||
int i = 0;int i = 0;
|
||||
int i = 0;
|
||||
int i = 0;int i = 0;
|
||||
|
||||
return ((num & (1<<i)) != 0);
|
||||
popo
|
||||
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
# Autoscaling Math
|
||||
|
||||
$$
|
||||
f(x) = \int_{-\infty}^\infty
|
||||
\hat f(\xi)\,e^{2 \pi i \xi x}
|
||||
\,d\xi + \int_{-\infty}^\infty
|
||||
\hat f(\xi)\,e^{2 \pi i \xi x}
|
||||
\,d\xi + \int_{-\infty}^\infty
|
||||
\hat f(\xi)\,e^{2 \pi i \xi x}
|
||||
\,d\xi + \int_{-\infty}^\infty
|
||||
\hat f(\xi)\,e^{2 \pi i \xi x}
|
||||
\,d\xi + \int_{-\infty}^\infty
|
||||
\hat f(\xi)\,e^{2 \pi i \xi x}
|
||||
\,d\xi + \int_{-\infty}^\infty
|
||||
\hat f(\xi)\,e^{2 \pi i \xi x}
|
||||
\,d\xi
|
||||
$$
|
||||
+100
@@ -0,0 +1,100 @@
|
||||
---
|
||||
theme: minimal-container-turquoise
|
||||
created: 2025-09-09T18:22
|
||||
updated: 2025-09-22T13:27
|
||||
---
|
||||
<!-- _class: lead -->
|
||||
# Title
|
||||
|
||||
## Subtitle
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: box-flex -->
|
||||
# Columns Containers
|
||||
|
||||
**[markdown-it-container](https://github.com/markdown-it/markdown-it-container)**
|
||||
|
||||
::: container
|
||||
## Colum 1
|
||||
|
||||
text dadadas text text text text text text text text text text
|
||||
|
||||
:::
|
||||
|
||||
::: container
|
||||
## Colum 2
|
||||
|
||||
text
|
||||
|
||||
:::
|
||||
|
||||
|
||||
---
|
||||
|
||||
# Text Highlights
|
||||
|
||||
**[markdown-it-mark](https://github.com/markdown-it/markdown-it-mark)**
|
||||
|
||||
This is ==marked== text
|
||||
|
||||
---
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
# PlantUML Diagram
|
||||
|
||||
**[markdown-it-kroki](https://github.com/kazumatu981/markdown-it-kroki)**
|
||||
|
||||
```plantuml[platuml image]
|
||||
@startuml
|
||||
left to right direction
|
||||
actor Guest as g
|
||||
package Professional {
|
||||
actor Chef as c
|
||||
actor "Food Critic" as fc
|
||||
}
|
||||
package Restaurant {
|
||||
usecase "Eat Food" as UC1
|
||||
usecase "Pay for Food" as UC2
|
||||
usecase "Drink" as UC3
|
||||
usecase "Review" as UC4
|
||||
}
|
||||
fc --> UC4
|
||||
g --> UC1
|
||||
g --> UC2
|
||||
g --> UC3
|
||||
@enduml
|
||||
```
|
||||
|
||||
|
||||
---
|
||||
# Mermaid Gant Diagram
|
||||
|
||||
**[markdown-it-kroki](https://github.com/kazumatu981/markdown-it-kroki)**
|
||||
|
||||
```mermaid
|
||||
gantt
|
||||
|
||||
title A Gant Diagram
|
||||
dateFormat YYYY-MM-DD
|
||||
section Section
|
||||
Initial milestone : milestone, m1, 2014-01-01,
|
||||
Final milestone : milestone, m1, 2014-02-16,
|
||||
A task :a1, 2014-01-01, 30d
|
||||
Another task :after a1, 20d
|
||||
section Another
|
||||
Task in sec :2014-01-12, 12d
|
||||
another task : 24d
|
||||
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
# CallOuts (Work in Progress)
|
||||
|
||||
https://github.com/ebullient/markdown-it-obsidian-callouts
|
||||
|
||||
Executable
+353
@@ -0,0 +1,353 @@
|
||||
---
|
||||
theme: minimal-turquoise
|
||||
paginate: true
|
||||
_paginate: false
|
||||
header: Title of deck
|
||||
_header:
|
||||
footer: this is footer
|
||||
_footer: ""
|
||||
created: 2025-09-09T18:22
|
||||
updated: 2025-09-22T13:27
|
||||
---
|
||||
|
||||
<!-- _class: lead -->
|
||||
|
||||
# <!-- fit --> Title of Deck
|
||||
|
||||
## <!-- fit --> Subtitle Subtitle Subtitle Subtitle Subtitle
|
||||
|
||||
**Author**
|
||||
Milan, Marp Demo
|
||||
YYYY/MM/DD
|
||||
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: divider -->
|
||||
|
||||
## Agenda
|
||||
|
||||
1. text
|
||||
1. text
|
||||
1. text
|
||||
1. text
|
||||
|
||||
---
|
||||
|
||||
|
||||
<!-- _class: divider -->
|
||||
|
||||
### Introduction
|
||||
|
||||
text
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
|
||||
<!-- _class: divider -->
|
||||
|
||||
### Introduction
|
||||
|
||||
text
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: divider -->
|
||||
|
||||
## Section Header
|
||||
|
||||
Section Details
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
## Content
|
||||
|
||||
### Subsection 1
|
||||
|
||||
#### Subsection 2
|
||||
|
||||
##### Subsection 3
|
||||
|
||||
###### Subsection 4
|
||||
|
||||
Text
|
||||
|
||||
---
|
||||
|
||||
## Two Columns Image
|
||||
|
||||
### column 1
|
||||
|
||||
text
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: 'box-flex' -->
|
||||
|
||||
## Two Columns
|
||||
|
||||
- ### column 1
|
||||
|
||||
text
|
||||
|
||||
- ### column 2
|
||||
|
||||
text
|
||||
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: 'box-flex center' -->
|
||||
## Two Columns With Centered Pictures
|
||||
|
||||
- ### picture 1
|
||||
|
||||
- 
|
||||
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: 'box-flex box-bg' -->
|
||||
|
||||
## Three Columns
|
||||
|
||||
- ### column 1
|
||||
|
||||
text
|
||||
|
||||
- ### column 2
|
||||
|
||||
text
|
||||
|
||||
- ### column 3
|
||||
text
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: 'box-flex box-bg' -->
|
||||
|
||||
## Four Columns
|
||||
|
||||
- ### column 1
|
||||
|
||||
text
|
||||
|
||||
- ### column 2
|
||||
|
||||
text
|
||||
|
||||
- ### column 3
|
||||
text
|
||||
|
||||
- ### column 4
|
||||
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: 'box-flex box-bg' -->
|
||||
|
||||
## Six Columns
|
||||
|
||||
- ### column 1
|
||||
|
||||
text
|
||||
|
||||
- ### column 2
|
||||
|
||||
text
|
||||
|
||||
- ### column 3
|
||||
text
|
||||
|
||||
- ### column 4
|
||||
text
|
||||
|
||||
- ### column 5
|
||||
text
|
||||
|
||||
- ### column 6
|
||||
text
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: 'box-flex box-bg' -->
|
||||
|
||||
## Eight Columns
|
||||
|
||||
- ### column 1
|
||||
|
||||
text
|
||||
|
||||
- ### column 2
|
||||
|
||||
text
|
||||
|
||||
- ### column 3
|
||||
text
|
||||
|
||||
- ### column 4
|
||||
text
|
||||
|
||||
- ### column 5
|
||||
text
|
||||
|
||||
- ### column 6
|
||||
text
|
||||
|
||||
- ### column 7
|
||||
text
|
||||
|
||||
- ### column 8
|
||||
text
|
||||
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: center -->
|
||||
## Picture
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
## Table
|
||||
|
||||
| text | text | text | text |
|
||||
|---|---|---|---|
|
||||
| text | text | text | text |
|
||||
| text | text | text | text |
|
||||
| text | text | text | text |
|
||||
|
||||
---
|
||||
<!-- _class: divider-->
|
||||
|
||||
|
||||
> Quote of the day
|
||||
|
||||
|
||||
---
|
||||
|
||||
## Code
|
||||
|
||||
``` javascript
|
||||
var foo = ""
|
||||
```
|
||||
|
||||
|
||||
---
|
||||
|
||||
<!-- _footer: '' -->
|
||||
<!-- _paginate: false -->
|
||||
|
||||
## Autoscaling Code
|
||||
|
||||
```
|
||||
bool getBit(int num, int i) {
|
||||
return ((num & (1<<i)) != 0);
|
||||
}
|
||||
|
||||
bool getBit(int num, int i) {
|
||||
return ((num & (1<<i)) != 0) + ((num & (1<<i)) != 0) + ((num & (1<<i)) != 0) + ((num & (1<<i)) != 0) + ((num & (1<<i)) != 0);
|
||||
}
|
||||
|
||||
bool getBit(int num, int i) {
|
||||
int i = 0;
|
||||
int i = 0;
|
||||
int i = 0;
|
||||
int i = 0;
|
||||
int i = 0;
|
||||
int i = 0;
|
||||
int i = 0;
|
||||
int i = 0;
|
||||
int i = 0;
|
||||
int i = 0;int i = 0;
|
||||
int i = 0;
|
||||
int i = 0;int i = 0;
|
||||
|
||||
int i = 0;
|
||||
int i = 0;
|
||||
int i = 0;
|
||||
int i = 0;
|
||||
int i = 0;
|
||||
int i = 0;
|
||||
int i = 0;
|
||||
int i = 0;
|
||||
int i = 0;
|
||||
int i = 0;int i = 0;
|
||||
int i = 0;
|
||||
int i = 0;int i = 0;
|
||||
|
||||
return ((num & (1<<i)) != 0);
|
||||
popo
|
||||
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Math
|
||||
|
||||
Text text .....:
|
||||
|
||||
$$ I_{xx}=\int\int_Ry^2f(x,y)\cdot{}dydx $$
|
||||
|
||||
Text text .....:
|
||||
|
||||
$$
|
||||
f(x) = \int_{-\infty}^\infty
|
||||
\hat f(\xi)\,e^{2 \pi i \xi x}
|
||||
\,d\xi
|
||||
$$
|
||||
|
||||
Conclusion
|
||||
|
||||
---
|
||||
|
||||
## Autoscaling Math
|
||||
|
||||
$$
|
||||
f(x) = \int_{-\infty}^\infty
|
||||
\hat f(\xi)\,e^{2 \pi i \xi x}
|
||||
\,d\xi + \int_{-\infty}^\infty
|
||||
\hat f(\xi)\,e^{2 \pi i \xi x}
|
||||
\,d\xi + \int_{-\infty}^\infty
|
||||
\hat f(\xi)\,e^{2 \pi i \xi x}
|
||||
\,d\xi + \int_{-\infty}^\infty
|
||||
\hat f(\xi)\,e^{2 \pi i \xi x}
|
||||
\,d\xi + \int_{-\infty}^\infty
|
||||
\hat f(\xi)\,e^{2 \pi i \xi x}
|
||||
\,d\xi + \int_{-\infty}^\infty
|
||||
\hat f(\xi)\,e^{2 \pi i \xi x}
|
||||
\,d\xi
|
||||
$$
|
||||
---
|
||||
<!-- _class: divider -->
|
||||
<!-- _footer: '' -->
|
||||
<!-- _paginate: false -->
|
||||
|
||||
|
||||
|
||||
### Summary
|
||||
|
||||
This is the summary of presentation
|
||||
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: divider -->
|
||||
|
||||
## Thank You
|
||||
|
||||
Author
|
||||
mail@email.com
|
||||
www.author.com
|
||||
@Twitter
|
||||
+15
@@ -0,0 +1,15 @@
|
||||
---
|
||||
theme: minimal-turquoise
|
||||
created: 2025-09-09T18:22
|
||||
updated: 2025-09-22T13:27
|
||||
---
|
||||
<!-- _class: lead -->
|
||||
# Title
|
||||
|
||||
---
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
|
||||
Executable
+98
@@ -0,0 +1,98 @@
|
||||
/* @theme academic */
|
||||
|
||||
@import 'gaia';
|
||||
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap');
|
||||
|
||||
:root {
|
||||
--color-background: #fff;
|
||||
--color-foreground: #333;
|
||||
--color-highlight: #800000;
|
||||
}
|
||||
|
||||
section {
|
||||
background-image: none;
|
||||
font-family: 'Noto Sans JP', sans-serif;
|
||||
padding-top: 90px;
|
||||
padding-left: 40px;
|
||||
padding-right: 40px;
|
||||
}
|
||||
|
||||
/* https://github.com/marp-team/marpit/issues/271 */
|
||||
section::after {
|
||||
font-weight: 700;
|
||||
content: attr(data-marpit-pagination) '/' attr(data-marpit-pagination-total);
|
||||
}
|
||||
|
||||
ul ul {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
section.lead h1 {
|
||||
color: #800000;
|
||||
text-align: left;
|
||||
}
|
||||
section.lead h1 strong {
|
||||
-webkit-text-stroke: 1px #800000;
|
||||
}
|
||||
section.lead h2 {
|
||||
color: #800000;
|
||||
text-align: left;
|
||||
}
|
||||
section.lead h2 strong {
|
||||
-webkit-text-stroke: 1px #800000;
|
||||
}
|
||||
section.lead h3 {
|
||||
color: #800000;
|
||||
text-align: left;
|
||||
}
|
||||
section.lead h3 strong {
|
||||
-webkit-text-stroke: 1px #800000;
|
||||
}
|
||||
section.lead h4 {
|
||||
color: #800000;
|
||||
text-align: left;
|
||||
}
|
||||
section.lead h4 strong {
|
||||
-webkit-text-stroke: 1px #800000;
|
||||
}
|
||||
section.lead h5 {
|
||||
color: #800000;
|
||||
text-align: left;
|
||||
}
|
||||
section.lead h5 strong {
|
||||
-webkit-text-stroke: 1px #800000;
|
||||
}
|
||||
section.lead p {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
header {
|
||||
background-color: #800000;
|
||||
color: #fff;
|
||||
font-size: 1em;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
max-width: 90%;
|
||||
border-top: 0.1em dashed #555;
|
||||
font-size: 60%;
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
}
|
||||
blockquote::before {
|
||||
content: "";
|
||||
}
|
||||
blockquote::after {
|
||||
content: "";
|
||||
}
|
||||
|
||||
img[alt~="center"] {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: 'Source Code Pro', monospace;
|
||||
}
|
||||
Executable
+126
@@ -0,0 +1,126 @@
|
||||
/* @theme beamer */
|
||||
|
||||
@import "default";
|
||||
|
||||
:root {
|
||||
font-family: "CMU Sans Serif", "Segoe UI", Helvetica, sans-serif;
|
||||
--beamer-main: #1f38c5;
|
||||
--beamer-secondary: #141414;
|
||||
}
|
||||
|
||||
section {
|
||||
background-color: #ffffff;
|
||||
/* bottom two-coloured bar in base64 svg */
|
||||
background-image:
|
||||
url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhLS0gQ3JlYXRlZCB3aXRoIElua3NjYXBlIChodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy8pIC0tPgoKPHN2ZwogICB3aWR0aD0iMjUwbW0iCiAgIGhlaWdodD0iNS4zNTQ1NjcxbW0iCiAgIHZpZXdCb3g9IjAgMCAyNTAgNS4zNTQ1NjcxIgogICB2ZXJzaW9uPSIxLjEiCiAgIGlkPSJzdmc1IgogICBpbmtzY2FwZTp2ZXJzaW9uPSIxLjEuMSAoM2JmNWFlMGQyNSwgMjAyMS0wOS0yMCkiCiAgIHNvZGlwb2RpOmRvY25hbWU9ImJhci5zdmciCiAgIHhtbG5zOmlua3NjYXBlPSJodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy9uYW1lc3BhY2VzL2lua3NjYXBlIgogICB4bWxuczpzb2RpcG9kaT0iaHR0cDovL3NvZGlwb2RpLnNvdXJjZWZvcmdlLm5ldC9EVEQvc29kaXBvZGktMC5kdGQiCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHNvZGlwb2RpOm5hbWVkdmlldwogICAgIGlkPSJuYW1lZHZpZXc3IgogICAgIHBhZ2Vjb2xvcj0iI2ZmZmZmZiIKICAgICBib3JkZXJjb2xvcj0iIzY2NjY2NiIKICAgICBib3JkZXJvcGFjaXR5PSIxLjAiCiAgICAgaW5rc2NhcGU6cGFnZXNoYWRvdz0iMiIKICAgICBpbmtzY2FwZTpwYWdlb3BhY2l0eT0iMC4wIgogICAgIGlua3NjYXBlOnBhZ2VjaGVja2VyYm9hcmQ9IjAiCiAgICAgaW5rc2NhcGU6ZG9jdW1lbnQtdW5pdHM9Im1tIgogICAgIHNob3dncmlkPSJmYWxzZSIKICAgICBzaG93Z3VpZGVzPSJmYWxzZSIKICAgICBmaXQtbWFyZ2luLXRvcD0iMCIKICAgICBmaXQtbWFyZ2luLWxlZnQ9IjAiCiAgICAgZml0LW1hcmdpbi1yaWdodD0iMCIKICAgICBmaXQtbWFyZ2luLWJvdHRvbT0iMCIKICAgICBpbmtzY2FwZTp6b29tPSIwLjc0MTE4OTY1IgogICAgIGlua3NjYXBlOmN4PSI1NjQuNjMyODIiCiAgICAgaW5rc2NhcGU6Y3k9IjkyLjQxODk5MiIKICAgICBpbmtzY2FwZTp3aW5kb3ctd2lkdGg9IjE2ODQiCiAgICAgaW5rc2NhcGU6d2luZG93LWhlaWdodD0iOTQ3IgogICAgIGlua3NjYXBlOndpbmRvdy14PSIxMTQiCiAgICAgaW5rc2NhcGU6d2luZG93LXk9IjMwIgogICAgIGlua3NjYXBlOndpbmRvdy1tYXhpbWl6ZWQ9IjAiCiAgICAgaW5rc2NhcGU6Y3VycmVudC1sYXllcj0ibGF5ZXIxIgogICAgIHVuaXRzPSJtbSIKICAgICB3aWR0aD0iMjY0bW0iIC8+CiAgPGRlZnMKICAgICBpZD0iZGVmczIiIC8+CiAgPGcKICAgICBpbmtzY2FwZTpsYWJlbD0iVnJzdHZhIDEiCiAgICAgaW5rc2NhcGU6Z3JvdXBtb2RlPSJsYXllciIKICAgICBpZD0ibGF5ZXIxIgogICAgIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMC4zNDczNTUsLTkxLjAyNzY0OSkiPgogICAgPHJlY3QKICAgICAgIHN0eWxlPSJmaWxsOiMxNDE0MTQ7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlLXdpZHRoOjAuNDIyOTk5IgogICAgICAgaWQ9InJlY3QzMSIKICAgICAgIHdpZHRoPSIxMjUiCiAgICAgICBoZWlnaHQ9IjUuMzU0NTY3MSIKICAgICAgIHg9IjIwLjM0NzM1NSIKICAgICAgIHk9IjkxLjAyNzY0OSIgLz4KICAgIDxwYXRoCiAgICAgICBzdHlsZT0iZmlsbDojMWYzOGM1O2ZpbGwtb3BhY2l0eToxO3N0cm9rZS13aWR0aDowLjU3Mjc5OSIKICAgICAgIGQ9Im0gMTQ1LjM0NzM1LDkzLjcwNDkzMyB2IC0yLjY3NzI4NCBoIDYyLjUgNjIuNSB2IDIuNjc3Mjg0IDIuNjc3MjgyIGggLTYyLjUgLTYyLjUgeiIKICAgICAgIGlkPSJwYXRoMzk0IiAvPgogIDwvZz4KPC9zdmc+Cg==);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center bottom;
|
||||
background-size: 150% 1em;
|
||||
padding: 2em;
|
||||
}
|
||||
|
||||
header {
|
||||
font-size: 0.6em;
|
||||
/* this text-align is important */
|
||||
text-align: right;
|
||||
/* I don't like this absolute positioning, but it works */
|
||||
position: absolute;
|
||||
top: 96.2%;
|
||||
width: 100%;
|
||||
right: 0;
|
||||
left: -51%;
|
||||
color: white;
|
||||
}
|
||||
|
||||
footer {
|
||||
font-size: 0.6em;
|
||||
position: absolute;
|
||||
/* this text-align is important */
|
||||
text-align: left;
|
||||
top: 96.2%;
|
||||
width: 100%;
|
||||
right: 0;
|
||||
left: 50.8%;
|
||||
color: white;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
color: #141414;
|
||||
}
|
||||
|
||||
/* only apply to the first occurrence of h1 */
|
||||
h1:nth-of-type(1) {
|
||||
font-family: "CMU Bright", "Segoe UI Semibold";
|
||||
color: #ffffff;
|
||||
background-color: var(--beamer-main);
|
||||
border-top: 0.3em solid var(--beamer-main);
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: 1.5em;
|
||||
text-indent: 0.5em;
|
||||
}
|
||||
|
||||
code {
|
||||
background-color: rgba(100, 100, 100, 0.2);
|
||||
}
|
||||
|
||||
/* formatting page numbers */
|
||||
section::after {
|
||||
font-size: 0.6em;
|
||||
/* https://github.com/yhatt/marp/issues/263 */
|
||||
content: attr(data-marpit-pagination) ' / ' attr(data-marpit-pagination-total);
|
||||
position: absolute;
|
||||
text-align: right;
|
||||
top: 96.2%;
|
||||
width: 100%;
|
||||
right: 0;
|
||||
left: -0.5em;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* inline math was too large wrt text */
|
||||
.katex {
|
||||
font: normal 1.05em KaTeX_Main, 'Times New Roman', serif
|
||||
}
|
||||
|
||||
/* the "center" keyword centers the image - may break, careful */
|
||||
img[alt~="center"] {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* || SECTION CLASS: title */
|
||||
/* title page - only to be used as for a single slide */
|
||||
/* <!-- _class: title --> */
|
||||
section.title>h1 {
|
||||
font-family: "CMU Bright", "Segoe UI Semibold";
|
||||
color: #ffffff;
|
||||
background-color: var(--beamer-main);
|
||||
border-radius: 25px;
|
||||
text-align: center;
|
||||
top: 25%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 80%;
|
||||
padding-bottom: 0.2em;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/* remake this to be positioned with respect to h1 */
|
||||
section.title>p {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
top: 35px;
|
||||
}
|
||||
|
||||
/* || SECTION CLASS: tinytext */
|
||||
/* new class that makes p, ul, and blockquote text smaller */
|
||||
/* might be useful for the References slide, use <!-- _class: tinytext --> */
|
||||
section.tinytext>p, section.tinytext>ul, section.tinytext>blockquote {
|
||||
font-size: 0.65em;
|
||||
}
|
||||
Executable
+62
@@ -0,0 +1,62 @@
|
||||
/* @theme border */
|
||||
|
||||
@import "default";
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');
|
||||
|
||||
:root {
|
||||
font-family: Inter, Helvetica, Arial;
|
||||
--border-color: #303030;
|
||||
--text-color: #0a0a0a;
|
||||
--bg-color-alt: #dadada;
|
||||
--mark-bg: #ffef92;
|
||||
}
|
||||
|
||||
section {
|
||||
background-image: linear-gradient(to bottom right, #f7f7f7 0%, #d3d3d3 100%);
|
||||
border: 1.3em solid var(--border-color);
|
||||
outline: 1em solid #ffffff;
|
||||
outline-offset: -0.5em;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
code {
|
||||
background-color: rgba(100, 100, 100, 0.2);
|
||||
}
|
||||
|
||||
/* https://github.com/yhatt/marp/issues/263 */
|
||||
section::after {
|
||||
font-size: 0.75em;
|
||||
content: attr(data-marpit-pagination) ' / ' attr(data-marpit-pagination-total);
|
||||
}
|
||||
|
||||
/* the "center" keyword centers the image - may break, careful */
|
||||
img[alt~="center"] {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
background: var(--bg-color-alt);
|
||||
border-left: 10px solid var(--border-color);
|
||||
margin: 0.5em;
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
/* taken from the Fluent Typora theme github.com/li3zhen1/Fluent-Typora */
|
||||
mark {
|
||||
background-color: var(--mark-bg);
|
||||
border-radius: 4px;
|
||||
margin-left: 2px;
|
||||
margin-right: 2px;
|
||||
padding: 0px 4px 2px;
|
||||
}
|
||||
|
||||
/* || SECTION CLASS: tinytext */
|
||||
/* new class that makes p, ul, and blockquote text smaller */
|
||||
/* might be useful for the References slide, use <!-- _class: tinytext --> */
|
||||
section.tinytext>p, section.tinytext>ul, section.tinytext>blockquote {
|
||||
font-size: 0.65em;
|
||||
}
|
||||
Executable
+149
@@ -0,0 +1,149 @@
|
||||
/* @theme color-head */
|
||||
|
||||
@import "gaia";
|
||||
|
||||
/*
|
||||
Usage:
|
||||
- slides: <!-- _class: 'xxx yyy' -->
|
||||
- fitting: <!-- fit -->
|
||||
|
||||
Classes:
|
||||
- First slide: 'lead'
|
||||
- Second Slides: 'divider'
|
||||
- Boxes: 'box-flex box-bg'
|
||||
- text: big, small, extrasmall, center
|
||||
*/
|
||||
|
||||
/* COLOR CONFIGURATION */
|
||||
:root {
|
||||
--color-background: #fff;
|
||||
--color-foreground: #2c2c2c;
|
||||
--color-highlight: #f96;
|
||||
--color-dimmed: #720606;
|
||||
}
|
||||
|
||||
|
||||
|
||||
section {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
p,li {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
header {
|
||||
color: var(--color-background);
|
||||
padding-top:0;
|
||||
margin-top: -10px !important;
|
||||
}
|
||||
|
||||
footer {
|
||||
border-left: 2px solid;
|
||||
/* border-image: linear-gradient(to right, #000 50%, transparent 50%) 100% 1; */
|
||||
padding: 0px 20px;
|
||||
margin: 10px 20px 10px 60px;
|
||||
height: 40px;
|
||||
font-size: 50%;
|
||||
border-image: linear-gradient(to bottom, rgba(0,0,0,0) 33%,var(--color-dimmed) 33%,var(--color-dimmed) 100%,rgba(0,0,0,0) 75%);
|
||||
border-image-slice: 1;
|
||||
}
|
||||
|
||||
section::after {
|
||||
left: 0;
|
||||
height: 60px;
|
||||
font-size: 50%;
|
||||
color: var(--color-dimmed);
|
||||
}
|
||||
|
||||
h1 {
|
||||
background-color: var(--color-dimmed);
|
||||
color: var(--color-background);
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: 0;
|
||||
padding: 25px 25px 15px 25px;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
width: 60%;
|
||||
text-align: center;
|
||||
align-self: center;
|
||||
padding: 66px;
|
||||
border-radius: 30px;
|
||||
background-color: var(--color-background-stripe,transparent);
|
||||
}
|
||||
|
||||
blockquote::before,blockquote::after {
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
table {
|
||||
width: calc(100% - 80px);;
|
||||
}
|
||||
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
p, strong,
|
||||
li,ul,ol,
|
||||
blockquote,
|
||||
table,
|
||||
code, marp-pre {
|
||||
margin-left: 40px !important;
|
||||
margin-right: 40px !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
section.box-flex > ul{
|
||||
margin: 0 !important;
|
||||
height: 80%;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
align-items:stretch;
|
||||
align-content: stretch;
|
||||
}
|
||||
|
||||
section.box-flex > ul > li{
|
||||
margin: 10px !important;
|
||||
border-radius: 5px;
|
||||
padding: 0.5em;
|
||||
flex: 1 1 0;
|
||||
}
|
||||
|
||||
section.box-bg > ul >li {
|
||||
background-color: var(--color-background-stripe,transparent);
|
||||
}
|
||||
|
||||
section.divider {
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
section.divider h1 {
|
||||
width: 45%;
|
||||
}
|
||||
|
||||
section.small p,section.big li {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
section.small p,section.small li {
|
||||
font-size: 0.6em;
|
||||
}
|
||||
|
||||
section.extrasmall p, section.extrasmall li {
|
||||
font-size: 0.4em;
|
||||
}
|
||||
|
||||
section.center p, section.center > ul > li {
|
||||
text-align: center;
|
||||
}
|
||||
Executable
+1789
File diff suppressed because it is too large
Load Diff
Executable
+330
@@ -0,0 +1,330 @@
|
||||
@charset "UTF-8";
|
||||
/*!
|
||||
* Marp Dracula theme.
|
||||
* @theme dracula
|
||||
* @author Daniel Nicolas Gisolfi
|
||||
*
|
||||
* @auto-scaling true
|
||||
* @size 4:3 960px 720px
|
||||
* @size 16:9 1280px 720px
|
||||
*/
|
||||
|
||||
@import url("https://fonts.googleapis.com/css?family=Lato:400,900|IBM+Plex+Sans:400,700");
|
||||
|
||||
:root {
|
||||
--dracula-background: #282a36;
|
||||
--dracula-current-line: #44475a;
|
||||
--dracula-foreground: #f8f8f2;
|
||||
--dracula-comment: #6272a4;
|
||||
--dracula-cyan: #8be9fd;
|
||||
--dracula-green: #50fa7b;
|
||||
--dracula-orange: #ffb86c;
|
||||
--dracula-pink: #ff79c6;
|
||||
--dracula-purple:#bd93f9;
|
||||
--dracula-red: #ff5555;
|
||||
--dracula-yellow: #f1fa8c;
|
||||
}
|
||||
|
||||
.hljs {
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
padding: 0.5em;
|
||||
background: var(--dracula-background);
|
||||
}
|
||||
|
||||
/* Dracula Foreground */
|
||||
.hljs,
|
||||
.hljs-subst,
|
||||
.hljs-typing,
|
||||
.hljs-variable,
|
||||
.hljs-template-variable {
|
||||
color: var(--dracula-foreground);
|
||||
}
|
||||
|
||||
/* Dracula Comment */
|
||||
.hljs-comment,
|
||||
.hljs-quote,
|
||||
.hljs-deletion {
|
||||
color: var(--dracula-comment);
|
||||
}
|
||||
|
||||
/* Dracula Cyan */
|
||||
.hljs-meta .hljs-doctag,
|
||||
.hljs-built_in,
|
||||
.hljs-selector-tag,
|
||||
.hljs-section,
|
||||
.hljs-link,
|
||||
.hljs-class {
|
||||
color: var(--dracula-cyan);
|
||||
}
|
||||
|
||||
|
||||
/* Dracula Green */
|
||||
.hljs-title {
|
||||
color: var(--dracula-green);
|
||||
}
|
||||
|
||||
/* Dracula Orange */
|
||||
.hljs-params {
|
||||
color: var(--dracula-orange);
|
||||
}
|
||||
|
||||
/* Dracula Pink */
|
||||
.hljs-keyword {
|
||||
color: var(--dracula-pink);
|
||||
}
|
||||
|
||||
/* Dracula Purple */
|
||||
.hljs-literal,
|
||||
.hljs-number {
|
||||
color: var(--dracula-purple);
|
||||
}
|
||||
|
||||
/* Dracula Red */
|
||||
.hljs-regexp {
|
||||
color: var(--dracula-red);
|
||||
}
|
||||
|
||||
/* Dracula Yellow */
|
||||
.hljs-string,
|
||||
.hljs-name,
|
||||
.hljs-type,
|
||||
.hljs-attr,
|
||||
.hljs-symbol,
|
||||
.hljs-bullet,
|
||||
.hljs-addition,
|
||||
.hljs-template-tag {
|
||||
color: var(--dracula-yellow);
|
||||
}
|
||||
|
||||
.hljs-keyword,
|
||||
.hljs-selector-tag,
|
||||
.hljs-literal,
|
||||
.hljs-title,
|
||||
.hljs-section,
|
||||
.hljs-doctag,
|
||||
.hljs-type,
|
||||
.hljs-name,
|
||||
.hljs-strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hljs-params,
|
||||
.hljs-emphasis {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
svg[data-marp-fitting=svg] {
|
||||
max-height: 580px;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin: 0.5em 0 0;
|
||||
color: var(--dracula-pink);
|
||||
}
|
||||
h1 strong,
|
||||
h2 strong,
|
||||
h3 strong,
|
||||
h4 strong,
|
||||
h5 strong,
|
||||
h6 strong {
|
||||
font-weight: inherit;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.8em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.3em;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
p,
|
||||
blockquote {
|
||||
margin: 1em 0 0;
|
||||
}
|
||||
|
||||
ul > li,
|
||||
ol > li {
|
||||
margin: 0.3em 0 0;
|
||||
color: var(--dracula-cyan);
|
||||
}
|
||||
ul > li > p,
|
||||
ol > li > p {
|
||||
margin: 0.6em 0 0;
|
||||
}
|
||||
|
||||
code {
|
||||
display: inline-block;
|
||||
font-family: "IBM Plex Mono", monospace;
|
||||
font-size: 0.8em;
|
||||
letter-spacing: 0;
|
||||
margin: -0.1em 0.15em;
|
||||
padding: 0.1em 0.2em;
|
||||
vertical-align: baseline;
|
||||
color: var(--dracula-green);
|
||||
}
|
||||
|
||||
pre {
|
||||
display: block;
|
||||
margin: 1em 0 0;
|
||||
min-height: 1em;
|
||||
overflow: visible;
|
||||
}
|
||||
pre code {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
min-width: 100%;
|
||||
padding: 0.5em;
|
||||
font-size: 0.7em;
|
||||
}
|
||||
pre code svg[data-marp-fitting=svg] {
|
||||
max-height: calc(580px - 1em);
|
||||
}
|
||||
|
||||
blockquote {
|
||||
margin: 1em 0 0;
|
||||
padding: 0 1em;
|
||||
position: relative;
|
||||
color: var(--dracula-orange);
|
||||
}
|
||||
blockquote::after, blockquote::before {
|
||||
content: "“";
|
||||
display: block;
|
||||
font-family: "Times New Roman", serif;
|
||||
font-weight: bold;
|
||||
position: absolute;
|
||||
color: var(--dracula-green);
|
||||
}
|
||||
blockquote::before {
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
blockquote::after {
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
blockquote > *:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
mark {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
table {
|
||||
border-spacing: 0;
|
||||
border-collapse: collapse;
|
||||
margin: 1em 0 0;
|
||||
}
|
||||
table th,
|
||||
table td {
|
||||
padding: 0.2em 0.4em;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
section {
|
||||
font-size: 35px;
|
||||
font-family: "IBM Plex Sans";
|
||||
line-height: 1.35;
|
||||
letter-spacing: 1.25px;
|
||||
padding: 70px;
|
||||
color: var(--dracula-foreground);
|
||||
background-color: var(--dracula-background);
|
||||
}
|
||||
section > *:first-child,
|
||||
section > header:first-child + * {
|
||||
margin-top: 0;
|
||||
}
|
||||
section a,
|
||||
section mark {
|
||||
color: var(--dracula-red);
|
||||
}
|
||||
section code {
|
||||
background: var(--dracula-current-line);
|
||||
color: var(--dracula-current-green);
|
||||
}
|
||||
section h1 strong,
|
||||
section h2 strong,
|
||||
section h3 strong,
|
||||
section h4 strong,
|
||||
section h5 strong,
|
||||
section h6 strong {
|
||||
color: var(--dracula-current-line);
|
||||
}
|
||||
section pre > code {
|
||||
background: var(--dracula-current-line);
|
||||
}
|
||||
section header,
|
||||
section footer,
|
||||
section section::after,
|
||||
section blockquote::before,
|
||||
section blockquote::after {
|
||||
color: var(--dracula-comment);
|
||||
}
|
||||
section table th,
|
||||
section table td {
|
||||
border-color: var(--dracula-current-line);
|
||||
}
|
||||
section table thead th {
|
||||
background: var(--dracula-current-line);
|
||||
color: var(--dracula-yellow);
|
||||
}
|
||||
section table tbody > tr:nth-child(even) td,
|
||||
section table tbody > tr:nth-child(even) th {
|
||||
background: var(--dracula-current-line);
|
||||
}
|
||||
|
||||
header,
|
||||
footer,
|
||||
section::after {
|
||||
box-sizing: border-box;
|
||||
font-size: 66%;
|
||||
height: 70px;
|
||||
line-height: 50px;
|
||||
overflow: hidden;
|
||||
padding: 10px 25px;
|
||||
position: absolute;
|
||||
color: var(--dracula-comment);
|
||||
}
|
||||
|
||||
header {
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
footer {
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
section::after {
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
font-size: 80%;
|
||||
}
|
||||
Executable
+59
@@ -0,0 +1,59 @@
|
||||
@charset "UTF-8";
|
||||
/*!
|
||||
* Marp / Marpit IGGG theme.
|
||||
*
|
||||
* @theme github
|
||||
* @author MATSUBARA Nobutada
|
||||
* @size 4:3 960px 720px
|
||||
* @size 16:9 1280px 720px
|
||||
*/
|
||||
@import url("https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.3/styles/github.min.css");
|
||||
section {
|
||||
background-color: white;
|
||||
color: #323232;
|
||||
font-size: 28px;
|
||||
line-height: 1.35;
|
||||
letter-spacing: 1.25px;
|
||||
padding: 70px;
|
||||
font-family: '源真ゴシック', 'ヒラギノ角ゴ Pro W3', 'Lato', 'Avenir Next', 'Avenir', 'Trebuchet MS', 'Segoe UI', sans-serif; }
|
||||
section > *:first-child {
|
||||
margin-top: -0.5em;
|
||||
border-bottom: 1px solid #eaecef; }
|
||||
section strong {
|
||||
color: #28a745; }
|
||||
section pre {
|
||||
display: block;
|
||||
margin: 1em 0 0;
|
||||
min-height: 1em;
|
||||
overflow: visible; }
|
||||
section pre code {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
min-width: 100%;
|
||||
padding: 0.5em;
|
||||
font-size: 0.7em;
|
||||
background-color: rgba(0, 0, 0, 0.1); }
|
||||
section code {
|
||||
display: inline-block;
|
||||
font-family: 'NasuM', 'Roboto Mono', monospace;
|
||||
font-size: 0.8em;
|
||||
letter-spacing: 0;
|
||||
margin: -0.1em 0.15em;
|
||||
padding: 0.1em 0.2em;
|
||||
vertical-align: baseline;
|
||||
background-color: rgba(0, 0, 0, 0.1); }
|
||||
|
||||
section.red strong {
|
||||
color: #cb2431; }
|
||||
|
||||
section.lead {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: center;
|
||||
text-align: center; }
|
||||
section.lead > *:first-child {
|
||||
margin-top: 0; }
|
||||
|
||||
section.split div.split {
|
||||
columns: 2; }
|
||||
Executable
+66
@@ -0,0 +1,66 @@
|
||||
/* @theme gradient */
|
||||
|
||||
@import "default";
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');
|
||||
|
||||
:root {
|
||||
font-family: Inter, Helvetica, Arial;
|
||||
}
|
||||
|
||||
section {
|
||||
background-color: #ffffff;
|
||||
background-image: linear-gradient(40deg, #e2bee2ad 0%, #a7e1e7ad 100%);
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
color: #842174;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #9d30a6;
|
||||
}
|
||||
|
||||
code {
|
||||
background-color: rgba(146, 146, 146, 0.2);
|
||||
}
|
||||
|
||||
pre {
|
||||
background-color: #ece1ecad;
|
||||
}
|
||||
|
||||
/* https://github.com/yhatt/marp/issues/263 */
|
||||
section::after {
|
||||
font-size: 0.75em;
|
||||
content: attr(data-marpit-pagination) ' / ' attr(data-marpit-pagination-total);
|
||||
}
|
||||
|
||||
/* the "center" keyword centers the image - may break, careful */
|
||||
img[alt~="center"] {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* || SECTION CLASS: blue */
|
||||
section.blue {
|
||||
background-color: #ffffff;
|
||||
background-image: linear-gradient(to bottom right, #cadaf7 0%, #87a7e4 100%);
|
||||
}
|
||||
|
||||
section.blue>h1, section.blue>h2, section.blue>h3, section.blue>h4, section.blue>h5, section.blue>h6 {
|
||||
color: #214484;
|
||||
}
|
||||
|
||||
section.blue>a {
|
||||
color: #303ca6;
|
||||
}
|
||||
|
||||
section.blue::after, section.blue>footer, section.blue>header {
|
||||
color: #303ca6;
|
||||
}
|
||||
|
||||
/* || SECTION CLASS: tinytext */
|
||||
/* new class that makes p, ul, and blockquote text smaller */
|
||||
/* might be useful for the References slide, use <!-- _class: tinytext --> */
|
||||
section.tinytext>p, section.tinytext>ul, section.tinytext>blockquote {
|
||||
font-size: 0.65em;
|
||||
}
|
||||
Executable
+473
@@ -0,0 +1,473 @@
|
||||
@charset "UTF-8";
|
||||
/*!
|
||||
* Marp / Marpit Haskell theme.
|
||||
*
|
||||
* @theme haskell
|
||||
* @author MATSUBARA Nobutada
|
||||
* @size 4:3 960px 720px
|
||||
* @size 16:9 1280px 720px
|
||||
*/
|
||||
@import url("https://fonts.googleapis.com/css?family=Lato:400,900|Roboto+Mono:400,700");
|
||||
@import url("https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.8/styles/github.min.css");
|
||||
svg[data-marp-fitting='svg'] {
|
||||
max-height: 580px; }
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin: 0.5em 0 0; }
|
||||
h1 strong,
|
||||
h2 strong,
|
||||
h3 strong,
|
||||
h4 strong,
|
||||
h5 strong,
|
||||
h6 strong {
|
||||
font-weight: inherit; }
|
||||
|
||||
h1 {
|
||||
font-size: 1.8em; }
|
||||
|
||||
h2 {
|
||||
font-size: 1.5em; }
|
||||
|
||||
h3 {
|
||||
font-size: 1.3em; }
|
||||
|
||||
h4 {
|
||||
font-size: 1.1em; }
|
||||
|
||||
h5 {
|
||||
font-size: 1em; }
|
||||
|
||||
h6 {
|
||||
font-size: 0.9em; }
|
||||
|
||||
p,
|
||||
blockquote {
|
||||
margin: 1em 0 0; }
|
||||
|
||||
ul > li,
|
||||
ol > li {
|
||||
margin: 0.3em 0 0; }
|
||||
ul > li > p,
|
||||
ol > li > p {
|
||||
margin: 0.6em 0 0; }
|
||||
|
||||
code {
|
||||
display: inline-block;
|
||||
font-family: 'NasuM', 'Roboto Mono', monospace;
|
||||
font-size: 0.8em;
|
||||
letter-spacing: 0;
|
||||
margin: -0.1em 0.15em;
|
||||
padding: 0.1em 0.2em;
|
||||
vertical-align: baseline; }
|
||||
|
||||
pre {
|
||||
display: block;
|
||||
margin: 1em 0 0;
|
||||
min-height: 1em;
|
||||
overflow: visible; }
|
||||
pre code {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
min-width: 100%;
|
||||
padding: 0.5em;
|
||||
font-size: 0.7em; }
|
||||
pre code svg[data-marp-fitting='svg'] {
|
||||
max-height: calc(580px - 1em); }
|
||||
|
||||
blockquote {
|
||||
margin: 1em 0 0;
|
||||
padding: 0 1em;
|
||||
position: relative; }
|
||||
blockquote::after, blockquote::before {
|
||||
content: '“';
|
||||
display: block;
|
||||
font-family: 'Times New Roman', serif;
|
||||
font-weight: bold;
|
||||
position: absolute; }
|
||||
blockquote::before {
|
||||
top: 0;
|
||||
left: 0; }
|
||||
blockquote::after {
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
transform: rotate(180deg); }
|
||||
blockquote > *:first-child {
|
||||
margin-top: 0; }
|
||||
|
||||
mark {
|
||||
background: transparent; }
|
||||
|
||||
table {
|
||||
border-spacing: 0;
|
||||
border-collapse: collapse;
|
||||
margin: 1em 0 0; }
|
||||
table th,
|
||||
table td {
|
||||
padding: 0.2em 0.4em;
|
||||
border-width: 1px;
|
||||
border-style: solid; }
|
||||
|
||||
section {
|
||||
background-image: linear-gradient(135deg, rgba(136, 136, 136, 0), rgba(136, 136, 136, 0.02) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.05));
|
||||
font-size: 28px;
|
||||
font-family: '源真ゴシック', 'ヒラギノ角ゴ Pro W3', 'Lato', 'Avenir Next', 'Avenir', 'Trebuchet MS', 'Segoe UI', sans-serif;
|
||||
line-height: 1.35;
|
||||
letter-spacing: 1.25px;
|
||||
padding: 70px;
|
||||
color: #323232;
|
||||
background-color: #FFFFFF;
|
||||
background: ""; }
|
||||
section > *:first-child,
|
||||
section > header:first-child + * {
|
||||
margin-top: 0; }
|
||||
section a,
|
||||
section mark {
|
||||
color: #5d4f85; }
|
||||
section code {
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
color: #323232; }
|
||||
section h1 strong,
|
||||
section h2 strong,
|
||||
section h3 strong,
|
||||
section h4 strong,
|
||||
section h5 strong,
|
||||
section h6 strong {
|
||||
color: #5d4f85; }
|
||||
section h1 img,
|
||||
section h2 img,
|
||||
section h3 img,
|
||||
section h4 img,
|
||||
section h5 img,
|
||||
section h6 img {
|
||||
display: block;
|
||||
margin: auto; }
|
||||
section pre > code {
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
color: #323232; }
|
||||
section header,
|
||||
section footer,
|
||||
section section::after,
|
||||
section blockquote::before,
|
||||
section blockquote::after {
|
||||
color: #5b5b5b; }
|
||||
section table th,
|
||||
section table td {
|
||||
border-color: #323232; }
|
||||
section table thead th {
|
||||
background: #323232;
|
||||
color: #FFFFFF; }
|
||||
section table tbody > tr:nth-child(odd) td,
|
||||
section table tbody > tr:nth-child(odd) th {
|
||||
background: rgba(50, 50, 50, 0.1); }
|
||||
section.invert {
|
||||
color: #FFFFFF;
|
||||
background-color: #323232;
|
||||
background: ""; }
|
||||
section.invert a,
|
||||
section.invert mark {
|
||||
color: #DB83ED; }
|
||||
section.invert code {
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
color: #FFFFFF; }
|
||||
section.invert h1 strong,
|
||||
section.invert h2 strong,
|
||||
section.invert h3 strong,
|
||||
section.invert h4 strong,
|
||||
section.invert h5 strong,
|
||||
section.invert h6 strong {
|
||||
color: #DB83ED; }
|
||||
section.invert h1 img,
|
||||
section.invert h2 img,
|
||||
section.invert h3 img,
|
||||
section.invert h4 img,
|
||||
section.invert h5 img,
|
||||
section.invert h6 img {
|
||||
display: block;
|
||||
margin: auto; }
|
||||
section.invert pre > code {
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
color: #FFFFFF; }
|
||||
section.invert header,
|
||||
section.invert footer,
|
||||
section.invert section::after,
|
||||
section.invert blockquote::before,
|
||||
section.invert blockquote::after {
|
||||
color: #d6d6d6; }
|
||||
section.invert table th,
|
||||
section.invert table td {
|
||||
border-color: #FFFFFF; }
|
||||
section.invert table thead th {
|
||||
background: #FFFFFF;
|
||||
color: #323232; }
|
||||
section.invert table tbody > tr:nth-child(odd) td,
|
||||
section.invert table tbody > tr:nth-child(odd) th {
|
||||
background: rgba(255, 255, 255, 0.1); }
|
||||
section.haskell {
|
||||
color: #FFFFFF;
|
||||
background-color: #5d4f85;
|
||||
background: url("https://raw.githubusercontent.com/haskell-infra/hl/master/static/img/pattern.png"); }
|
||||
section.haskell a,
|
||||
section.haskell mark {
|
||||
color: #DB83ED; }
|
||||
section.haskell code {
|
||||
background: rgba(235, 228, 243, 0.25);
|
||||
color: #FFFFFF; }
|
||||
section.haskell h1 strong,
|
||||
section.haskell h2 strong,
|
||||
section.haskell h3 strong,
|
||||
section.haskell h4 strong,
|
||||
section.haskell h5 strong,
|
||||
section.haskell h6 strong {
|
||||
color: #DB83ED; }
|
||||
section.haskell h1 img,
|
||||
section.haskell h2 img,
|
||||
section.haskell h3 img,
|
||||
section.haskell h4 img,
|
||||
section.haskell h5 img,
|
||||
section.haskell h6 img {
|
||||
display: block;
|
||||
margin: auto; }
|
||||
section.haskell pre > code {
|
||||
background: rgba(235, 228, 243, 0.25);
|
||||
color: #FFFFFF; }
|
||||
section.haskell header,
|
||||
section.haskell footer,
|
||||
section.haskell section::after,
|
||||
section.haskell blockquote::before,
|
||||
section.haskell blockquote::after {
|
||||
color: #dfdce7; }
|
||||
section.haskell table th,
|
||||
section.haskell table td {
|
||||
border-color: #FFFFFF; }
|
||||
section.haskell table thead th {
|
||||
background: #FFFFFF;
|
||||
color: #5d4f85; }
|
||||
section.haskell table tbody > tr:nth-child(odd) td,
|
||||
section.haskell table tbody > tr:nth-child(odd) th {
|
||||
background: rgba(255, 255, 255, 0.1); }
|
||||
section.lead {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: center; }
|
||||
section.lead h1,
|
||||
section.lead h2,
|
||||
section.lead h3,
|
||||
section.lead h4,
|
||||
section.lead h5,
|
||||
section.lead h6 {
|
||||
text-align: center; }
|
||||
section.lead h1 svg[data-marp-fitting='svg'],
|
||||
section.lead h2 svg[data-marp-fitting='svg'],
|
||||
section.lead h3 svg[data-marp-fitting='svg'],
|
||||
section.lead h4 svg[data-marp-fitting='svg'],
|
||||
section.lead h5 svg[data-marp-fitting='svg'],
|
||||
section.lead h6 svg[data-marp-fitting='svg'] {
|
||||
--preserve-aspect-ratio: xMidYMid meet; }
|
||||
section.lead p {
|
||||
text-align: center; }
|
||||
section.lead blockquote > h1,
|
||||
section.lead blockquote > h2,
|
||||
section.lead blockquote > h3,
|
||||
section.lead blockquote > h4,
|
||||
section.lead blockquote > h5,
|
||||
section.lead blockquote > h6,
|
||||
section.lead blockquote > p {
|
||||
text-align: left; }
|
||||
section.lead blockquote svg[data-marp-fitting='svg']:not([data-marp-fitting-math]) {
|
||||
--preserve-aspect-ratio: xMinYMin meet; }
|
||||
section.lead ul > li > p,
|
||||
section.lead ol > li > p {
|
||||
text-align: left; }
|
||||
section.lead table {
|
||||
margin-left: auto;
|
||||
margin-right: auto; }
|
||||
section.lead-invert {
|
||||
color: #FFFFFF;
|
||||
background-color: #323232;
|
||||
background: "";
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: center; }
|
||||
section.lead-invert a,
|
||||
section.lead-invert mark {
|
||||
color: #DB83ED; }
|
||||
section.lead-invert code {
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
color: #FFFFFF; }
|
||||
section.lead-invert h1 strong,
|
||||
section.lead-invert h2 strong,
|
||||
section.lead-invert h3 strong,
|
||||
section.lead-invert h4 strong,
|
||||
section.lead-invert h5 strong,
|
||||
section.lead-invert h6 strong {
|
||||
color: #DB83ED; }
|
||||
section.lead-invert h1 img,
|
||||
section.lead-invert h2 img,
|
||||
section.lead-invert h3 img,
|
||||
section.lead-invert h4 img,
|
||||
section.lead-invert h5 img,
|
||||
section.lead-invert h6 img {
|
||||
display: block;
|
||||
margin: auto; }
|
||||
section.lead-invert pre > code {
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
color: #FFFFFF; }
|
||||
section.lead-invert header,
|
||||
section.lead-invert footer,
|
||||
section.lead-invert section::after,
|
||||
section.lead-invert blockquote::before,
|
||||
section.lead-invert blockquote::after {
|
||||
color: #d6d6d6; }
|
||||
section.lead-invert table th,
|
||||
section.lead-invert table td {
|
||||
border-color: #FFFFFF; }
|
||||
section.lead-invert table thead th {
|
||||
background: #FFFFFF;
|
||||
color: #323232; }
|
||||
section.lead-invert table tbody > tr:nth-child(odd) td,
|
||||
section.lead-invert table tbody > tr:nth-child(odd) th {
|
||||
background: rgba(255, 255, 255, 0.1); }
|
||||
section.lead-invert h1,
|
||||
section.lead-invert h2,
|
||||
section.lead-invert h3,
|
||||
section.lead-invert h4,
|
||||
section.lead-invert h5,
|
||||
section.lead-invert h6 {
|
||||
text-align: center; }
|
||||
section.lead-invert h1 svg[data-marp-fitting='svg'],
|
||||
section.lead-invert h2 svg[data-marp-fitting='svg'],
|
||||
section.lead-invert h3 svg[data-marp-fitting='svg'],
|
||||
section.lead-invert h4 svg[data-marp-fitting='svg'],
|
||||
section.lead-invert h5 svg[data-marp-fitting='svg'],
|
||||
section.lead-invert h6 svg[data-marp-fitting='svg'] {
|
||||
--preserve-aspect-ratio: xMidYMid meet; }
|
||||
section.lead-invert p {
|
||||
text-align: center; }
|
||||
section.lead-invert blockquote > h1,
|
||||
section.lead-invert blockquote > h2,
|
||||
section.lead-invert blockquote > h3,
|
||||
section.lead-invert blockquote > h4,
|
||||
section.lead-invert blockquote > h5,
|
||||
section.lead-invert blockquote > h6,
|
||||
section.lead-invert blockquote > p {
|
||||
text-align: left; }
|
||||
section.lead-invert blockquote svg[data-marp-fitting='svg']:not([data-marp-fitting-math]) {
|
||||
--preserve-aspect-ratio: xMinYMin meet; }
|
||||
section.lead-invert ul > li > p,
|
||||
section.lead-invert ol > li > p {
|
||||
text-align: left; }
|
||||
section.lead-invert table {
|
||||
margin-left: auto;
|
||||
margin-right: auto; }
|
||||
section.lead-haskell {
|
||||
color: #FFFFFF;
|
||||
background-color: #5d4f85;
|
||||
background: url("https://raw.githubusercontent.com/haskell-infra/hl/master/static/img/pattern.png");
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: center; }
|
||||
section.lead-haskell a,
|
||||
section.lead-haskell mark {
|
||||
color: #DB83ED; }
|
||||
section.lead-haskell code {
|
||||
background: rgba(235, 228, 243, 0.25);
|
||||
color: #FFFFFF; }
|
||||
section.lead-haskell h1 strong,
|
||||
section.lead-haskell h2 strong,
|
||||
section.lead-haskell h3 strong,
|
||||
section.lead-haskell h4 strong,
|
||||
section.lead-haskell h5 strong,
|
||||
section.lead-haskell h6 strong {
|
||||
color: #DB83ED; }
|
||||
section.lead-haskell h1 img,
|
||||
section.lead-haskell h2 img,
|
||||
section.lead-haskell h3 img,
|
||||
section.lead-haskell h4 img,
|
||||
section.lead-haskell h5 img,
|
||||
section.lead-haskell h6 img {
|
||||
display: block;
|
||||
margin: auto; }
|
||||
section.lead-haskell pre > code {
|
||||
background: rgba(235, 228, 243, 0.25);
|
||||
color: #FFFFFF; }
|
||||
section.lead-haskell header,
|
||||
section.lead-haskell footer,
|
||||
section.lead-haskell section::after,
|
||||
section.lead-haskell blockquote::before,
|
||||
section.lead-haskell blockquote::after {
|
||||
color: #dfdce7; }
|
||||
section.lead-haskell table th,
|
||||
section.lead-haskell table td {
|
||||
border-color: #FFFFFF; }
|
||||
section.lead-haskell table thead th {
|
||||
background: #FFFFFF;
|
||||
color: #5d4f85; }
|
||||
section.lead-haskell table tbody > tr:nth-child(odd) td,
|
||||
section.lead-haskell table tbody > tr:nth-child(odd) th {
|
||||
background: rgba(255, 255, 255, 0.1); }
|
||||
section.lead-haskell h1,
|
||||
section.lead-haskell h2,
|
||||
section.lead-haskell h3,
|
||||
section.lead-haskell h4,
|
||||
section.lead-haskell h5,
|
||||
section.lead-haskell h6 {
|
||||
text-align: center; }
|
||||
section.lead-haskell h1 svg[data-marp-fitting='svg'],
|
||||
section.lead-haskell h2 svg[data-marp-fitting='svg'],
|
||||
section.lead-haskell h3 svg[data-marp-fitting='svg'],
|
||||
section.lead-haskell h4 svg[data-marp-fitting='svg'],
|
||||
section.lead-haskell h5 svg[data-marp-fitting='svg'],
|
||||
section.lead-haskell h6 svg[data-marp-fitting='svg'] {
|
||||
--preserve-aspect-ratio: xMidYMid meet; }
|
||||
section.lead-haskell p {
|
||||
text-align: center; }
|
||||
section.lead-haskell blockquote > h1,
|
||||
section.lead-haskell blockquote > h2,
|
||||
section.lead-haskell blockquote > h3,
|
||||
section.lead-haskell blockquote > h4,
|
||||
section.lead-haskell blockquote > h5,
|
||||
section.lead-haskell blockquote > h6,
|
||||
section.lead-haskell blockquote > p {
|
||||
text-align: left; }
|
||||
section.lead-haskell blockquote svg[data-marp-fitting='svg']:not([data-marp-fitting-math]) {
|
||||
--preserve-aspect-ratio: xMinYMin meet; }
|
||||
section.lead-haskell ul > li > p,
|
||||
section.lead-haskell ol > li > p {
|
||||
text-align: left; }
|
||||
section.lead-haskell table {
|
||||
margin-left: auto;
|
||||
margin-right: auto; }
|
||||
|
||||
header,
|
||||
footer,
|
||||
section::after {
|
||||
box-sizing: border-box;
|
||||
font-size: 66%;
|
||||
height: 70px;
|
||||
line-height: 50px;
|
||||
overflow: hidden;
|
||||
padding: 10px 25px;
|
||||
position: absolute; }
|
||||
|
||||
header {
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0; }
|
||||
|
||||
footer {
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0; }
|
||||
|
||||
section::after {
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
font-size: 80%; }
|
||||
Executable
+68
@@ -0,0 +1,68 @@
|
||||
@charset "UTF-8";
|
||||
/*!
|
||||
* Marp / Marpit IGGG theme.
|
||||
*
|
||||
* @theme iggg
|
||||
* @author MATSUBARA Nobutada
|
||||
* @size 4:3 960px 720px
|
||||
* @size 16:9 1280px 720px
|
||||
*/
|
||||
@import url("https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.3/styles/github.min.css");
|
||||
section {
|
||||
background-color: white;
|
||||
color: #323232;
|
||||
font-size: 28px;
|
||||
line-height: 1.35;
|
||||
letter-spacing: 1.25px;
|
||||
padding: 70px;
|
||||
font-family: '源真ゴシック', 'ヒラギノ角ゴ Pro W3', 'Lato', 'Avenir Next', 'Avenir', 'Trebuchet MS', 'Segoe UI', sans-serif; }
|
||||
section > *:first-child {
|
||||
margin-top: -0.5em;
|
||||
margin-bottom: 0; }
|
||||
section strong {
|
||||
color: #1b7aca; }
|
||||
section pre {
|
||||
display: block;
|
||||
margin: 1em 0 0;
|
||||
min-height: 1em;
|
||||
overflow: visible; }
|
||||
section pre code {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
min-width: 100%;
|
||||
padding: 0.5em;
|
||||
font-size: 0.7em;
|
||||
background-color: rgba(0, 0, 0, 0.1); }
|
||||
section code {
|
||||
display: inline-block;
|
||||
font-family: 'NasuM', 'Roboto Mono', monospace;
|
||||
font-size: 0.8em;
|
||||
letter-spacing: 0;
|
||||
margin: -0.1em 0.15em;
|
||||
padding: 0.1em 0.2em;
|
||||
vertical-align: baseline;
|
||||
background-color: rgba(0, 0, 0, 0.1); }
|
||||
section ul > li,
|
||||
section ol > li {
|
||||
margin: 0.3em 0 0; }
|
||||
section ul > li > p,
|
||||
section ol > li > p {
|
||||
margin: 0.6em 0 0; }
|
||||
section img[alt~="center"] {
|
||||
display: block;
|
||||
margin: 0 auto; }
|
||||
|
||||
section.lead {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: center;
|
||||
text-align: center; }
|
||||
section.lead > *:first-child {
|
||||
margin-top: 0; }
|
||||
|
||||
section.split div.column {
|
||||
display: table-cell;
|
||||
columns: 2; }
|
||||
section.split div.column h3 {
|
||||
break-before: column; }
|
||||
+152
@@ -0,0 +1,152 @@
|
||||
/* @theme minimal-container-turquoise */
|
||||
|
||||
@import "gaia";
|
||||
|
||||
/*
|
||||
Usage:
|
||||
- slides: <!-- _class: 'xxx yyy' -->
|
||||
- fitting: <!-- fit -->
|
||||
|
||||
Classes:
|
||||
- First slide: 'lead'
|
||||
- First slide of a section: 'divider'
|
||||
- Boxes: 'box-flex box-bg'
|
||||
- text: big, small, extrasmall, center
|
||||
*/
|
||||
|
||||
/* COLOR CONFIGURATION */
|
||||
:root {
|
||||
--color-background: #fff;
|
||||
--color-foreground: #455054;
|
||||
--color-highlight: #E69D45;
|
||||
--color-background-stripe: #D4CFC9;
|
||||
--color-dimmed: #308695;
|
||||
}
|
||||
|
||||
|
||||
section {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
p,li {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
header {
|
||||
color: var(--color-background);
|
||||
padding-top:0;
|
||||
margin-top: -10px !important;
|
||||
}
|
||||
|
||||
footer {
|
||||
border-left: 2px solid;
|
||||
/* border-image: linear-gradient(to right, #000 50%, transparent 50%) 100% 1; */
|
||||
padding: 0px 20px;
|
||||
margin: 10px 20px 10px 60px;
|
||||
height: 40px;
|
||||
font-size: 50%;
|
||||
border-image: linear-gradient(to bottom, rgba(0,0,0,0) 33%,var(--color-dimmed) 33%,var(--color-dimmed) 100%,rgba(0,0,0,0) 75%);
|
||||
border-image-slice: 1;
|
||||
}
|
||||
|
||||
section::after {
|
||||
left: 0;
|
||||
height: 60px;
|
||||
font-size: 50%;
|
||||
color: var(--color-dimmed);
|
||||
}
|
||||
|
||||
h1, h2 {
|
||||
background-color: var(--color-dimmed);
|
||||
color: var(--color-background);
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: 0;
|
||||
padding: 25px 25px 15px 25px;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
width: 60%;
|
||||
text-align: center;
|
||||
align-self: center;
|
||||
padding: 66px;
|
||||
border-radius: 30px;
|
||||
background-color: var(--color-background-stripe, transparent);
|
||||
}
|
||||
|
||||
blockquote::before,blockquote::after {
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
table {
|
||||
width: calc(100% - 80px);;
|
||||
}
|
||||
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
p, strong,
|
||||
li,ul,ol,
|
||||
blockquote,
|
||||
table,
|
||||
code, marp-pre {
|
||||
margin-left: 40px !important;
|
||||
margin-right: 40px !important;
|
||||
}
|
||||
|
||||
section.lead h2 {
|
||||
background-color: var(--color-background);
|
||||
color: var(--color-foreground);
|
||||
}
|
||||
|
||||
section.divider h2 {
|
||||
width: 45%;
|
||||
}
|
||||
|
||||
section.divider {
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
|
||||
section.box-flex {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
align-content: flex-start;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
section.box-flex > * {
|
||||
flex: 1 100%;
|
||||
}
|
||||
|
||||
section.box-flex > .container{
|
||||
margin: 10px !important;
|
||||
border-radius: 5px;
|
||||
padding: 0.5em;
|
||||
flex: 1 1 0;
|
||||
}
|
||||
|
||||
section.box-bg > .container {
|
||||
background-color: var(--color-background-stripe,transparent);
|
||||
}
|
||||
|
||||
section.small p,section.big li {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
section.small p,section.small li {
|
||||
font-size: 0.6em;
|
||||
}
|
||||
|
||||
section.extrasmall p, section.extrasmall li {
|
||||
font-size: 0.4em;
|
||||
}
|
||||
|
||||
section.center p, section.center > ul > li {
|
||||
text-align: center;
|
||||
}
|
||||
Executable
+153
@@ -0,0 +1,153 @@
|
||||
/* @theme minimal-turquoise */
|
||||
|
||||
@import "gaia";
|
||||
|
||||
/*
|
||||
Usage:
|
||||
- slides: <!-- _class: 'xxx yyy' -->
|
||||
- fitting: <!-- fit -->
|
||||
|
||||
Classes:
|
||||
- First slide: 'lead'
|
||||
- First slide of a section: 'divider'
|
||||
- Boxes: 'box-flex box-bg'
|
||||
- text: big, small, extrasmall, center
|
||||
*/
|
||||
|
||||
/* COLOR CONFIGURATION */
|
||||
:root {
|
||||
--color-background: #fff;
|
||||
--color-foreground: #455054;
|
||||
--color-highlight: #E69D45;
|
||||
--color-background-stripe: #D4CFC9;
|
||||
--color-dimmed: #308695;
|
||||
}
|
||||
|
||||
|
||||
section {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
p,li {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
header {
|
||||
color: var(--color-background);
|
||||
padding-top:0;
|
||||
margin-top: -10px !important;
|
||||
}
|
||||
|
||||
footer {
|
||||
border-left: 2px solid;
|
||||
/* border-image: linear-gradient(to right, #000 50%, transparent 50%) 100% 1; */
|
||||
padding: 0px 20px;
|
||||
margin: 10px 20px 10px 60px;
|
||||
height: 40px;
|
||||
font-size: 50%;
|
||||
border-image: linear-gradient(to bottom, rgba(0,0,0,0) 33%,var(--color-dimmed) 33%,var(--color-dimmed) 100%,rgba(0,0,0,0) 75%);
|
||||
border-image-slice: 1;
|
||||
}
|
||||
|
||||
section::after {
|
||||
left: 0;
|
||||
height: 60px;
|
||||
font-size: 50%;
|
||||
color: var(--color-dimmed);
|
||||
}
|
||||
|
||||
h1, h2 {
|
||||
background-color: var(--color-dimmed);
|
||||
color: var(--color-background);
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: 0;
|
||||
padding: 25px 25px 15px 25px;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
width: 60%;
|
||||
text-align: center;
|
||||
align-self: center;
|
||||
padding: 66px;
|
||||
border-radius: 30px;
|
||||
background-color: var(--color-background-stripe, transparent);
|
||||
}
|
||||
|
||||
blockquote::before,blockquote::after {
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
table {
|
||||
width: calc(100% - 80px);;
|
||||
}
|
||||
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
p, strong,
|
||||
li,ul,ol,
|
||||
blockquote,
|
||||
table,
|
||||
code, marp-pre {
|
||||
margin-left: 40px !important;
|
||||
margin-right: 40px !important;
|
||||
}
|
||||
|
||||
section.lead h2 {
|
||||
background-color: var(--color-background);
|
||||
color: var(--color-foreground);
|
||||
}
|
||||
|
||||
section.divider h2 {
|
||||
width: 45%;
|
||||
}
|
||||
|
||||
section.divider {
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
|
||||
section.box-flex > ul{
|
||||
margin: 0 !important;
|
||||
height: 80%;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
align-items:stretch;
|
||||
align-content: stretch;
|
||||
}
|
||||
|
||||
section.box-flex > ul > li{
|
||||
margin: 10px !important;
|
||||
border-radius: 5px;
|
||||
padding: 0.5em;
|
||||
flex: 1 1 0;
|
||||
}
|
||||
|
||||
section.box-bg > ul >li {
|
||||
background-color: var(--color-background-stripe,transparent);
|
||||
}
|
||||
|
||||
|
||||
section.small p,section.big li {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
section.small p,section.small li {
|
||||
font-size: 0.6em;
|
||||
}
|
||||
|
||||
section.extrasmall p, section.extrasmall li {
|
||||
font-size: 0.4em;
|
||||
}
|
||||
|
||||
section.center p, section.center > ul > li {
|
||||
text-align: center;
|
||||
}
|
||||
Executable
+463
@@ -0,0 +1,463 @@
|
||||
@charset "UTF-8";
|
||||
/*!
|
||||
* Marp / Marpit Olive theme.
|
||||
*
|
||||
* @theme olive
|
||||
* @author MATSUBARA Nobutada
|
||||
* @size 4:3 960px 720px
|
||||
* @size 16:9 1280px 720px
|
||||
*/
|
||||
@import url("https://fonts.googleapis.com/css?family=Lato:400,900|Roboto+Mono:400,700");
|
||||
@import url("https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.8/styles/github.min.css");
|
||||
svg[data-marp-fitting='svg'] {
|
||||
max-height: 580px; }
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin: 0.5em 0 0; }
|
||||
h1 strong,
|
||||
h2 strong,
|
||||
h3 strong,
|
||||
h4 strong,
|
||||
h5 strong,
|
||||
h6 strong {
|
||||
font-weight: inherit; }
|
||||
|
||||
h1 {
|
||||
font-size: 1.8em; }
|
||||
|
||||
h2 {
|
||||
font-size: 1.5em; }
|
||||
|
||||
h3 {
|
||||
font-size: 1.3em; }
|
||||
|
||||
h4 {
|
||||
font-size: 1.1em; }
|
||||
|
||||
h5 {
|
||||
font-size: 1em; }
|
||||
|
||||
h6 {
|
||||
font-size: 0.9em; }
|
||||
|
||||
p,
|
||||
blockquote {
|
||||
margin: 1em 0 0; }
|
||||
|
||||
ul > li,
|
||||
ol > li {
|
||||
margin: 0.3em 0 0; }
|
||||
ul > li > p,
|
||||
ol > li > p {
|
||||
margin: 0.6em 0 0; }
|
||||
|
||||
code {
|
||||
display: inline-block;
|
||||
font-family: 'NasuM', 'Roboto Mono', monospace;
|
||||
font-size: 0.8em;
|
||||
letter-spacing: 0;
|
||||
margin: -0.1em 0.15em;
|
||||
padding: 0.1em 0.2em;
|
||||
vertical-align: baseline; }
|
||||
|
||||
pre {
|
||||
display: block;
|
||||
margin: 1em 0 0;
|
||||
min-height: 1em;
|
||||
overflow: visible; }
|
||||
pre code {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
min-width: 100%;
|
||||
padding: 0.5em;
|
||||
font-size: 0.7em; }
|
||||
pre code svg[data-marp-fitting='svg'] {
|
||||
max-height: calc(580px - 1em); }
|
||||
|
||||
blockquote {
|
||||
margin: 1em 0 0;
|
||||
padding: 0 1em;
|
||||
position: relative; }
|
||||
blockquote::after, blockquote::before {
|
||||
content: '“';
|
||||
display: block;
|
||||
font-family: 'Times New Roman', serif;
|
||||
font-weight: bold;
|
||||
position: absolute; }
|
||||
blockquote::before {
|
||||
top: 0;
|
||||
left: 0; }
|
||||
blockquote::after {
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
transform: rotate(180deg); }
|
||||
blockquote > *:first-child {
|
||||
margin-top: 0; }
|
||||
|
||||
mark {
|
||||
background: transparent; }
|
||||
|
||||
table {
|
||||
border-spacing: 0;
|
||||
border-collapse: collapse;
|
||||
margin: 1em 0 0; }
|
||||
table th,
|
||||
table td {
|
||||
padding: 0.2em 0.4em;
|
||||
border-width: 1px;
|
||||
border-style: solid; }
|
||||
|
||||
section {
|
||||
background-image: linear-gradient(135deg, rgba(136, 136, 136, 0), rgba(136, 136, 136, 0.02) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.05));
|
||||
font-size: 28px;
|
||||
font-family: '源真ゴシック', 'ヒラギノ角ゴ Pro W3', 'Lato', 'Avenir Next', 'Avenir', 'Trebuchet MS', 'Segoe UI', sans-serif;
|
||||
line-height: 1.35;
|
||||
letter-spacing: 1.25px;
|
||||
padding: 70px;
|
||||
color: #FFF2DD;
|
||||
background-color: #4e4f53; }
|
||||
section > *:first-child,
|
||||
section > header:first-child + * {
|
||||
margin-top: 0; }
|
||||
section a,
|
||||
section mark {
|
||||
color: #CCA551; }
|
||||
section code {
|
||||
background: #dcd1c1;
|
||||
color: #4e4f53; }
|
||||
section h1 strong,
|
||||
section h2 strong,
|
||||
section h3 strong,
|
||||
section h4 strong,
|
||||
section h5 strong,
|
||||
section h6 strong {
|
||||
color: #CCA551; }
|
||||
section h1 img,
|
||||
section h2 img,
|
||||
section h3 img,
|
||||
section h4 img,
|
||||
section h5 img,
|
||||
section h6 img {
|
||||
display: block;
|
||||
margin: auto; }
|
||||
section pre > code {
|
||||
background: #FFF2DD; }
|
||||
section header,
|
||||
section footer,
|
||||
section section::after,
|
||||
section blockquote::before,
|
||||
section blockquote::after {
|
||||
color: #dcd1c1; }
|
||||
section table th,
|
||||
section table td {
|
||||
border-color: #FFF2DD; }
|
||||
section table thead th {
|
||||
background: #FFF2DD;
|
||||
color: #4e4f53; }
|
||||
section table tbody > tr:nth-child(odd) td,
|
||||
section table tbody > tr:nth-child(odd) th {
|
||||
background: rgba(255, 242, 221, 0.1); }
|
||||
section.invert {
|
||||
color: #4e4f53;
|
||||
background-color: #FFF2DD; }
|
||||
section.invert a,
|
||||
section.invert mark {
|
||||
color: #CCA551; }
|
||||
section.invert code {
|
||||
background: #71706f;
|
||||
color: #FFF2DD; }
|
||||
section.invert h1 strong,
|
||||
section.invert h2 strong,
|
||||
section.invert h3 strong,
|
||||
section.invert h4 strong,
|
||||
section.invert h5 strong,
|
||||
section.invert h6 strong {
|
||||
color: #CCA551; }
|
||||
section.invert h1 img,
|
||||
section.invert h2 img,
|
||||
section.invert h3 img,
|
||||
section.invert h4 img,
|
||||
section.invert h5 img,
|
||||
section.invert h6 img {
|
||||
display: block;
|
||||
margin: auto; }
|
||||
section.invert pre > code {
|
||||
background: #4e4f53; }
|
||||
section.invert header,
|
||||
section.invert footer,
|
||||
section.invert section::after,
|
||||
section.invert blockquote::before,
|
||||
section.invert blockquote::after {
|
||||
color: #71706f; }
|
||||
section.invert table th,
|
||||
section.invert table td {
|
||||
border-color: #4e4f53; }
|
||||
section.invert table thead th {
|
||||
background: #4e4f53;
|
||||
color: #FFF2DD; }
|
||||
section.invert table tbody > tr:nth-child(odd) td,
|
||||
section.invert table tbody > tr:nth-child(odd) th {
|
||||
background: rgba(78, 79, 83, 0.1); }
|
||||
section.olive {
|
||||
color: #4e4f53;
|
||||
background-color: #CCA551; }
|
||||
section.olive a,
|
||||
section.olive mark {
|
||||
color: #FFF2DD; }
|
||||
section.olive code {
|
||||
background: #676053;
|
||||
color: #CCA551; }
|
||||
section.olive h1 strong,
|
||||
section.olive h2 strong,
|
||||
section.olive h3 strong,
|
||||
section.olive h4 strong,
|
||||
section.olive h5 strong,
|
||||
section.olive h6 strong {
|
||||
color: #FFF2DD; }
|
||||
section.olive h1 img,
|
||||
section.olive h2 img,
|
||||
section.olive h3 img,
|
||||
section.olive h4 img,
|
||||
section.olive h5 img,
|
||||
section.olive h6 img {
|
||||
display: block;
|
||||
margin: auto; }
|
||||
section.olive pre > code {
|
||||
background: #4e4f53; }
|
||||
section.olive header,
|
||||
section.olive footer,
|
||||
section.olive section::after,
|
||||
section.olive blockquote::before,
|
||||
section.olive blockquote::after {
|
||||
color: #676053; }
|
||||
section.olive table th,
|
||||
section.olive table td {
|
||||
border-color: #4e4f53; }
|
||||
section.olive table thead th {
|
||||
background: #4e4f53;
|
||||
color: #CCA551; }
|
||||
section.olive table tbody > tr:nth-child(odd) td,
|
||||
section.olive table tbody > tr:nth-child(odd) th {
|
||||
background: rgba(78, 79, 83, 0.1); }
|
||||
section.lead {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: center; }
|
||||
section.lead h1,
|
||||
section.lead h2,
|
||||
section.lead h3,
|
||||
section.lead h4,
|
||||
section.lead h5,
|
||||
section.lead h6 {
|
||||
text-align: center; }
|
||||
section.lead h1 svg[data-marp-fitting='svg'],
|
||||
section.lead h2 svg[data-marp-fitting='svg'],
|
||||
section.lead h3 svg[data-marp-fitting='svg'],
|
||||
section.lead h4 svg[data-marp-fitting='svg'],
|
||||
section.lead h5 svg[data-marp-fitting='svg'],
|
||||
section.lead h6 svg[data-marp-fitting='svg'] {
|
||||
--preserve-aspect-ratio: xMidYMid meet; }
|
||||
section.lead p {
|
||||
text-align: center; }
|
||||
section.lead blockquote > h1,
|
||||
section.lead blockquote > h2,
|
||||
section.lead blockquote > h3,
|
||||
section.lead blockquote > h4,
|
||||
section.lead blockquote > h5,
|
||||
section.lead blockquote > h6,
|
||||
section.lead blockquote > p {
|
||||
text-align: left; }
|
||||
section.lead blockquote svg[data-marp-fitting='svg']:not([data-marp-fitting-math]) {
|
||||
--preserve-aspect-ratio: xMinYMin meet; }
|
||||
section.lead ul > li > p,
|
||||
section.lead ol > li > p {
|
||||
text-align: left; }
|
||||
section.lead table {
|
||||
margin-left: auto;
|
||||
margin-right: auto; }
|
||||
section.lead-invert {
|
||||
color: #4e4f53;
|
||||
background-color: #FFF2DD;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: center; }
|
||||
section.lead-invert a,
|
||||
section.lead-invert mark {
|
||||
color: #CCA551; }
|
||||
section.lead-invert code {
|
||||
background: #71706f;
|
||||
color: #FFF2DD; }
|
||||
section.lead-invert h1 strong,
|
||||
section.lead-invert h2 strong,
|
||||
section.lead-invert h3 strong,
|
||||
section.lead-invert h4 strong,
|
||||
section.lead-invert h5 strong,
|
||||
section.lead-invert h6 strong {
|
||||
color: #CCA551; }
|
||||
section.lead-invert h1 img,
|
||||
section.lead-invert h2 img,
|
||||
section.lead-invert h3 img,
|
||||
section.lead-invert h4 img,
|
||||
section.lead-invert h5 img,
|
||||
section.lead-invert h6 img {
|
||||
display: block;
|
||||
margin: auto; }
|
||||
section.lead-invert pre > code {
|
||||
background: #4e4f53; }
|
||||
section.lead-invert header,
|
||||
section.lead-invert footer,
|
||||
section.lead-invert section::after,
|
||||
section.lead-invert blockquote::before,
|
||||
section.lead-invert blockquote::after {
|
||||
color: #71706f; }
|
||||
section.lead-invert table th,
|
||||
section.lead-invert table td {
|
||||
border-color: #4e4f53; }
|
||||
section.lead-invert table thead th {
|
||||
background: #4e4f53;
|
||||
color: #FFF2DD; }
|
||||
section.lead-invert table tbody > tr:nth-child(odd) td,
|
||||
section.lead-invert table tbody > tr:nth-child(odd) th {
|
||||
background: rgba(78, 79, 83, 0.1); }
|
||||
section.lead-invert h1,
|
||||
section.lead-invert h2,
|
||||
section.lead-invert h3,
|
||||
section.lead-invert h4,
|
||||
section.lead-invert h5,
|
||||
section.lead-invert h6 {
|
||||
text-align: center; }
|
||||
section.lead-invert h1 svg[data-marp-fitting='svg'],
|
||||
section.lead-invert h2 svg[data-marp-fitting='svg'],
|
||||
section.lead-invert h3 svg[data-marp-fitting='svg'],
|
||||
section.lead-invert h4 svg[data-marp-fitting='svg'],
|
||||
section.lead-invert h5 svg[data-marp-fitting='svg'],
|
||||
section.lead-invert h6 svg[data-marp-fitting='svg'] {
|
||||
--preserve-aspect-ratio: xMidYMid meet; }
|
||||
section.lead-invert p {
|
||||
text-align: center; }
|
||||
section.lead-invert blockquote > h1,
|
||||
section.lead-invert blockquote > h2,
|
||||
section.lead-invert blockquote > h3,
|
||||
section.lead-invert blockquote > h4,
|
||||
section.lead-invert blockquote > h5,
|
||||
section.lead-invert blockquote > h6,
|
||||
section.lead-invert blockquote > p {
|
||||
text-align: left; }
|
||||
section.lead-invert blockquote svg[data-marp-fitting='svg']:not([data-marp-fitting-math]) {
|
||||
--preserve-aspect-ratio: xMinYMin meet; }
|
||||
section.lead-invert ul > li > p,
|
||||
section.lead-invert ol > li > p {
|
||||
text-align: left; }
|
||||
section.lead-invert table {
|
||||
margin-left: auto;
|
||||
margin-right: auto; }
|
||||
section.lead-olive {
|
||||
color: #4e4f53;
|
||||
background-color: #CCA551;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: center; }
|
||||
section.lead-olive a,
|
||||
section.lead-olive mark {
|
||||
color: #FFF2DD; }
|
||||
section.lead-olive code {
|
||||
background: #676053;
|
||||
color: #CCA551; }
|
||||
section.lead-olive h1 strong,
|
||||
section.lead-olive h2 strong,
|
||||
section.lead-olive h3 strong,
|
||||
section.lead-olive h4 strong,
|
||||
section.lead-olive h5 strong,
|
||||
section.lead-olive h6 strong {
|
||||
color: #FFF2DD; }
|
||||
section.lead-olive h1 img,
|
||||
section.lead-olive h2 img,
|
||||
section.lead-olive h3 img,
|
||||
section.lead-olive h4 img,
|
||||
section.lead-olive h5 img,
|
||||
section.lead-olive h6 img {
|
||||
display: block;
|
||||
margin: auto; }
|
||||
section.lead-olive pre > code {
|
||||
background: #4e4f53; }
|
||||
section.lead-olive header,
|
||||
section.lead-olive footer,
|
||||
section.lead-olive section::after,
|
||||
section.lead-olive blockquote::before,
|
||||
section.lead-olive blockquote::after {
|
||||
color: #676053; }
|
||||
section.lead-olive table th,
|
||||
section.lead-olive table td {
|
||||
border-color: #4e4f53; }
|
||||
section.lead-olive table thead th {
|
||||
background: #4e4f53;
|
||||
color: #CCA551; }
|
||||
section.lead-olive table tbody > tr:nth-child(odd) td,
|
||||
section.lead-olive table tbody > tr:nth-child(odd) th {
|
||||
background: rgba(78, 79, 83, 0.1); }
|
||||
section.lead-olive h1,
|
||||
section.lead-olive h2,
|
||||
section.lead-olive h3,
|
||||
section.lead-olive h4,
|
||||
section.lead-olive h5,
|
||||
section.lead-olive h6 {
|
||||
text-align: center; }
|
||||
section.lead-olive h1 svg[data-marp-fitting='svg'],
|
||||
section.lead-olive h2 svg[data-marp-fitting='svg'],
|
||||
section.lead-olive h3 svg[data-marp-fitting='svg'],
|
||||
section.lead-olive h4 svg[data-marp-fitting='svg'],
|
||||
section.lead-olive h5 svg[data-marp-fitting='svg'],
|
||||
section.lead-olive h6 svg[data-marp-fitting='svg'] {
|
||||
--preserve-aspect-ratio: xMidYMid meet; }
|
||||
section.lead-olive p {
|
||||
text-align: center; }
|
||||
section.lead-olive blockquote > h1,
|
||||
section.lead-olive blockquote > h2,
|
||||
section.lead-olive blockquote > h3,
|
||||
section.lead-olive blockquote > h4,
|
||||
section.lead-olive blockquote > h5,
|
||||
section.lead-olive blockquote > h6,
|
||||
section.lead-olive blockquote > p {
|
||||
text-align: left; }
|
||||
section.lead-olive blockquote svg[data-marp-fitting='svg']:not([data-marp-fitting-math]) {
|
||||
--preserve-aspect-ratio: xMinYMin meet; }
|
||||
section.lead-olive ul > li > p,
|
||||
section.lead-olive ol > li > p {
|
||||
text-align: left; }
|
||||
section.lead-olive table {
|
||||
margin-left: auto;
|
||||
margin-right: auto; }
|
||||
|
||||
header,
|
||||
footer,
|
||||
section::after {
|
||||
box-sizing: border-box;
|
||||
font-size: 66%;
|
||||
height: 70px;
|
||||
line-height: 50px;
|
||||
overflow: hidden;
|
||||
padding: 10px 25px;
|
||||
position: absolute; }
|
||||
|
||||
header {
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0; }
|
||||
|
||||
footer {
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0; }
|
||||
|
||||
section::after {
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
font-size: 80%; }
|
||||
Reference in New Issue
Block a user