masakielastic/index.html

## index.html
<!doctype html>
<html lang="ja">

	<head>
		<meta charset="utf-8">

		<title>reveal.js で pdf のスライドをつくる</title>

		<meta name="description" content="reveal.js で pdf のスライドをつくる手順を示したスライドです。">
		<meta name="author" content="Masaki Kagaya">

		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">

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

		<!-- Code syntax highlighting -->
		<link rel="stylesheet" href="lib/css/zenburn.css">

		<!-- Printing and PDF exports -->
		<script>
			var link = document.createElement( 'link' );
			link.rel = 'stylesheet';
			link.type = 'text/css';
			link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
			document.getElementsByTagName( 'head' )[0].appendChild( link );
		</script>

		<!--[if lt IE 9]>
		<script src="lib/js/html5shiv.js"></script>
		<![endif]-->
	</head>

	<body>


		<div class="reveal">
            <div class="slides">
                <section data-markdown="slide.md"
                         data-separator="^\n\n\n"
                         data-vertical="^\n\n"
                         data-charset="utf-8">
                </section>
            </div>
		</div>

		<script src="lib/js/head.min.js"></script>
		<script src="js/reveal.js"></script>

		<script>

			// Full list of configuration options available at:
			// https://github.com/hakimel/reveal.js#configuration
			Reveal.initialize({
				controls: true,
				progress: true,
				history: true,
				center: true,

				transition: 'slide', // none/fade/slide/convex/concave/zoom

				// Optional reveal.js plugins
				dependencies: [
					{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
					{ src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
					{ src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
					{ src: 'plugin/highlight/highlight.js', async: true, condition: function() { return !!document.querySelector( 'pre code' ); }, callback: function() { hljs.initHighlightingOnLoad(); } },
					{ src: 'plugin/zoom-js/zoom.js', async: true },
					{ src: 'plugin/notes/notes.js', async: true },
					{ src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
				]
			});

		</script>

	</body>
</html>

## slide.md

      
    Raw
  

              slide.md
            
          
    reveal.js で pdf のスライドをつくる

Masaki Kagaya (2015.3.24)
ダウンロードと展開

https://github.com/hakimel/reveal.js からダウンロードして展開します。Apache や Nginx を起動しているのであれば、ブラウザーからのアクセスが許可されているディレクトリで展開します。
index.html の修正

<div class="reveal">
  <div class="slides">
    <section data-markdown="slide.md"  
             data-separator="^\n\n\n"
             data-vertical="^\n\n"
             data-charset="utf-8">
    </section>
  </div>
</div>
Markdown の例

コンテンツの後の改行数は data-separator 属性で指定した数に合わせます。
# タイトル

## 見出し

コンテンツ
プログラムコードの構文をハイライトする

dependencies: [
    ...
    {
        src: 'plugin/highlight/highlight.js', 
        async: true,
        callback: function() { hljs.initHighlightingOnLoad(); }
     },
]
スクリプト言語による HTTP サーバーの起動

Apache や Nginx が利用できない場合、index.html のあるディレクトリで
コマンドプロンプトやターミナルから HTTP サーバーを起動させ、http://localhost:3000/#/ にブラウザーでアクセスします。
HTTP サーバーを起動させるコマンドの例

Ruby 1.9.2+
ruby -run -e httpd . -p 3000
Python 3
python3 -m http.server 3000
Python 2
python -m SimpleHTTPServer 3000
PHP 5.4+
php -S localhost:3000

pdf の生成

Google Chrome で http://localhost/?print-pdf#/ にアクセスして
「ファイル -> 印刷 -> PDF に保存」。余白は「なし」にします。
このスライドのソースコード

https://gist.github.com/masakielastic/9d15ee8f46488183f8c0 から入手できます。
	<!doctype html>
	<html lang="ja">

	<head>
	<meta charset="utf-8">

	<title>reveal.js で pdf のスライドをつくる</title>

	<meta name="description" content="reveal.js で pdf のスライドをつくる手順を示したスライドです。">
	<meta name="author" content="Masaki Kagaya">

	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">

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

	<!-- Code syntax highlighting -->
	<link rel="stylesheet" href="lib/css/zenburn.css">

	<!-- Printing and PDF exports -->
	<script>
	var link = document.createElement( 'link' );
	link.rel = 'stylesheet';
	link.type = 'text/css';
	link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
	document.getElementsByTagName( 'head' )[0].appendChild( link );
	</script>

	<!--[if lt IE 9]>
	<script src="lib/js/html5shiv.js"></script>
	<![endif]-->
	</head>

	<body>


	<div class="reveal">
	<div class="slides">
	<section data-markdown="slide.md"
	data-separator="^\n\n\n"
	data-vertical="^\n\n"
	data-charset="utf-8">
	</section>
	</div>
	</div>

	<script src="lib/js/head.min.js"></script>
	<script src="js/reveal.js"></script>

	<script>

	// Full list of configuration options available at:
	// https://github.com/hakimel/reveal.js#configuration
	Reveal.initialize({
	controls: true,
	progress: true,
	history: true,
	center: true,

	transition: 'slide', // none/fade/slide/convex/concave/zoom

	// Optional reveal.js plugins
	dependencies: [
	{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
	{ src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
	{ src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
	{ src: 'plugin/highlight/highlight.js', async: true, condition: function() { return !!document.querySelector( 'pre code' ); }, callback: function() { hljs.initHighlightingOnLoad(); } },
	{ src: 'plugin/zoom-js/zoom.js', async: true },
	{ src: 'plugin/notes/notes.js', async: true },
	{ src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
	]
	});

	</script>

	</body>
	</html>