harasou/index.html

## index.html
<DOCTYPE html>
<html>
  <head>
    <title>Presentation</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <style type="text/css">
      @import url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz);
      @import url(http://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic);
      @import url(http://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700,400italic);

      body { font-family: 'Droid Serif'; }
      h1, h2, h3 {
        font-family: 'Yanone Kaffeesatz';
        font-weight: normal;
      }
      .remark-code, .remark-inline-code { font-family: 'Ubuntu Mono'; }
      /* Two-column layout */
      .left-column {
        color: #777;
        width: 50%;
        float: left;
      }
      .left-column h2:last-of-type, .left-column h3:last-child {
      color: #000;
      }
      .right-column {
        width: 45%;
        float: right;
      }
    </style>
  </head>
  <body>
    <script src="http://gnab.github.io/remark/downloads/remark-latest.min.js" type="text/javascript">
    </script>
    <script type="text/javascript">
      var query = window.location.search.substring(1);
      var slideshow = remark.create({
        sourceUrl: (query ? query : "sample.md")
      });
    </script>
  </body>
</html>

## sample.md

      
    Raw
  

              sample.md
            
          
    slide 1

１ページ目

slide 2

２ページ目
--
１行追記
--
１行追記
--
１行を

分割して

追記

slide 3

デフォルトの表示位置(左上)

class: middle center
slide 4

真ん中に表示

class: bottom right
slide 5

右下に表示

slide 6

.left[
テキスト左寄せ
.left[テキスト左寄せ]

]
.center[
テキスト中央
]
.right[テキスト右寄せ]

.center[テキスト中央]

.right[テキスト右寄せ]


layout: true
.center[ title ]

slide 7

layout: ture にすると、そのページの内容(ここでは、title の文字列)が layout: false にするまでずっと表示される。
---
layout: true
.center[ title ]
---

# slide 7
 :
---

# slide 8
 :
---
layout: false
# slide 9
 :
---


slide 8

ここでも表示される
---
layout: true
.center[ title ]
---

# slide 7
 :
---

# slide 8
 :
---
layout: false
# slide 9
 :
---


layout: false
slide 9

ここで layout: false にしたので、title の文字列が表示されなくなる。
---
layout: true
.center[ title ]
---

# slide 7
 :
---

# slide 8
 :
---
layout: false
# slide 9
 :
---


slide 10

コードのハイライトもOK
#include <stdio.h>
int main(void){
    printf("Hello World!\n");
    return 0;
}

slide 11

css を記載すれば、２列表示も可能
.left-column[
左列

#include <stdio.h>
int main(void){
    printf("Hello World!\n");
    return 0;
}
]
.right-column[
右列

aaa bbb
]

slide 10

.center[
おしまい
]
	<DOCTYPE html>
	<html>
	<head>
	<title>Presentation</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	<style type="text/css">
	@import url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz);
	@import url(http://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic);
	@import url(http://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700,400italic);

	body { font-family: 'Droid Serif'; }
	h1, h2, h3 {
	font-family: 'Yanone Kaffeesatz';
	font-weight: normal;
	}
	.remark-code, .remark-inline-code { font-family: 'Ubuntu Mono'; }
	/* Two-column layout */
	.left-column {
	color: #777;
	width: 50%;
	float: left;
	}
	.left-column h2:last-of-type, .left-column h3:last-child {
	color: #000;
	}
	.right-column {
	width: 45%;
	float: right;
	}
	</style>
	</head>
	<body>
	<script src="http://gnab.github.io/remark/downloads/remark-latest.min.js" type="text/javascript">
	</script>
	<script type="text/javascript">
	var query = window.location.search.substring(1);
	var slideshow = remark.create({
	sourceUrl: (query ? query : "sample.md")
	});
	</script>
	</body>
	</html>