ブログズミ: Markdown

ラベル Markdown の投稿を表示しています。すべての投稿を表示

2017年1月16日月曜日

reveal.js + Markdown のちょっとしたメモ - その４

「ブログズミ: reveal.js + Markdown のちょっとしたメモ」の４回目です。
今回は、昨年12月に行われた第８回大阪Jenkins勉強会でしゃべったときに、reveal.js でスライドを作成したのでそのときやったことのメモです。
参考：ブログズミ: 「第８回大阪Jenkins勉強会」で発表してきた

その３は、

Zoom
fragment を使う
レイアウトのカスタマイズ

その２は、

HTML 変換後の表示
PDF に出力
テーマの作成
背景付きテーマ
Notes を使う
App::revealup

その１は、

表題が大文字表記にならないようにする
空行を入れる
タグを直接記述する
公開する

を紹介しました。

背景を変える

すべてのページの背景を変える場合は、テーマで指定するのが良いと思います。
方法はその２の背景付きテーマを参照してください。

一部のページの背景を変える場合は、セクション（section）の属性で指定をします。

---
<!-- .element data-background="#000000" -->

data-separator(---),data-separator-vertical(--) の直後に .element コメントで設定します。

背景に指定できるのは、画像だけでなく単色、ビデオも指定できます。

スライドするごとに背景がずれていくようなことをしたい場合は、Parallax Background を利用することになります。
こちらは、Reveal.initialize で設定することになります。
やり方は、Github のドキュメントを参考にしてください。

変えた背景に合わせてフォントカラーを変える

さて、背景を変えることができましたが、明るい色のテーマのスライドに黒背景のページを挟む場合に、背景だけ変えるとフォントカラーはそのままで見えなくなってしまいます。

そこで、背景に合わせてフォントカラーも変えたいと思います。
それには、 reveal.js 3.0.0 から追加されたで「has-light-background/has-dark-background」を利用します。
これは背景色を部分的に変更した場合に、デフォルトより明るくなれば「has-light-background」が、暗くなれば「has-dark-background」クラスが section に付与される機能です。
これを使って、以下のような css を用意すれば背景色に合わせてフォントカラーを変更できます。
(reveal.js 付属のテーマで対応済みのものもあります。white.css, black.css)

.reveal .has-dark-background {
  color: #CCCCCC;
}/

例：第８回大阪Jenkins勉強会発表資料

埋め込み

作ったスライドをどこか別のところ（ブログなど）に埋め込みする方法です。
単純に iframe タグを使うだけで問題なさそうでした。
上でスライド表示しているのも iframe でやっています。

最後に

もうほとんど Markdown は関係ありませんでしたね…すみません。
まぁでも、また機会があったら「その５」を書きたいと思います。
ではでは。

2015年3月23日月曜日

reveal.js + Markdown のちょっとしたメモ - その３

「ブログズミ: reveal.js + Markdown のちょっとしたメモ」
の３回目です。

前回は、

HTML 変換後の表示
PDF に出力
テーマの作成
背景付きテーマ
Notes を使う
App::revealup

前々回は、

表題が大文字表記にならないようにする
空行を入れる
タグを直接記述する
公開する

を紹介しました。

今回は、fragment とレイアウトのカスタマイズに使えるテクニックを紹介します。

Zoom

発表をしていると、一部分をズームしたくなることがあります。
reveal.js には Zoom.js というのがあり、それを使うことで Alt + クリックでズームができるようになります。

fragment を使う

Markdown で記述した場合に、fragment はどうしたら良いのか。
答えはこちら→ https://github.com/hakimel/reveal.js/#element-attributes

fragment にしたい要素に下記のようにコメント書くだけです。

<!-- .element: class="fragment" -->

この記法は他の用途にも使えそうですね。

fragment がどういったものかはこちらをご覧ください→ http://lab.hakim.se/reveal-js/#/fragments

レイアウトのカスタマイズ

一部分だけレイアウトを変えたい場合、例えば直接スタイル指定をしたり、特定のクラス指定をすると思います。
それを reveal.js + Markdown の場合に、どうしているか自分のやり方を紹介します。

fragment を使うで紹介したコメント記法を利用して、以下のように class 指定を追加します。

<!-- .element: class="sample" -->

これで、任意の要素だけレイアウトを変えることができます。
また、 class 指定でなく直接スタイル指定しても OK です。

<!-- .element: style="font-color: red;" -->

今回は以上です。

2015年2月25日水曜日

reveal.js + Markdown のちょっとしたメモ - その２

「ブログズミ: reveal.js + Markdown のちょっとしたメモ」
の２回目です。

前回は、

表題が大文字表記にならないようにする
空行を入れる
タグを直接記述する
公開する

の４つを紹介しました。

また少し備忘録がたまったので紹介していきます。

HTML 変換後の表示

Markdown でスライド記述していると、最終的に出力される HTML がどのように記述されているか知りたくなる場合があります。その場合は、ブックマークレットを使うと便利です。
ブックマークレットが何かはこのへん参考にしてください - ブックマークレット - Wikipedia

Chrome で説明します。
ブックマークマネージャーを開き、ページを追加します。
適当な名前をつけて、URL に下記を入力してくさい。

javascript:document.write('<xmp>'+document.documentElement.innerHTML+'<\/xmp>');

以上で設定終わりです。

スライドを Chrome で開き、先ほどのブックマークを開きます。
すると、最終的な HTML テキストが表示されます。

F5 で更新するともとのビューに戻ります。

PDF に出力

