The document contains sample Markdown content including headings, lists, tables, code blocks, and HTML tags. It also includes examples of CSS and JavaScript code for building a slide presentation application with features like slide navigation markers, responsive layout, and state management. Various formatting and content elements are rendered to simulated presentation slides.

16. # This is h1
## This is h2
### This is h3
- This is ul
- This is ul
1.This is ol
2.This is ol
This|is|table
---|---|---
<h1>This is h1</h1>
<h2>This is h2</h2>
<h3>This is h3</h3>
<ul>
<li>This is ul</li>
<li>This is ul</li>
</ul>
<ol>
<li>This is ol</li>
<li>This is ol</li>
</ol>
<table>
마크다운 문서 HTML

18. ```uml
User->Browser: request presentation
Browser->Renderer: markdown
Renderer->Parser: rendered HTML
Parser->Browser: presentation HTML
Browser->User: do presentation!
```

19. ```chart
,angular, react, vue
LinkedIn,72747,70963,11590
Indeed,15141,14595,1810
Simplyhired,11367,10508,1526
Dice,4719,3529,331
type: column
title: Job positioning
y.title: Amount
x.title: Site
```

21. <h1>This is h1</h1>
<h2>This is h2</h2>
<h3>This is h3</h3>
<ul>
<li>This is ul</li>
<li>This is ul</li>
</ul>
<ol>
<li>This is ol</li>
<li>This is ol</li>
</ol>
<table>
<div class="area a--title -ready">
<div class="title-main">This is h2</div>
</div>
<div class="block b--titled -ready">
<h3>This is h3</h3>
<ul>
<li>This is ul<br>This is ul</li>
</ul>
<p>1.This is ol<br>2. This is ol</p>
<table>…
</div>
HTML 프레젠테이션 HTML

38. .slide {
width: 100vw;
height: calc(100vw*0.5625);
}

39. .slide {
width: 100vw;
height: calc(100vw*0.5625);
}

40. .slide {
width: 100vw;
height: calc(100vw*0.5625);
max-width: calc(100vh*1.7777);
max-height: 100vh;
}

43. if (window.matchMedia('screen and (min-aspect-ratio: 16/9)').matches) {
html.style.fontSize = (currentFontSize * 1.7776) + 'vh';
} else {
html.style.fontSize = currentFontSize + 'vw';
}

48. Object.defineProperty(this, 'state', {
get: () => this._state,
set: (newState) => {
switch(newState) {
case STATE.READY:
this._ready();
break;
case STATE.ENTER:
this._enter();
break;
case STATE.VISIBLE:
this._visible();
break;
…….
case STATE.PASSED:
this._passed();
break;
…..
}}
});

52. .spotlight {
background-image: radial-gradient(circle at 50px 50py, transparent 100px, rgba(0,0,0,0.5) 0)
}

53. .spotlight {
overflow: hidden;
}
.spotligiht:before {
content: ‘’;
border: solid 9999px rgba(0,0,0,0.5);
width: 100px;
height: 100px;
border-radius: 50%;
}

63. <div class="slide s--contents -passed -visible">
<div class="area a--title -visible">
<div class="title-main">목차 슬라이드</div>
</div>
<div class="block b--normal -visible">
<ul>
<li>프로젝트 문서 내에 H1 단락이 1개 이상 존재하면 자동으로 생성됩니다.</li>
<li>발표모드 옵션에서 생성 여부를 결정할 수 있습니다.</li>
</ul>
<p><img src="https://nhnent.dooray.com/files/xxxxx" alt="Screenshot-2018-4-3 Dooray
presentation mode test.png”>
</p>
</div>
</div>

64. <div class="slide s--contents -passed -visible">
<div class="area a--title -visible">
<div class="title-main">목차 슬라이드</div>
</div>
<div class="block b--normal -visible">
<ul>
<li>프로젝트 문서 내에 H1 단락이 1개 이상 존재하면 자동으로 생성됩니다.</li>
<li>발표모드 옵션에서 생성 여부를 결정할 수 있습니다.</li>
</ul>
<p><img src="https://nhnent.dooray.com/files/xxxxx" alt="Screenshot-2018-4-3 Dooray
presentation mode test.png”>
</p>
</div>
</div>

66. <div class="slide s--contents -passed -visible">
<div class="area a--title -visible">
<div class="title-main">Table of Contents Slides</div>
</div>
<div class="block b--normal -visible">
<ul>
<li>H1, If more than one paragraph exists, they are automatically created.</li>
<li>You can decide whether to create it in the presentation mode option.</li>
</ul>
<p><img src="https://nhnent.dooray.com/files/xxxxx" alt="Screenshot-2018-4-3 Dooray
presentation mode test.png”>
</p>
</div>
</div>

76. import './pageMarker.css'
const MARKER = <div class="slide-marker"><div class="slide-marker-flip"></div></div>`;
class PageMarker {
constructor() { …
this.flipEl = this.el.querySelector('.slide-marker-flip');
this.initSvg();
}
install(pres) {
this.eventManager.on('movedSlide', this.inActiveMarker.bind(this));
this.eventManager.on('scroll', () => this.inActiveMarker());
}
…
export default PageMarker;
// main.js
import PageMarker from ‘./plugin/pageMarker’
Presentation.use(PageMarker)

85. Dockerfile
FROM xxxx
COPY . .
RUN npm install
…
CMD [“node”, “index.js”]
FROM xxxx
COPY package*.json ./
RUN npm install
COPY . .
…
CMD [“node”, “index.js”]