Asciidoctor 및 RevealJS를 사용한 멋진 프레젠테이션

previous post 에서 우리는 Asciidoctor 의 힘, 문서 작성, 작성 및 기타 여러 기능을 어떻게 향상시킬 수 있는지 빠르게 확인했습니다.

다른 뛰어난 기능 중 하나는 RevealJS이라는 또 다른 유틸리티와 함께 ​​멋진 HTML 프리젠테이션을 만드는 기능입니다.

다음은 asciidoctor 마크업 파일인 샘플 프리젠테이션입니다.

= Stunning Presentations
Prabhu R
:imagesdir: images
:title-slide-background-image: sea.jpg
:title-slide-transition: fade
:title-slide-transition-speed: fast
:experimental: true

== A Great Story

image::galaxy.jpg[background, size='cover']
Press kbd:[s] for Speaker View that displays notes  

[.notes]
--
* tell anecdote
* make a point
--

[transition='convex']
== Transition Convex

This slide has a `convex` effect

[background-color="gray"]
[transition='zoom']
== Transition Zoom

This slide has a `zoom` effect,

[background-color="teal"]
[transition='zoom']
== Vertical Slides

This is a Vertical slide,  click kbd:[↓] to see vertical slides

[background-color="crimson"]
[transition='slide']
=== Vertical Slide 1

Vertical slide 1

[background-color="brown"]
[transition='slide']
=== Vertical Slide 2

Vertical slide 2

[background-video="orca.mp4",options="loop,muted"]
[transition='concave']
== Background Video

Background looping video

[%notitle]
[transition='concave']
== THE END

image::end.jpg[background, size=cover]

이 멋진 이미지가 어떻게 렌더링되는지 확인하려면 here을 방문하십시오.

Esc 키를 누르면 모든 슬라이드의 축소판 보기가 표시됩니다. 슬라이드 중 하나를 클릭하면 해당 슬라이드로 이동합니다.

전체 소스는 GitHub에서 사용할 수 있으며 프레젠테이션의 시작 템플릿으로 사용할 수 있습니다.

약간의 CSS 지식으로 프레젠테이션에 더 놀라운 효과를 가져올 수 있습니다. 자세한 내용은 asciidoctor-revealjs site을 참조하십시오.

Benjamin Schmid은 asciidoctor와 revealjs 조합이 생성할 수 있는 것의 좋은 예인 훨씬 더 놀라운 프레젠테이션을 제공합니다.