MadoRemixのスライドサンプル

5e0e0e72623b5fdfbaf05de32b4e2e99?s=47 Daru
December 15, 2017

 MadoRemixのスライドサンプル

MadoRemix (markdown Editor with simple presentation Slide @ ChromeApp) に同梱しているスライドサンプルのPDF出力です。
こんな感じのスライドが Markdown + html で書けます。

Chrome OS Chrome App
Chromebook Chromebox
開発 自作 コーディング Javascript
マークダウン エディタ Markdown Editor reveal.js

5e0e0e72623b5fdfbaf05de32b4e2e99?s=128

Daru

December 15, 2017
Tweet

Transcript

  1. MadoRemix [ Mado with REVEAL.JS ] 思いつきと勢いで 手抜きプレゼンツールができた w まだまだ課題は山積みだが…

    (;^^A あせあせ Presented by Daru 本日は よろしく です!
  2. は Beautiful interface な markdown Editor です Mado ChromeApp ですよ!

  3. は htmlで書ける プレゼン Slide tool です REVEAL.JS Markdownの サポートも あるよ!

  4. そんな二人が思いつきで創聖合体してしまった !! ときには 勢いが大事!

  5. MadoRemix 爆 誕 !! ヒーローさんの 正体を尋ねるのは 禁則事項です♡

  6. 本題にもどって… Markdown でプレゼン Presented by Daru 基本的な表現を 例示します 記述の仕方は Editor側を見てね

  7. MadoRemix ではフォントサイズ h1 ~ h6 をご用意しました h1 h2 h3 h4

    h5 h6
  8. MadoRemix では REVEAL.JS の基本設定を以下のようにしてます 空白行間に---と記入すると水平方向のスライド区切り 空白行間に>>>と記入すると縦方向のスライド区切り 文章の配置は中央配置(縦横) こんな感じで書いていきます 次のページ →

  9. 見出し 1. 数字付きのリスト 2. 番号はどうでもいい 次はサブページ 下に遷移できます ↓

  10. 見出し サブページ 1 前ページから垂直に下に遷移する 垂直遷移には補助的な説明を 普通のリスト 簡潔にね

  11. 見出し サブページ 2 どんどん書いていく 1. 番号付きリスト 1. 二階層め・番号付きリスト1 2. 二階層め・番号付きリスト2

    2. 番号付きリスト2 1. 二階層め・番号付きリスト1 1. 三階層め・番号付きリスト1 2. 三階層め・番号付きリスト2 1. 四階層め・番号付きリスト1 2. 二階層め・番号付きリスト2 3. 番号付きリスト3
  12. 引用(Blockquote)です 見出し & 強調 1. 数字リスト 2. 数字リスト 引用(Blockquote)の中にはMarkdown要素を入れられます 引用のネストです

    引用のネストのネストです 間に一行空けないとネストのままです
  13. Table(表) Left align Right align Center align This This This

    column column column will will will be be be left right center aligned aligned aligned
  14. htmlタグによる補助 ※使いすぎるとBugにハマることも…(^_^;) これは sample です。 ↑空行を入れたい。htmlタグ (sampleは<p></p>タグの間に全角space) Colorテスト htmlタグを直接記述することで色を変えます。 使いすぎに

    注意です… ハマりますよw
  15. ぷちコード表示 @ js setSyntax:function(){ chrome.storage.local.get( gfm ,$.proxy(function(mado){ if(mado.gfm!==undefined){ marked.setOptions({ //Githubっぽいmd形式にするか否か

    gfm:mado.gfm, highlight:function(code,lang){ returnhljs.highlightAuto(code,lang).value; } }); }else{ chrome.storage.local.set({ gfm :true}); } this.update(); },this)); },
  16. ぷちコード表示 @ html (はみ出し分はホイールスクロールもできるよ!) <!doctypehtml> <html> <head> <metacharset= utf-8 >

    <linkrel= stylesheet href= /css/reveal.css > <title>MadoRemixSlide</title> </head> <body> <divclass= reveal > </div>  <span>Theme: <selectid= Theme > <option>MadoRemix</option> <option>Rounded</option> <option>Setoru</option> <option>black</option> <option>white</option> <option>league</option>
  17. ぷちコード表示 @ css (highlightは設定で幾つか選べるよ!) /*MadoRemixcustomizebyDaru*/  @font-face{ font-family: Myrica ;

    src:url( /fonts/Myrica.woff2 )format( woff2 ); }  .hljs{ display:block; overflow-x:auto; padding:0.5em; background:#ededef; }  #html-conversion{ /*Typography*/ font-size:1em; line-height:1.35em; user-select:text; SLIDEの設定は"T" ShortCutのHelpは"?" ご活用ください
  18. web image contents ようやくCSP回避… (^^ゞ ↓Markdownの書式 ![Gyazosample](https://i.gyazo.com/*****.png) ChromeApp固有のCSPは ちょっと苦労しました

  19. local image contents… CSPがきつい… (T^T) ダウンロードフォルダ SD Card 牛歩な開発なのでしばしお待ちを… m(__)m

    おしおきだべ〜
  20. 小技 REVEAL.JSの背景色Transitionデモ Background Transitions ↓Markdownの書式 (htmlコメント形式で記述する) Di erent background transitions

    are available via the backgroundTransition option. This one's called "zoom". <!--.slide:data-transition= slide data-background= #4d7e65  data-background-transition= zoom -->
  21. 小技 REVEAL.JSの背景機能デモ Image Backgrounds (web image contents) とりあえずCSP回避できた ヽ(`▽´)/ ↓Markdownの書式

    (htmlコメント形式で記述する) <!--.slide:data-background= https://i.gyazo.com/*****.png --> ちなみに、 Gyazoって 便利なサービス ですよね!
  22. 小技 REVEAL.JSの背景機能デモ Tiled Backgrounds (web image contents) とりあえずCSP回避できた ヽ(`▽´)/ ↓Markdownの書式

    (htmlコメント形式で記述する) <!--.slide:data-background= https://i.gyazo.com/*****.png  data-background-repeat= repeat data-background-size= 200px -->
  23. 小技 htmlタグによる2Column表現 Column 1 Content Mado Chrome App Javascript Column

    2 Content REVEAL.JS Web Flamework Javascript Markdown で プレゼンは どこいったのw
  24. 小技 htmlタグによるFont指定 表示テスト 1 NotoSansMonoCJKJP フォントを指定してます NotoSansCJKJPフォントを指定してます Noto Serif CJK

    JP フォントを指定してます 'Myrica' フォントを指定してます 'MyricaP' フォントを指定してます 'Rounded Mplus 1c' フォントを指定してます 'SetoFontSP' フォントを指定してます "Chrome OS" は、OSへの Font追加ができないから アプリに同梱してます (ダイエットが大変!)
  25. 小技 htmlタグによるFont指定 表示テスト 2 'monospace' Font assignment. 'sans-serif' Font assignment.

    'serif' Font assignment. 'Jaldi' Font assignment. 'Arvo' Font assignment.
  26. 小技 htmlタグによるFont指定 表示テスト 3 'Lato' Font assignment. 'Montserrat' Font assignment.

    'News Cycle' Font assignment. 'Quicksand' Font assignment. 'Open Sans' Font assignment. 'Ubuntu' Font assignment. 'League Gothic' Font assignment. 英語Fontは 文字が少ないから あまり太らないの (うらやましいですよね!)
  27. KT Xを組込んでみた 円周率をπ とする半径r の球の体積V は V = KaTeXは文法に厳しいっぽいがコンパクトで組込み易い 場合により"\"(esc-char)で暫定回避をお願い…

    (^^;) A E 3 4πr3 基本は$で数式を囲むとインライン数式モードとなり、⽂章中に数式を表⽰できる ディスプレイ数式モードで表⽰したいときは$$で囲む
  28. KT X表示テスト f(x) = x ⼒= 質量× 加速度 A =

    A E 2 f(x) = x + 2x + 1 2 = (x + 1)2 ⎝ ⎜ ⎜ ⎛ a 11 a 21 ⋮ a m1 a 12 a 22 ⋮ a m2 … … ⋱ … a 1n a 2n ⋮ a mn ⎠ ⎟ ⎟ ⎞ まだ細々とした 課題が… (;^^A あせあせ
  29. 皆様、 MadoRemix をよろしくです (^^) おまけが ありますよ

  30. おまけ ビデオバックグラウンド YouTubeの直埋込みはダメみたい…?? .webm .mp4 はOK Video Backgrounds <!--.slide:data-background-video= https://****video.webm

    --> しばし ご歓談を
  31. None
  32. None
  33. None