Marp for VS Code - 커스텀 테마 경로 설정

테마를 만들어도 어디를 경로를 넣어야 하는지 몰라서 못쓴다. 

키워드는 VSCode 의 Workspace 설정을 건드려야 한다는 것이었다.

 

Hit F1 and run "Preferences: Open Workspace Settings"

 

원본 글 : https://github.com/orgs/marp-team/discussions/115#discussioncomment-759004

How to create a theme? · marp-team · Discussion #115

 

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

1. Create a folder for working and open the folder in VS Code.
2. Put theme.css into the created folder. It makes a theme named "your-theme".
3.  
4. /* @theme your-theme */ @import 'default'; h1 { color: red; }
5. Put markdown.md into the created folder.

6. ---
   marp: true
   theme: your-theme
   ---
   
   # Hello, world!

    
7. Hit F1 and run "Preferences: Open Workspace Settings".
8. Search "Themes" and find out Markdown > Marp: Themes.
9. Add a path theme.css. Now ready to use "your-theme".
10. Open markdown.md, and confirm the root of current workspace is the working folder you've made.
11. Open Markdown preview from the this icon:

12. 

13. Check whether showing "Hello, world!" with red text.

14. 

15. Congratulations, you've created your first CSS theme!

Excerice

Try changing color: red; to color: blue; in theme.css and save it.