Upgrade to Pro — share decks privately, control downloads, hide ads and more …

MadoRemixのスライドサンプル

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

Daru

December 15, 2017
Tweet

More Decks by Daru

Other Decks in Programming

Transcript

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

    2. 番号付きリスト2 1. 二階層め・番号付きリスト1 1. 三階層め・番号付きリスト1 2. 三階層め・番号付きリスト2 1. 四階層め・番号付きリスト1 2. 二階層め・番号付きリスト2 3. 番号付きリスト3
  2. 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
  3. ぷちコード表示 @ 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)); },
  4. ぷちコード表示 @ 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>
  5. ぷちコード表示 @ 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は"?" ご活用ください
  6. 小技 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 -->
  7. 小技 REVEAL.JSの背景機能デモ Image Backgrounds (web image contents) とりあえずCSP回避できた ヽ(`▽´)/ ↓Markdownの書式

    (htmlコメント形式で記述する) <!--.slide:data-background= https://i.gyazo.com/*****.png --> ちなみに、 Gyazoって 便利なサービス ですよね!
  8. 小技 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 -->
  9. 小技 htmlタグによる2Column表現 Column 1 Content Mado Chrome App Javascript Column

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

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

    'serif' Font assignment. 'Jaldi' Font assignment. 'Arvo' Font assignment.
  12. 小技 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は 文字が少ないから あまり太らないの (うらやましいですよね!)
  13. KT Xを組込んでみた 円周率をπ とする半径r の球の体積V は V = KaTeXは文法に厳しいっぽいがコンパクトで組込み易い 場合により"\"(esc-char)で暫定回避をお願い…

    (^^;) A E 3 4πr3 基本は$で数式を囲むとインライン数式モードとなり、⽂章中に数式を表⽰できる ディスプレイ数式モードで表⽰したいときは$$で囲む
  14. 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 あせあせ