theme | size | paginate | marp |
---|---|---|---|
gaia |
4k |
true |
true |
From Marp Presenter to Visual Studio Code (🆚)
My cruise ⛵️ to increase my productivity.
<style> img[alt~="center"] { display: block; margin-left: auto; margin-right: auto; margin-bottom: 10; margin-top: -55px; } </style>
I was looking for a tool to quickly ⏩ write my presentation.
🔗 https://github.com/marp-team/marp
![bg right:33% 50%](https://avatars1.githubusercontent.com/u/20685754?v=4)
- I remember Marp as a Markdown presenter for R Studio code.
- Marp is available on
- 📺 Marp CLI: Convert Markdown into HTML, PDF, PPTX, and images
- 🆚 Marp for VS Code: Live-preview your deck while editting
- 🌐 Web client
- 🗄 React render
- 🗄 Vue render
- and more...
-
📝 Write slide deck with plain Markdown (CommonMark)
-
🏭 Built on Marpit framework: A brand-new skinny framework for creating slide deck
-
⚙️ Marp Core: Easy to start using the core engine and built-in themes via npm
-
Following content ©️ Gist marp.md with some changing.
-
What are Gists? We will see 🙈
- Spoiler
⚠️ ➡️ Gists are a great way to share your work.
- Spoiler
Split pages by horizontal ruler (e.g. ---
). It's very simple.
# Slide 1
foobar
---
# Slide 2
foobar
Marp has extended syntax called "Directives" to support creating beautiful slides.
Insert at front-matter to the top of Markdown:
---
theme: default
---
or HTML comment anywhere:
<!-- theme: default -->
https://marpit.marp.app/directives
theme
: Choose a themesize
: Choose the slide size from16:9
and4:3
(except Marpit framework)headingDivider
: instruct to divide slide pages at before of specified heading levels
⬇️ 🙄 is YAML syntax.
---
theme: gaia
size: 4:3
---
Marp can use built-in themes in Marp Core:
default
,gaia
, anduncover
.
These are the setting value per slide.
paginate
: show pagination by settrue
.header
: specify the contents for header.footer
: specify the contents for footer.class
: set HTML class for current slide.color
: set text color.backgroundColor
: Set background color.
Local directives apply to ** the current page and all the following pages**.
They can apply to a page by using underscore prefix such as _class
.
This page is using the invert color scheme defined in Marp built-in theme.
<!-- _class: invert -->
You can resize image size and apply filters through the keywords: width
(w
), height
(h
), and filter CSS keywords.
![width:100px height:100px](image.png)
![blur sepia:50%](filters.png)
Please refer resizing image syntax and a list of CSS filters.
You can set a background image for a slide by using bg
keyword.
![bg opacity](https://yhatt-marp-cli-example.netlify.com/assets/gradient.jpg)
Multiple backgrounds (Marpit's advanced backgrounds)
Marp can use multiple background images.
![bg blur:3px](https://fakeimg.pl/800x600/fff/ccc/?text=A)
![bg blur:3px](https://fakeimg.pl/800x600/eee/ccc/?text=B)
![bg blur:3px](https://fakeimg.pl/800x600/ddd/ccc/?text=C)
It can also change alignment direction by including vertical
keyword.
Marp can use Deckset style split background(s).
Make a space for background by bg
+ left
/ right
keywords.
![bg right](image.jpg)
Marp will parse a list with asterisk marker as the fragmented list for appearing contents one by one. (Only for exported HTML by Marp CLI / Marp for VS Code)
# Bullet list
- One
- Two
- Three
---
# Fragmented list
* One
* Two
* Three
Math typesetting (only for Marp Core)
KaTeX math typesetting such as
$ax^2+bc+c$
$$I_{xx}=\int\int_Ry^2f(x,y)\cdot{}dydx$$
🙄 Yes it will work also in 🆚
Auto-scaling (only for Marp Core)
Several built-in themes are supported auto-scaling for code blocks and math typesettings.
Too long code block will be scaled-down automatically. ------------>
Too long code block will be scaled-down automatically. ------------------------>
Too long code block will be scaled-down automatically. ------------------------------------------------>
Auto-fitting header (only for Marp Core)
## <!--fit--> Auto-fitting header (only for Marp Core)
Marp uses <section>
as the container of each slide. And others are same as styling for plain Markdown. The customized theme can use in Marp CLI and Marp for VS Code.
/* @theme your-theme */
@import 'default';
section {/* Specify slide size */
width: 960px; height: 720px;
}
h1 {
font-size: 30px; color: #c33;
}
<style>
tag in Markdown will work in the context of theme CSS.
---
theme: default
---
<style>
section {
background: yellow;
}
</style>
Re-painted yellow background, ha-ha.
You can also add custom styling by class like
section.custom-class { ... }
.
If you want one-shot styling for current page, you can use <style scoped>
.
<style scoped>
a {
color: green;
}
</style>
![Green link!](https://marp.app/)
# Enjoy writing slides! :v: <!--fit-->
# Now it's time to setup code 🆚 <!--fit-->
or including images in your file, you can use Base64 coding with image ref 🔗 Medium Story.
Here's an image:
![][image_ref_a32ff4ads]
More text here...
...
[image_ref_a32ff4ads]: data:image/png;base64,iVBORw0KGgoAAAANSUhEke02C1MyA29UWKgPA...RS12D==
- Marp ➕ Multiplexer = Marple
- 🛑 I didn't find a way to easily synchonize slides among a set of client.
- My fun 😍 solution:
<style> img[alt~="center"] { display: block; margin-left: auto; margin-right: auto; margin-bottom: 10; margin-top: -55px; } </style>
#include <stdio.h>
#include <mpi.h>
#include <string.h>
static const char NERD[5] = {0xF0, 0x9F, 0xA4, 0x93, '\0'};
static const char WORLD[5] = {0xF0, 0x9F, 0x8C, 0x8D, '\0'};
static const char SLEEP[5] = { 0xF0, 0x9F, 0x98, 0xB4, '\0'};
#define 🤓 {MPI_Init(NULL, NULL); int world_rank; MPI_Comm_rank(MPI_COMM_WORLD, &world_rank); printf("I am the %s with rank %d ",NERD, world_rank);}
#define 🌍 ({int s; MPI_Comm_size(MPI_COMM_WORLD, &s); printf("of MPI %s of size %d ", WORLD, s);});
#define 😴 {printf("Goodbye %s\n",SLEEP);MPI_Finalize();return 0;}
#define P(x) printf(x)
#define I P("\a"); // \a means alert (beep or flash)
#define am P("\a");
#define the P("\a");
#define with P("\a");
#define rank P("\a");
#define size P("\a");
#define 🤔 {P("\a");};
#define of P("\a");
#define MPI P("\a");
#define Goodbye P("\a");
int main()
{
I am the 🤓 with rank 🤔 of MPI 🌍 of size 🤔 Goodbye 😴;
}
What does the following code do? .... sure it's works!
- What are Gists? We will see 🙈
- Spoiler
⚠️ ➡️ Gists are a great way to share your work.
- Spoiler
With gists, you can share single files, parts of files, and full applications with other people. Directories can't be shared. You can access your gists at
http(s)://[hostname]/gist
, orhttp(s)://gist.[hostname]
if subdomains are enabled. ✅ GitHub Help
- Write Text Anonymously
- Track Changes like a Wiki (support versioning on files)
- Publish Gists in Rich Text
- Gist as a Writing Platform (WordPress, Medium, and many others support Gist)
- Host Single Page Websites on Gist (using bl.ocks.org)
- or http://htmlpreview.github.io/ for GitHub.
- Maintain a Task List
- [x] Pick the flowers
- [ ] Call John 9303032332
- [x] Cancel cable subscription
- [ ] Book the flight tickets
- Gist as a Web Clipper (Chrome plugin)
- Embed Gists in Web Pages
<script src="https://gist.github.com/spagnuolocarmine/60a5f8c065f9577c25a6717681bd84d1.js"></script>
- Measure the Traffic with Google Analytics and GABecon
![Analytics](https://ga-beacon.appspot.com/UA-XXXXX-X/gist-id?pixel)
- 🤚 share this presentation source
- Manage Gists from the Desktop
- We will use 🆚
- However, there many gists client:
- We start creating a new Gist file for this presentation.
- Install and Configure: Gist Extension 🆙
>Create New Gist
>Enter the file name
>Enter the description
>Setting access Public or Private
- Gists wiht UI.
- GistPad 0.0.66 🆙
- 2️⃣ Using Marp presenter .
- 😱 We also need Markdown 3️⃣.
- 🆚 helps us:
- Marketplace
- Also integrated in the 🆚 control bar (on the left)
It is Microsoft product built with Electron 🤔
- 👍 the same company of a famous operating system Windows.
- 😠 does not provide Bourne Again Shell, but a Power something.
- Today ➡️ Windows Subsystem for Linux (WSL) is a compatibility layer for running Linux binary executables.
- Maybe, you should know it also for the famous blue mantra screen 💙.
- Electron
-
Build cross-platform desktop apps with JavaScript, HTML, and CSS
- Made by GitHub with more than 1000 application on the official store.
-
- Microsoft bought GitHub Inc. on June 4, 2018, for $7.5 billion in stock.
- It just erased all that I said!
- I ❤️ the Redmond' Micro-Soft Company
- Add
task.json
to.vscode
folder.
{
"version": "2.0.0",
"tasks": [
{
"type": "shell",
"label": "MPI compile active file (mpicc)",
"command": "docker run -it --mount src=\"$(pwd)\",
target=/home,type=bind
spagnuolocarmine/docker-mpi:latest mpicc -g /home/${fileBasename} -o /home/${fileBasenameNoExtension}",
"presentation": {
"reveal": "always"
},
"problemMatcher": [
"$eslint-compact"
]
},
...
{
"type": "shell",
"label": "MPI run active file (mpicc && mpirun)",
"command": "docker run -it --mount src=\"$(pwd)\",
target=/home,type=bind
spagnuolocarmine/docker-mpi:latest mpirun --allow-run-as-root -np 4 /home/${fileBasenameNoExtension}",
"dependsOn": [
"MPI compile active file (mpicc)"
],
"presentation": {
"reveal": "always"
},
"problemMatcher": [
"$eslint-compact"
]
}
]
}
-
Or use Setting Sync for VS Code Insiders
- Get the latest release each day!
- At time of this presentation the following release hash for OSX:
fb4223ebdd2e09a7ebf7a1db6b31718252ff2f5cc27f87e206fc8075362bdf1d
Use your GitHub account token and Gist.
- Settings File - Keybinding File
- Launch File - Snippets Folder - Workspaces Folder
- VSCode Extensions & Extensions Configurations
- Configuration: will be opened automatically on code start.
- Upload key: Shift + Alt (Option) + U
- Download key: Shift + Alt (Option) + U
-
I use 🦇 Dracula
-
Available also for Atom, Alfred, Emacs, Highlight.js, Hyper, iTerm, JetBrains, Pygments, Slack, Sublime Text, TextMate, Terminal.app, Vim, Xcode, Zsh
- Add Table of content 👉
- Markdown Shortcuts
>Markdown All in One: Create Table of Contents
- Add custom Badge 🔥 Badgen
- Automatically rename paired HTML/XML tag, same as Visual Studio IDE does. auto-rename-tag v0.1.2
- Launch a local development server with live reload feature for static & dynamic pages. LiveServer v5.6.1
- Visualize css colors. vscode-colorize v0.8.16
- Align your code by colon(:), assignment(=,+=,-=,*=,/=) and arrow(=>). It has additional support for comma-first coding style and trailing comment.
- better-align v1.1.6
- The Better Comments extension will help you create more human-friendly comments in your code.
- better-comments v2.0.5
- Sometimes you forget to review the TODOs you've added while coding before you publish the code to production.
- vscode-todo-highlight v1.0.4
- This extension allows matching brackets to be identified with colours.
- bracket-pair-colorizer-2 v0.0.29
- Support TOML file.
- better-toml v0.3.2
- A basic spell checker that works well with camelCase code.
- Not all language accept camelCase e.g. Julia.
- code-spell-checker v1.8.0
- ErrorLens enhances Visual Studio Code's inbuilt diagnostic highlighting.
- errorlens v3.1.1
- Load your last commit message into git commit box, or let you choose from last n messages.
- git-last-commit-message v1.8.0
- GitLens supercharges the Git capabilities built into 🆚
- gitlens v10.2.1
- This extension lets you use any remote machine with a SSH server as your development environment.
- remote-ssh v0.51.0
- This extension lets you use any remote machine with a SSH server as your development environment.
- remote-ssh-edit v0.51.0
- This extension complements the Remote - SSH extension with syntax colorization, keyword intellisense, and simple snippets when editing SSH configuration files.
- The Docker extension makes it easy to build, manage and deploy containerized applications from Visual Studio Code.
- vscode-docker v1.1.0
- Azure Functions extension to quickly create, debug, manage, and deploy serverless apps directly.
- vscode-azurefunctions v1.22.0
- vscode-azure-account v0.1.9
- vscode-azureappservice v0.16.01
- An extension that allows you to interact with certain services of Amazon Web Services (AWS).
- aws-toolkit-vscode v1.8.0
- An extension aiming at providing core features for LaTeX typesetting.
- LaTeX-Workshop v8.9.0
- Discord presence for 🆚
- discord-vscode v3.14.0
- Add suggestions and autocomplete for emoji to 🆚
- emojisense v0.6.1
- Sort lines of text in 🆚
- sort-lines v1.9.0
- Display CPU frequency, usage, memory consumption, and battery percentage remaining within the 🆚 status bar.
- resmon v1.0.7
- Quickly translate text right in your code 🚀.
- vscode-google-translate v1.4.7
- Also Grammarly is available (unofficial).
- Autocompletes filenames.
- PathIntellisense v1.4.2
- Vim emulator.
- VSCodeVim/Vim v1.13.2
- Quickly save screenshots of your code.
- Copy screenshots to your clipboard.
- Draw over your screenshot.
- Upload your image online.
- screenify-vscode 0.0.4
- Polacode — Polaroid for your code 📸
- polacode 0.3.4
- This extension integrates Draw.io 📝
- vscode-drawio 0.3.0
- Show your upcoming events from your Google calendar in a tree view inside. It also allows simple events to be created, modified, and deleted.
- calendar 0.0.13
- Supercharging your Data Science workflow by previewing Jupyter Notebook
- vscode-nbpreviewer 1.1.2
- Allow you to collaboratively edit and debug with others in real time. Preview
⚠️ - 💓 vsliveshare v1.0.2048
- 💔 vsliveshare-audio v0.1.85
- 💓 ➕ 💔 vsliveshare-pack v0.3.4
- Allow you to join one or more "spaces", and begin discovering, communicating and collaborating with other developers in real-time.
- vsls-contrib/spaces v0.1.48
- Join space: isislab
- Furnish your as your 🏠
- 🍎 OS: iTerm2 + Oh My Zsh + Solarized color scheme + Source Code Pro Powerline + Font Awesome + Powerlevel10k
- popular 🐚 ➕➕
- Do not soil the windows with mouseprints!
- 🍎 OS: Amethyst Tiling window manager
- 🐧 OS: i3 improved tiling wm ➡️ 💓
>Marp: Export Slide Deck...
>myworkingspace.html
$git commit -m
"Here! My presentation is finished. Questions?"
$git push origin master
echo 'Thank your attention!'
Thank your attention!