Marp CSS theme to do A4 presentations. Dark Mode, using Uncover Theme from Marp, and Atom One Dark Theme for code highlighting.
The folder .vscode
and the Marp plugin are mandaory to make it work.
Assuming VS Code and Marp for VS Code are already installed:
- Clone this project
- Open this entire folder in VS Code
- Start writing your
.md
file using
You need to have the folder .vscode
+ settings.json
function notes() {
mkdir "$1" && cd "$1" && mkdir .vscode
wget -q "https://raw.githubusercontent.com/stanfrbd/A4-marp/main/.vscode/settings.json"
mv settings.json .vscode
echo "---" >> "$1".md
echo "marp: true" >> "$1".md
echo "theme: a4-dark" >> "$1".md
echo "paginate: true" >> "$1".md
echo "---" >> "$1".md
echo "" >> "$1".md
date=$(date)
echo "<!-- $date -->" >> "$1".md
echo "" >> "$1".md
echo "# $1" >> "$1".md
wget -q "https://raw.githubusercontent.com/stanfrbd/A4-marp/main/a4-light.css"
wget -q "https://raw.githubusercontent.com/stanfrbd/A4-marp/main/a4-dark.css"
wget -q "https://raw.githubusercontent.com/stanfrbd/A4-marp/main/atom-one-dark.css"
code .
}
Usage:
notes <project_name>
This will a create a foler
<project_name>
containing a file<project_name>.md
with the date inside.
This will also create the folder<project_name>/.vscode
and the custom A4 themes from this repo.
Put
---
marp: true
theme: a4-dark
paginate: true
---
at the beginning of the .md
file.
Put
---
marp: true
theme: a4-light
paginate: true
---
at the beginning of the .md
file.
Use the light theme and change this in your
a4-light.css
pre {
border-radius: .4em;
padding: 0.2em 0.5em;
line-height: 1.15;
overflow-x: auto;
/* background-color: #202228; */
padding: 0.6em;
word-break: break-all;
white-space: pre-wrap !important;
font-size: 94%;
border-style: solid;
border-width: 1px;
}
code {
font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
/* color: #abb2bf; */
color: black;
overflow-x: auto;
}