MadoRemixのスライドサンプル

MadoRemix ［ Mado with REVEAL.JS ］思いつきと勢いで手抜きプレゼンツールができたｗまだまだ課題は山積みだが…
(;^^A あせあせ Presented by Daru 本日はよろしくです！

は Beautiful interface な markdown Editor です Mado ChromeApp ですよ！

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

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

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

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

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

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

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

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

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

引用（Blockquote）です見出し & 強調 1. 数字リスト 2. 数字リスト引用（Blockquote）の中にはMarkdown要素を入れられます引用のネストです
引用のネストのネストです間に一行空けないとネストのままです

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

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

ぷちコード表示 @ 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)); },

ぷちコード表示 @ 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>

ぷちコード表示 @ 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は"？" ご活用ください

web image contents ようやくCSP回避… (^^ゞ ↓Markdownの書式 ![Gyazosample](https://i.gyazo.com/*****.png) ChromeApp固有のCSPはちょっと苦労しました

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

小技 REVEAL.JSの背景色Transitionデモ Background Transitions ↓Markdownの書式 (htmlコメント形式で記述する) Di erent background transitions
are available via the backgroundTransition option. This one's called "zoom".

小技 REVEAL.JSの背景機能デモ Image Backgrounds (web image contents) とりあえずCSP回避できたヽ(｀▽´)/ ↓Markdownの書式
(htmlコメント形式で記述する)  ちなみに、 Gyazoって便利なサービスですよね！

小技 REVEAL.JSの背景機能デモ Tiled Backgrounds (web image contents) とりあえずCSP回避できたヽ(｀▽´)/ ↓Markdownの書式
(htmlコメント形式で記述する)

小技 htmlタグによる2Column表現 Column 1 Content Mado Chrome App Javascript Column
2 Content REVEAL.JS Web Flamework Javascript Markdown でプレゼンはどこいったのｗ

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

小技 htmlタグによるFont指定表示テスト 2 'monospace' Font assignment. 'sans-serif' Font assignment.
'serif' Font assignment. 'Jaldi' Font assignment. 'Arvo' Font assignment.

小技 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は文字が少ないからあまり太らないの (うらやましいですよね！)

KT Xを組込んでみた円周率をπ とする半径r の球の体積V は V = KaTeXは文法に厳しいっぽいがコンパクトで組込み易い場合により"\"(esc-char)で暫定回避をお願い…
(^^;) A E 3 4πr3 基本は$で数式を囲むとインライン数式モードとなり、⽂章中に数式を表⽰できるディスプレイ数式モードで表⽰したいときは$$で囲む

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 あせあせ

皆様、 MadoRemix をよろしくです (^^) おまけがありますよ

おまけビデオバックグラウンド YouTubeの直埋込みはダメみたい…？？ .webm .mp4 はOK Video Backgrounds  しばしご歓談を

MadoRemixのスライドサンプル

MadoRemixのスライドサンプル

Daru

More Decks by Daru

Other Decks in Programming

Featured

Transcript

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

は Beautiful interface な markdown Editor です Mado ChromeApp ですよ！

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

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

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

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

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

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

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

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

引用（Blockquote）です見出し & 強調 1. 数字リスト 2. 数字リスト引用（Blockquote）の中にはMarkdown要素を入れられます引用のネストです

Table(表) Left align Right align Center align This This This

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

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

ぷちコード表示 @ html (はみ出し分はホイールスクロールもできるよ！) <!doctypehtml> <html> <head> <metacharset= utf-8 >

ぷちコード表示 @ css (highlightは設定で幾つか選べるよ！) /MadoRemixcustomizebyDaru/ @font-face{ font-family: Myrica ;

web image contents ようやくCSP回避… (^^ゞ ↓Markdownの書式 ![Gyazosample](https://i.gyazo.com/*****.png) ChromeApp固有のCSPはちょっと苦労しました

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

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

小技 REVEAL.JSの背景機能デモ Image Backgrounds (web image contents) とりあえずCSP回避できたヽ(｀▽´)/ ↓Markdownの書式

小技 REVEAL.JSの背景機能デモ Tiled Backgrounds (web image contents) とりあえずCSP回避できたヽ(｀▽´)/ ↓Markdownの書式

小技 htmlタグによる2Column表現 Column 1 Content Mado Chrome App Javascript Column

小技 htmlタグによるFont指定表示テスト 1 NotoSansMonoCJKJP フォントを指定してます NotoSansCJKJPフォントを指定してます Noto Serif CJK

小技 htmlタグによるFont指定表示テスト 2 'monospace' Font assignment. 'sans-serif' Font assignment.

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

KT Xを組込んでみた円周率をπ とする半径r の球の体積V は V = KaTeXは文法に厳しいっぽいがコンパクトで組込み易い場合により"\"(esc-char)で暫定回避をお願い…

KT X表示テスト f(x) = x ⼒= 質量× 加速度 A =

皆様、 MadoRemix をよろしくです (^^) おまけがありますよ

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