[javascript] Reveal.js에서 코드 스니펫 및 프로그래밍 예제 추가하기

27 Nov 2023

javascript

Reveal.js는 웹기반 프레젠테이션 툴로써, 코드 스니펫이나 프로그래밍 예제를 추가하여 내용을 더욱 효과적으로 전달할 수 있습니다. 이 글에서는 Reveal.js에서 코드 스니펫 및 프로그래밍 예제를 추가하는 방법을 알아보겠습니다.

1. 코드 스니펫 추가하기

Reveal.js에서 코드 스니펫을 추가하기 위해서는 다음과 같은 단계를 따라야 합니다.

스니펫을 감싸기 위한 <pre> 태그를 작성합니다.
<code> 태그를 사용하여 실제 코드를 작성합니다.
코드 블록의 언어를 지정하기 위해 class 속성으로 language-xxx를 추가합니다. 여기서 xxx는 코드의 언어를 나타냅니다.

예를 들어, JavaScript로 작성된 코드 스니펫을 추가하고 싶다면 다음과 같이 작성할 수 있습니다.

<pre><code class="language-javascript">
function greet(name) {
  console.log('Hello, ' + name + '!');
}

greet('World');
</code></pre>

위의 코드를 적절한 위치에 삽입하면, 해당 슬라이드에 코드 스니펫이 추가됩니다.

2. 프로그래밍 예제 추가하기

Reveal.js에서 프로그래밍 예제를 추가하는 방법은 코드 스니펫을 추가하는 방법과 매우 유사합니다. 다음 절차를 따라 프로그래밍 예제를 추가할 수 있습니다.

예제를 감싸기 위한 <pre> 태그를 작성합니다.
<code> 태그를 사용하여 실제 예제 코드를 작성합니다.
코드 블록의 언어를 지정하기 위해 class 속성에 language-xxx를 추가합니다.

예를 들어, HTML/CSS로 작성된 프로그래밍 예제를 추가하고 싶다면 다음과 같이 작성할 수 있습니다.

<pre><code class="language-html">
<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      background-color: lightblue;
      color: white;
      font-family: Arial, sans-serif;
    }
  </style>
</head>
<body>
  <h1>Hello, World!</h1>
</body>
</html>
</code></pre>

위의 코드를 적절한 위치에 삽입하면, 해당 슬라이드에 프로그래밍 예제가 추가됩니다.

마무리

Reveal.js에서 코드 스니펫 및 프로그래밍 예제를 추가하는 방법을 알아보았습니다. 이를 통해 웹기반 프레젠테이션에서 코드와 예제를 보다 쉽게 표현할 수 있으며, 이를 통해 완성도 높은 프레젠테이션을 만들 수 있습니다.

더 자세한 내용은 Reveal.js 공식 문서를 참고하시기 바랍니다.