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 were written using Marp.

4

About to create a original theme

5

Themes of MarpMarp 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

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 aworkaround.

7

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

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

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

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 layoutsIf you really want to create some complex layoutson slides. You may write HTML directly.

<div style="text-align:right"> He liked to like people, therefore people liked him.</div>

15

<!-- template: cover -->

16

Hello Marp,

You don’t have to stay awake all-night to make slides any more.

17

AuthorTakahiro 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