Marp
How to build a Custom-Theme
(workaround)
2016-09-11
eurie Inc. Takahiro Ikeuchi
What is Marp?
2
Marp is an awesome presentation writer
https://yhatt.github.io/marp/
3
Features of Marp
MarkdownSyntax support
Cross-platform (Electron Application)
Export slides as PDF
Of course these slides ...
About to create a original theme
5
Themes of Marp
Marp has two theme les. (default, gaia)
Theme les are written in Sass.
But, Marp could not apply user-style...
Workaround to use your theme
1. Get the source code from Github.
2. Initialize the project.
3. Create a Sass le in a theme...
Initialize the project
$ npm install -g appdmg
# cd $YOUR_PROJECT_DIRECTORY
$ npm install
Create and edit a Sass le
$ tree...
Modify two co eescript les (1)
https://github.com/yhatt/marp/blob/master/co
ee/classes/mds_main_menu.co ee#L269
Add the fo...
Modify two co eescript les (2)
https://github.com/yhatt/marp/blob/master/co
ee/classes/mds_md_setting.co ee#L32
Push 'orig...
Finally, build the project.
npm start
You can choose "Original" theme.
11
Possibilities of custom-theme
12
Everything come true.
Yes, only on iPhone Marp.
13
14
Complex layouts
If you really want to create some complex layouts
on slides. You may write HTML directly.
<div style="text...
<!-- template: cover -->
16
Hello Marp,
You don’t have to stay awake
all-night to make slides any more.
17
Author
Takahiro Ikeuchi @iktakahiro
Company / Community
eurie Inc. Founder & CEO
PyData.Tokyo Organizer
Specialties (or ju...
Prochain SlideShare
Chargement dans…5
×

How to build a custom theme for Marp

277 413 vues

Publié le

Marp (https://yhatt.github.io/marp/) is one of the presentation writer. It supports Markdown syntax. Preset themes are fine, but Marp could not apply user-styles. So I investigated how to build a custom-theme.

Publié dans : Technologie
  • Soyez le premier à commenter

How to build a custom theme for Marp

  1. 1. Marp How to build a Custom-Theme (workaround) 2016-09-11 eurie Inc. Takahiro Ikeuchi
  2. 2. What is Marp? 2
  3. 3. Marp is an awesome presentation writer https://yhatt.github.io/marp/ 3
  4. 4. Features of Marp MarkdownSyntax support Cross-platform (Electron Application) Export slides as PDF Of course these slides were written using Marp. 4
  5. 5. About to create a original theme 5
  6. 6. Themes of Marp Marp has two theme les. (default, gaia) Theme les are written in Sass. But, Marp could not apply user-style. https://github.com/yhatt/marp/issues/1 6
  7. 7. Workaround to use your theme 1. Get the source code from Github. 2. Initialize the project. 3. Create a Sass le in a theme directory. 4. Modify some co eescript les. 5. Build the project. Please note that my approach is just a workaround. 7
  8. 8. Initialize the project $ npm install -g appdmg # cd $YOUR_PROJECT_DIRECTORY $ npm install Create and edit a Sass le $ tree sass/themes/ sass/themes/ ├── _markdown.sass ├── _slide.sass ├── default.sass └── gaia.sass $ cp sass/themes/gaia.sass sass/themes/original.sass 8
  9. 9. Modify two co eescript les (1) https://github.com/yhatt/marp/blob/master/co ee/classes/mds_main_menu.co ee#L269 Add the following object. { label: '&Original' enabled: @window? type: if @window? then 'radio' else 'normal' checked: @states.theme == 'original' click: => @window.mdsWindow.send 'setTheme', 'original' unless @window.mdsWindow.freeze } 9
  10. 10. Modify two co eescript les (2) https://github.com/yhatt/marp/blob/master/co ee/classes/mds_md_setting.co ee#L32 Push 'original' to the array. return if basename in ['default', 'gaia', 'original'] then "css/themes/#{basename}.css" else null 10
  11. 11. Finally, build the project. npm start You can choose "Original" theme. 11
  12. 12. Possibilities of custom-theme 12
  13. 13. Everything come true. Yes, only on iPhone Marp. 13
  14. 14. 14
  15. 15. Complex layouts If you really want to create some complex layouts on slides. You may write HTML directly. <div style="text-align:right"> He liked to like people, therefore people liked him. </div> 15
  16. 16. <!-- template: cover --> 16
  17. 17. Hello Marp, You don’t have to stay awake all-night to make slides any more. 17
  18. 18. Author Takahiro Ikeuchi @iktakahiro Company / Community eurie Inc. Founder & CEO PyData.Tokyo Organizer Specialties (or just a dabbler :-D Go lang, Python, React.js, TypeScript Cloud Infrastructure, UI Design etc... 18

×