URL の後ろに ?print-pdf を付け足してブラウザ(Chrome)で開きます。
PDF保存用のレイアウトで表示される（ここでは崩れて見える）ので、印刷から「PDFに保存」を選択（ここで正しく表示される）し出力します。

テーマの作成

<link rel="stylesheet" href="reveal.js/css/theme/black.css" id="theme">

テーマは上記のように reveal.js/css/theme にあるものを選択するか、URL の末尾に ?theme=black (3.0 からできなくなった？)などのように指定する方法があります。
こちらのテーマですが、自分好みのものを作ることもできます。

作り方は簡単です。ベースとなるテーマの css をコピペして、あとは好きな様に書き換えるだけです。
色変えとかフォント変えたりとかくらいなら簡単にできます。

Boost.勉強会の LT で発表したときに、テーマを書いたので紹介しておきます。
ブログズミ: Boost.勉強会#16 大阪に行ってきました
https://github.com/srz-zumix/slide/blob/gh-pages/reveal.js/css/theme/zumix.css

※ reveal.js 3.0.0 にバージョンアップしたので当時から変更がかかってます。

背景付きテーマ

スライドの背景にちょっと絵が出ている。そんなテーマを作ってみたいと思います。

これが正攻法なのかわかりませんが、div.slide-background が各スライドに挿入されるのでそこで下記のように背景画像を設定します。

.reveal div.slide-background {
  background-image: url("../../../images/icon_reasonably_small.png");
  background-repeat: no-repeat !important;
  background-size: 5%;
  background-position: right 20px top 20px;
}

位置や大きさ、アルファなど自由に設定することができます。

アイコンを右上に出すサンプル↓
http://srz-zumix.github.io/slide/iuwandbox-bg/#/

Notes を使う

Notes をローカル環境で見るためにはローカルサーバーを立てる必要があります。
ローカルサーバーを立てる手順はこちらに記載されています。
https://github.com/hakimel/reveal.js/#full-setup

Node.js のインストール
Grunt のインストール
cd reveal.js
npm install
grunt serve

でローカルサーバーが起動します。
ルートディレクトリを変更したい場合は、reveal.js/Gruntfile.js の以下の base 部分を変更してください。

connect: {
   server: {
    options: {
     port: port,
     base: '.'
    }
   }
  },

ローカルサーバーを起動したら、ブラウザで localhost:8000 にアクセスしてください。（デフォルトポートは 8000）
スライドが表示されたら、's' キーを押します。
すると、以下のようにノートが表示されます。

※ 3.0.0 からローカルサーバーを立てなくても Notes が使えるよになりました

App::revealup

もっと簡単にスライド書きたい！という人は、「App::revealup」を使ってみてはどうでしょう。
App::revealup は、面倒なサーバー立てやオリジナルテーマの作成などが簡単にできるようです。

一瞬でクールなスライドがつくれる「App::revealup」をリリースしました - ゆーすけべー日記

今回は以上です。また、ネタがたまったらブログに書きたいと思います。
それでは～

2014年9月29日月曜日

reveal.js + Markdown のちょっとしたメモ

reveal.js + Markdown でスライドを書くことが多いので、それ関係でちょっとしたことを備忘録として残しておく。

表題が大文字表記にならないようにする

表題が大文字に変換されてしまうのが嫌だったので対処してみました。

## Sample

これは sample です。

例えば上記の場合、デフォルト設定では以下のように表示されます。

これは、theme の css で表題のスタイルに text-transform: uppercase; があるためです。
これを無効にすれば良いので、theme css の指定の後に以下の記述を追記します。

<style type="text/css">
  .reveal h1,
  .reveal h2,
  .reveal h3,
  .reveal h4,
  .reveal h5,
  .reveal h6 {
    text-transform: none;
  }
</style>

これで大文字ではなく、書いたとおりに表示されます。

空行を入れる

## Sample

これは sample です。__
<!-- -->__
↑空行を入れたい。__

※わかりやすいようにスペースを "_" で表記してます。

改行をする場合、末尾にスペースを２つ入れるのですが、前方になんらかの文字が必要です。
なので、コメント + スペースとすることで空行を出力しています。

タグを直接記述する

こちらは以前にもブログに書きました。 Markdown でテキストカラーの変更
Markdown の記述中に html タグを含めてもなんら問題ありません。そのまま html に出力されます。
なので、Markdown で表現できないことも html で表現すれば OK です。

## テスト

タグを<span style="color:red">直接記述</span>することで<span style="color:blue">色</span>を変えます。

公開する

書いたスライドを公開するときは github pages が便利です。
github pages については割愛します。

GitHub Pagesホスティングサービス（ほぼ）完全活用ガイド | ゆっくりと…

手順としてはとっても簡単で、gh-pages ブランチを作って push するだけです。
例）
github: https://github.com/srz-zumix/slide
github pages: http://srz-zumix.github.io/slide/iuwandbox/#/

最後に

今回は以上です。
今後も reveal.js + Markdown でスライドを書くと思うので、また何かあったらブログに書こうと思います。

2014年7月29日火曜日

Markdown でテキストカラーの変更

最近、社内勉強会のスライド作成を Reveal.js + Markdown でやっているのですが、テキストカラーを部分的に変える方法ってないのかなーと思っていました。

方法はすごーく簡単なことでした。
タグを直接記述するだけです。

## テスト

タグを<span style="color:red">直接記述</span>することで<span style="color:blue">色</span>を変えます。

Markdown 記法に囚われて、タグが直接埋め込めることになかなか気づけませんでした。

登録: 投稿 (Atom)

ページ