theme
フロントエンド
Marp

Marpで自分のテーマを作成するときの変更点

概要

marpがとても便利で、オリジナルのテーマでも作ってみようと思い立ちましたので、じゃあどこを変更すれば良いのかと言ったことをメモします。
(2017/08/06現在)

変更点

テーマ用SCSSファイルの追加

marp/sass/themesフォルダの中に新しいテーマ用のscssファイルを作成する。
今回はお試しでgaiaのファイルをコピーしてoriginal.scssとしてみた。

スクリーンショット 2017-08-06 18.56.07.png

mds_main_menu.coffeeへ記述を追加

marp/coffee/classes/mds_main_menu.coffeeの中にあるthemesの中に自分が作成するテーマ名を追加する。今回はテーマ名がoriginalなのでそれを追加した。

mds_main_menu.coffee
          themes: [
            {
              label: '&Default'
              enabled: @window?
              type: if @window? then 'radio' else 'normal'
              checked: !@states?.theme || @states.theme == 'default'
              click: => @window.mdsWindow.send 'setTheme', 'default' unless @window.mdsWindow.freeze
            }
            {
              label: '&Gaia'
              enabled: @window?
              type: if @window? then 'radio' else 'normal'
              checked: @states.theme == 'gaia'
              click: => @window.mdsWindow.send 'setTheme', 'gaia' unless @window.mdsWindow.freeze
            }
            // ここから
            {
              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
            }
            // ここまでを追加する
          ]

@window.mdsWindow.freezeの項目を追加する。

mds_md_setting.coffeeへ記述を追加

marp/coffee/classes/mds_md_setting.coffee内にある@transformers(26行目のあたり)の下に記述されているbasenameに自分が追加するテーマの名前を追加する。追加は以下の通り行なった。

変更前のmds_md_setting.coffee
    theme: (v) ->
      basename = path.basename(v)
      return if basename in ['default', 'gaia'] then 
変更後のmds_md_setting.coffee
    theme: (v) ->
      basename = path.basename(v)
      return if basename in ['default', 'gaia', 'original'] then 

結果

これらを行なった後にドキュメントにある通りにmarpを起動させてみます。
(インストール方法などは公式のGitHubをご覧ください)

スクリーンショット 2017-08-06 18.50.33.png

marp様万歳。originalテーマができました。

(今回はgaiaをコピーしたものなのでまんまgaiaですが・・・)
他の方の利用に耐えうる個人的なテーマを作成できたならプルリクなど飛ばしてみたいと思っていますが・・・実現するかはわかりません。
こちらからは以上です。