ruyshy

    • Reveal.js를 사용하면 GitHub 블로그에서도 마치 PowerPoint처럼 HTML 슬라이드를 만들 수 있습니다. 이 글에서는 Jekyll 환경에서 reveal.js를 이용해 슬라이드 프레젠테이션, 인터랙티브 발표용 페이지, Jekyll 커스텀 플러그인 구현 방법까지 단계별로 설명합니다.

    reveal.js 으로 슬라이드 만들기

    예시 슬라이드:

    Reveal.js 소개

    Jekyll 블로그에서 슬라이드 프레젠테이션을 할 수 있어요!

    두 번째 슬라이드

    이 슬라이드는 마크다운이 아니라 HTML 형식이에요.

    세 번째 슬라이드

    • 왼쪽/오른쪽 키로 이동
    • 터치도 지원
    • 커스터마이징 가능
    1 / 3

    /plugins/reveal_tag.rb 추가

    module Jekyll
    class RevealBlock < Liquid::Block
      @@counter = 0

      def initialize(tag_name, markup, tokens)
        super
        @params = {}

        markup.scan(/(\w+)=["']?(.*?)["']?(?= |$)/).each do |key, value|
          @params[key] = value.downcase
        end
      end

      def to_js_bool(val)
        return "true" if val == "true"
        return "false" if val == "false"
        "\"#{val}\""
      end

      def render(context)
        content = super
        @@counter += 1
        uid = "reveal#{@@counter}"
        slide_count = content.scan(/<section>/i).size

        js_options = {
          "embedded" => "true",
          "hash" => "false",
          "slideNumber" => "false",
          "center" => to_js_bool(@params["center"] || "false"),
          "controls" => to_js_bool(@params["controls"] || "true"),
          "loop" => to_js_bool(@params["loop"] || "false"),
          "transition" => "\"#{@params["transition"] || "slide"}\""
        }.map { |k, v| "#{k}: #{v}" }.join(",\n")

        <<~HTML
          <div class="reveal-embedded" id="#{uid}_container">
            <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@4/dist/reveal.css">
            <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@4/dist/theme/black.css">
            <style>
              ##{uid}_container .reveal {
                width: 100%;
                height: 400px;
                margin: 2em auto;
                overflow: hidden;
                position: relative;
              }
              ##{uid}_container .custom-slide-number {
                position: absolute;
                bottom: 10px;
                left: 50%;
                transform: translateX(-50%);
                z-index: 10;
                color: white;
                font-size: 0.9em;
                font-weight: bold;
              }
            </style>

            <div class="reveal" id="#{uid}">
              <div class="slides">
                #{content}
              </div>
              <div class="custom-slide-number" id="#{uid}_slide_number">1 / #{slide_count}</div>
            </div>

            <script src="https://cdn.jsdelivr.net/npm/reveal.js@4/dist/reveal.js"></script>
            <script>
              document.addEventListener('DOMContentLoaded', () => {
                const el = document.getElementById("#{uid}");
                if (!window._revealInstances) window._revealInstances = {};

                const deck = new Reveal(el, {
                  #{js_options}
                });

                deck.initialize().then(() => {
                  window._revealInstances["#{uid}"] = deck;

                  const indicator = document.getElementById("#{uid}_slide_number");
                  const total = #{slide_count};
                  deck.slide(0); // Always start at slide 0

                  const updateLabel = (index) => {
                    indicator.textContent = (index + 1) + " / " + total;
                  };

                  updateLabel(0);
                  deck.on("slidechanged", e => updateLabel(e.indexh));
                });
              });

              window.goToRevealSlide = function(id, index) {
                const instance = window._revealInstances?.[id];
                if (instance) instance.slide(index);
              };
            </script>
          </div>
        HTML
      end
    end
  end

  Liquid::Template.register_tag("reveal", Jekyll::RevealBlock)

    예시 코드

    {% reveal %}

<section>
<h2>Reveal.js 소개</h2>
<p>Jekyll 블로그에서 슬라이드 프레젠테이션을 할 수 있어요!</p>
</section>
<section>
<h2>두 번째 슬라이드</h2>
<p>이 슬라이드는 마크다운이 아니라 HTML 형식이에요.</p>
</section>
<section>
<h2>세 번째 슬라이드</h2>
  <ul>
    <li>왼쪽/오른쪽 키로 이동</li>
    <li>터치도 지원</li>
    <li>커스터마이징 가능</li>
  </ul>
