reveal.js를 사용하여 Markdown에서 슬라이드를 만들 때의 단계

16030 단어 reveal.jsMarkdown
사내 연구회나 LT 발표 등에서 발표 자료가 필요할 때 reveal.js + Markdown에서 만드는 것이 매우 편리하기 때문에 항상 자신이 사용하는 설정의 메모를 공개합니다 (초안으로 자고 있었기 때문에이 기회에 정리했습니다).

reveal.js



HTML을 사용하여 아름다운 프레젠테이션을 만들 수 있습니다.
설정에서 Markdown을 사용하여 슬라이드를 만들 수 있습니다.

설정 절차



GitHub에서 복제합니다.
$ git clone https://github.com/hakimel/reveal.js.git

폴더의 이름을 바꿉니다.
$ mv reveal.js sample-slide

index.html에 설정 추가 & Markdown을 사용할 수 있도록 다시 씁니다.

index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />

    <title>reveal.js</title>

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

    <!-- Theme used for syntax highlighting of code -->
    <link rel="stylesheet" href="lib/css/monokai.css" />
    <style type="text/css">
      .reveal h1,
      .reveal h2,
      .reveal h3,
      .reveal h4,
      .reveal h5,
      .reveal h6 {
        text-transform: none;
      }
    </style>

    <!-- 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>
  </head>
  <body>
    <div class="reveal">
      <div class="slides">
        <section
          data-markdown="index.md"
          data-separator="^\n---\n$"
          data-separator-vertical="^\n>>>\n$"
        ></section>
      </div>
    </div>

    <script src="js/reveal.js"></script>

    <script>
      // More info about config & dependencies:
      // - https://github.com/hakimel/reveal.js#configuration
      // - https://github.com/hakimel/reveal.js#dependencies
      Reveal.initialize({
        history: true,
        dependencies: [
          { src: "plugin/markdown/marked.js" },
          { src: "plugin/markdown/markdown.js" },
          { src: "plugin/notes/notes.js", async: true },
          { src: "plugin/highlight/highlight.js", async: true }
        ]
      });
    </script>
  </body>
</html>

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

그리고
<div class="reveal">
  <div class="slides">
    <section
      data-markdown="index.md"
      data-separator="^\n---\n$"
      data-separator-vertical="^\n>>>\n$"
    ></section>
  </div>
</div>

그리고
Reveal.initialize({
  history: true,
  dependencies: [
    { src: "plugin/markdown/marked.js" },
    { src: "plugin/markdown/markdown.js" },
    { src: "plugin/notes/notes.js", async: true },
    { src: "plugin/highlight/highlight.js", async: true }
  ]
});

의 history: true, 부분입니다.

첫 번째 변경에서는 헤더 요소의 영문자가 자동으로 대문자로 변경되는 설정을 비활성화합니다. 두 번째 변경 사항은 Markdown 파일을 다른 파일로 관리할 수 있는 설정과 페이지 구분 기호를 설정합니다. 셋째는 파일의 변경을 검지해 슬라이드의 갱신을 실시할 때에, 초기 설정이라면 제일 최초의 슬라이드로 돌아 버리기 때문에, 갱신시에도 현재의 위치를 ​​유지하도록(듯이) 설정하고 있습니다.

index.md를 준비해 슬라이드 내용을 만들어 가는데, 이것이라면 md 파일의 갱신을 자동적으로 반영해 주지 않기 때문에, live-server 라고 하는 라이브러리를 사용합니다.
$ cd sample-slide
$ yarn add -D live-server

package.json의 scripts를 다시 씁니다.

package.json
  ...
  "scripts": {
    "test": "grunt test",
    "start": "grunt serve",
    "build": "./node_modules/.bin/live-server" // 追加部分
  },
  ...

슬라이드 시작은
$ yarn install # 初回のみ
$ yarn build

로 할 수 있습니다. 브라우저에서 열리고 md 파일을 저장할 때 자동으로 반영되면 OK입니다.

발표시에는 브라우저 선택 상태에서 f 를 누르면 전체 화면에, 또 s 를 누르면 아래와 같은 발표자용 화면이 나옵니다.


index.md 의 예입니다.
## reveal.jsでスライド作り

Note:
タイトルスライド

---

<div style="display: flex; top: 90px;">
  <div style="margin-right: 50px;">
    <img style="border-radius: 10%;" src="./images/icon.jpg" width="200">
  </div>
  <div style="text-align: left;">
    <div>guri3</div>
    <div>HTMLとCSSでも書ける</div>
    <div>色々自由にいじれていいね</div>
  </div>
</div>

Note:
発表時の原稿とかはこんな風に書けるよ

---

コードスニペットも綺麗

``js // Qiitaの表示につき調整してます、本来は「```」です。
const a = 1;
const b = 2;

console.log(a + b);
// => 3
``

---

`>>>`で下方向にも移動できる

>>>

<b style="color: yellow">文字色</b>とか<b style="font-size: 120px;">文字サイズ</b>も自在

---

## ありがとうございました！

이런 느낌의 슬라이드가 됩니다.





마지막으로



reveal.js로 슬라이드를 만드는 이점으로 텍스트로 관리할 수 있기 때문에 슬라이드의 업데이트 차이를 보기 쉽거나 코드의 신택스 하이라이트를 깨끗이 표시할 수 있다는 점이 있습니다. 반대로 굳은 슬라이드를 만들고 싶을 때는 HTML과 CSS로 쓸 필요가 있기 때문에 불편할지도 모릅니다. 빨리 슬라이드를 만들고 싶을 때나 코드를 베이스로 설명하는 슬라이드를 만들고 싶을 때에는 매우 편리하므로, 꼭 사용해 보세요.
Django P5로 구축된 리테일 웹사이트 (2020-02-16)
Django P4로 구축된 리테일 웹사이트 (2020-02-10)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage