Marp
Put markdown.md into the created folder.
---\nmarp: true\ntheme: your-theme\n---\n\n# Hello, world!Hit F1 and run \"Preferences: Open Workspace Settings\".
\nSearch \"Themes\" and find out Markdown > Marp: Themes.
Add a path theme.css. Now ready to use \"your-theme\".
Open markdown.md, and confirm the root of current workspace is the working folder you've made.
Open Markdown preview from the this icon:
\n
Check whether showing \"Hello, world!\" with red text.
\n
Congratulations, you've created your first CSS theme!
\nExcerice
\nTry changing color: red; to color: blue; in theme.css and save it.
\n
The most part of Marp theme is plain CSS so you have to dive into CSS from here. If you are a beginner, strongly recommend to learn CSS first. https://web.dev/learn/css/
","upvoteCount":17,"url":"https://github.com/orgs/marp-team/discussions/115#discussioncomment-759004"}}}
-
|
I want to create a theme, but after I read the documentation, it's still not clear how to create a theme and use it. Can you give me an example of a quick start? I am using marp via vscode plugin. The documents I read were https://marpit.marp.app/theme-css |
Beta Was this translation helpful? Give feedback.
Replies: 5 comments 16 replies
-
|
https://marpit.marp.app/theme-css is only describing about the thinking of theme CSS syntax. To use your own theme actually, you have to register the custom CSS theme in your VS Code workspace: https://github.com/marp-team/marp-vscode#use-custom-theme-css-shield Tutorial
ExcericeTry changing The most part of Marp theme is plain CSS so you have to dive into CSS from here. If you are a beginner, strongly recommend to learn CSS first. https://web.dev/learn/css/ |
Beta Was this translation helpful? Give feedback.
-
|
use this way: |
Beta Was this translation helpful? Give feedback.
-
|
@MingChen2020 Your theme is located in {
"markdown.marp.themes": [
"./PPT/themes/theme.css"
]
} |
Beta Was this translation helpful? Give feedback.
-
|
Thank you so much for your patience!!! It works!!! I do appreciate this project help write slides more easily! |
Beta Was this translation helpful? Give feedback.
-
|
Thanks @yhatt for your answer. |
Beta Was this translation helpful? Give feedback.
-
It's also working if set the local file path(s) to user json. However, Marp team recommends to use the workspace setting, to avoid unnecessary file request across unrelated workspaces.
Whenever using themes of inside the workspace, Markdown documents should belong to the same workspace too. VS Code has been designed as prevented loading external CSS from the out of the workspace.
If allowed fetching from the outside, it means opening the door of nightmare, such as fetching |
Beta Was this translation helpful? Give feedback.
-
|
the path in 6 should be a full path: |
Beta Was this translation helpful? Give feedback.
-
|
It's wrong. The path should be a relative path from an opening workspace because Marp for VS Code only can open CSS resources located in the current workspace due to the security reason. This behavior matches as VS Code setting for the styles of default Markdown preview: microsoft/vscode#45260 |
Beta Was this translation helpful? Give feedback.
-
|
But direcory path is invalid in my vscode env, while the full path one works. Why? |
Beta Was this translation helpful? Give feedback.
-
|
the working vscode settings generated by vscode: {
"markdown.marp.themes": [
"/home/eric/marp/theme.css"
]
} |
Beta Was this translation helpful? Give feedback.
-
|
Which version of Marp for VS Code extension are you using? If you were using old version of the extension, recommend to update to the latest stable v1.5.2. |
Beta Was this translation helpful? Give feedback.
-
|
using this one now. {
"markdown.marp.themes": [
"./theme.css"
]
} |
Beta Was this translation helpful? Give feedback.
-
|
how can I configure marp to use a custom theme without using vscode? |
Beta Was this translation helpful? Give feedback.
-
Beta Was this translation helpful? Give feedback.
-
|
what about hosting the theme on a git repository and reference the raw file via its HTTP path? |
Beta Was this translation helpful? Give feedback.
-
|
this one works better, thanks |
Beta Was this translation helpful? Give feedback.
-
|
Thanks for the detailed solution mentioned above. "markdown.marp.themes" : [
${workspaceFolder}/theme.css
], |
Beta Was this translation helpful? Give feedback.
-
|
The specification of If you want to use the theme located in the workspace folder, just using |
Beta Was this translation helpful? Give feedback.
https://marpit.marp.app/theme-css is only describing about the thinking of theme CSS syntax. To use your own theme actually, you have to register the custom CSS theme in your VS Code workspace: https://github.com/marp-team/marp-vscode#use-custom-theme-css-shield
Tutorial
Create a folder for working and open the folder in VS Code.
Put
theme.cssinto the created folder. It makes a theme named "your-theme".Put
markdown.mdinto the created folder.Hit F1 and run "Preferences: Open Workspace Settings".
Search "Themes" and find out
Markdown > Marp: Themes.Add a p…