</section>
{% endreveal %}

    홈페이지 레이아웃 프레젠테이션 슬라이드 만들기

    /_layouts/slide.html 추가

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>{{ page.title }}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/reveal.js@4/dist/reveal.css"
    />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/reveal.js@4/dist/theme/black.css"
      id="theme"
    />

    <style>
      body {
        margin: 0;
      }
      .reveal {
        font-size: 1.5rem;
      }
    </style>
  </head>
  <body>
    <div class="reveal">
      <div class="slides">{{ content }}</div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/reveal.js@4/dist/reveal.js"></script>
    <script>
      Reveal.initialize({
        hash: true,
        slideNumber: true,
        transition: "fade",
        loop: false,
      });

      Reveal.on("slidechanged", function (event) {
        const current = event.indexh;
        const total = Reveal.getTotalSlides();

        const isLastSlide = current === total - 1;
        const isManual = !Reveal.isAutoSliding();

        if (isLastSlide && isManual) {
          window.location.href = "/";
        }
      });
    </script>
  </body>
</html>


    해당 코드에 마지막 on 부분 코드에서 작업: 마지막 슬라이드에서 다음으로 넘길 시, 깃허브 블로그 홈 으로 자동으로 이동합니다.

    만약 기능을 제외하고싶다면 해당 코드를 지우시면 됩니다:

    Reveal.on('slidechanged', function(event) { const current = event.indexh; const
total = Reveal.getTotalSlides(); const isLastSlide = current === total - 1;
const isManual = !Reveal.isAutoSliding(); if (isLastSlide && isManual) {
window.location.href = "/"; } });

    저는 해당 코드를 local에서 사용하기 위해 해당 코드 파일을 다운 받아 해당 링크들을 파일로 대체 했습니다! https://cdn.jsdelivr.net/npm/reveal.js@4/dist/reveal.js https://cdn.jsdelivr.net/npm/reveal.js@4/dist/reveal.css https://cdn.jsdelivr.net/npm/reveal.js@4/dist/theme/black.css

    /_pages/example_slide.md

    ---
layout: slide
title: "프레젠테이션 슬라이드"
data: 2025-04-24
permalink: /example/slide/
---

<section>
  <h2>Reveal.js 소개</h2>
  <p>Jekyll 블로그에서 슬라이드 프레젠테이션을 할 수 있어요!</p>
</section>

<section>
  <h2>두 번째 슬라이드</h2>
  <p>이 슬라이드는 마크다운이 아니라 HTML 형식이에요.</p>
</section>

<section>
  <h2>세 번째 슬라이드</h2>
  <ul>
    <li>왼쪽/오른쪽 키로 이동</li>
    <li>터치도 지원</li>
    <li>커스터마이징 가능</li>
  </ul>
</section>

<section>
</section>

    슬라이드 예제 사이트 :

    https://ruyshy.github.io/example/slide/

    Reveal js 공식 홈페이지

    더 자세한 것을 알고 싶으면 공식 홈페이지에 방문하는 것을 추천합니다.

    Reveal 설정 가능한 옵션

    옵션명 설명 기본값
    controls 좌우 슬라이드 화살표 표시 true
    controlsTutorial 처음에 방향 화살표를 깜빡이며 튜토리얼 힌트 제공 true
    controlsLayout 화살표 위치: 'edges', 'bottom-right' 'bottom-right'
    controlsBackArrows 이전 화살표 표시 방식: 'faded', 'hidden', 'visible' 'faded'
    progress 슬라이드 하단 진행 바 표시 true
    slideNumber 슬라이드 번호 표시 (true, false, "h/v", "c/t" 등) false
    showSlideNumber 슬라이드 번호 표시 시점: "all", "print", "speaker" "all"
    hash 슬라이드 위치를 URL 해시로 반영 false
    hashOneBasedIndex 해시 기반 슬라이드 인덱스를 1부터 시작할지 여부 false
    respondToHashChanges URL 해시 변경 시 슬라이드도 바꿀지 여부 true
    jumpToSlide 슬라이드 점프 단축키 g 키 사용 여부 true
    history 슬라이드 변경 시 브라우저 history 갱신 false
    keyboard 키보드로 슬라이드 조작 가능 true
    keyboardCondition "focused" 설정 시, 포커스 있을 때만 키보드 작동 null
    disableLayout Reveal.js의 자동 레이아웃 끄기 false
    overview Esc 키로 전체 슬라이드 보기 모드 true
    center 슬라이드 내용을 수직 가운데 정렬 true
    touch 터치 스와이프 네비게이션 활성화 true
    loop 마지막 슬라이드 → 첫 슬라이드 루프 이동 false
    rtl 오른쪽→왼쪽 방향 슬라이드 전환 false
    navigationMode "default", "linear", "grid" 슬라이드 이동 모드 "default"
    shuffle 슬라이드 순서를 무작위로 섞기 false
    fragments <li class="fragment"> 등 조각 애니메이션 작동 true
    fragmentInURL URL에 fragment 위치 반영 여부 true
    embedded Reveal 슬라이드를 내부에 삽입할지 여부 false
    help ? 키로 단축키 도움말 표시 true
    pause B 키로 블랙아웃 가능 여부 true
    showNotes 발표자 노트를 일반 사용자도 볼 수 있게 false
    autoPlayMedia 미디어 자동 재생 제어 (true, false, null) null
    preloadIframes iframe 선로딩 방식 설정 (true, false, null) null
    autoAnimate 슬라이드 자동 애니메이션 허용 true
    autoAnimateEasing 자동 애니메이션 easing 함수 'ease'
    autoAnimateDuration 자동 애니메이션 시간 (초) 1.0
    autoSlide 슬라이드 자동 넘김 시간 (ms), 또는 false 0
    autoSlideStoppable 사용자 입력 시 자동 넘김 중지 true
    mouseWheel 마우스 휠로 슬라이드 넘김 false
    previewLinks 링크를 미리보기 iframe으로 표시 false
    postMessage 부모 창에 reveal API 메시지 전송 true
    postMessageEvents 이벤트 메시지도 전송할지 여부 false
    focusBodyOnPageVisibilityChange 탭 복귀 시 키보드 제어 복원 true
    transition 슬라이드 전환 애니메이션 (slide, fade, zoom, …) 'slide'
    transitionSpeed 전환 속도 (default, fast, slow) 'default'
    backgroundTransition 배경 전환 효과 'fade'
    pdfMaxPagesPerSlide PDF 출력 시 슬라이드당 최대 페이지 수 Infinity
    pdfSeparateFragments 조각을 개별 PDF 슬라이드로 출력 true
    pdfPageHeightOffset PDF 출력 시 슬라이드 높이 보정 -1
    viewDistance 렌더링되는 근접 슬라이드 수 3
    mobileViewDistance 모바일에서 렌더링하는 슬라이드 수 2
    display 렌더링 방식 (block, flex, …) 'block'
    hideInactiveCursor 비활성 상태에서 마우스 커서 숨김 true
    hideCursorTime 커서 숨기기까지 시간 (ms) 5000

    Leave a comment

    You may also enjoy

    PE Viewer로 PE 구조 분석하기: PE-bear 활용법 정리

    PE Viewer는 .exe, .dll 등 PE(Portable Executable) 형식의 파일 구조를 시각적으로 확인할 수 있는 도구입니다. 이 글에서는 대표적인 PE Viewer 도구들과, 그 중 PE-bear를 활용한 구조 분석 예시를 간단히 정리합니다.

    GitHub Blog 카테고리 페이지 생성하기

    GitHub 블로그에 카테고리별 페이지를 만들고, 페이지네이션과 정렬 기능(최신순/과거순) 까지 넣고 싶다면? 이 글에서는 jekyll-paginate-v2 플러그인을 이용해 minimal-mistakes 테마 기반 블로그에서 카테고리 페이지를 만드는 전 과정을 정리했습니다.

    GitHub Blog 카테고리별 게시글 정렬 기능 구현

    GitHub 블로그를 최신순 또는 과거순으로 정렬하고 싶다면? 이 글에서는 minimal-mistakes 테마에서 카테고리별 게시글 정렬 기능을 구현하는 전체 과정을 코드 중심으로 정리했습니다.

    Ghidra 입문자를 위한 리버싱 가이드

    Ghidra는 NSA에서 만든 무료 리버스 엔지니어링 도구로, 실행 파일을 디컴파일하고 분석할 수 있는 강력한 기능을 제공합니다. 이 글은 설치부터 실습까지 Ghidra 입문자가 따라 하기 쉽게 정리된 단계별 사용 가이드입니다.