20.12.17 게시판 사이트 프로젝트(toastui-viewer 적용)

<app.js>

function ArticleDetail__Body__init() {
		if(toastui === undefined){
			return;
		}
		
		var body = document.querySelector('.article-detail-cell__body > div > span');
		var initValue = body.innerHTML.trim();
		
		var viewer = new toastui.Editor.factory({
			el : body,
			initialValue : initValue,
			viewer : true,
			plugins: [toastui.Editor.plugin.codeSyntaxHighlight]
		});
	};

	ArticleDetail__Body__init();

<detail.html>

<!-- 하이라이트 라이브러리 추가, 토스트 UI 에디터에서 사용됨 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.4.1/highlight.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.4.1/styles/default.min.css">

<!-- 토스트 UI 에디터, 자바스크립트 코어 -->
<script
	src="https://uicdn.toast.com/editor/latest/toastui-editor-all.min.js"></script>

<!-- 코드 미러 라이브러리 추가, 토스트 UI 에디터에서 사용됨 -->
<link rel="stylesheet"
	href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.3/codemirror.min.css" />
<!-- 토스트 UI 에디터, CSS 코어 -->
<link rel="stylesheet"
	href="https://uicdn.toast.com/editor/latest/toastui-editor.min.css" />

<!-- 토스트 UI 에디터, 신택스 하이라이트 플러그인 추가 -->
<script src="https://uicdn.toast.com/editor-plugin-code-syntax-highlight/latest/toastui-editor-plugin-code-syntax-highlight.min.js"></script>


   <!-- 메인-상세페이지 시작 -->
    <section class="section-2 con-min-width min-height-70vh">
      <div class="con height-100p">
        <div class="article-detail-cell height-100p">
	  	[상세페이지 블록]
        </div>
      </div>
    </section>
    
  <!-- 메인-상세페이지 끝 -->
  

<foot.html>

</main>

<footer class="bottom-bar con-min-width">
	<div class="con flex flex-ai-c">
		<a href="index.html" class="logo logo--mini flex flex-ai-c"> <i
			class="fab fa-jenkins"></i> <span> Develo<span>p</span>ers
		</span>
		</a>

		<div class="bottom-bar__site-info">Lorem ipsum dolor sit amet
			consectetur adipisicing elit. Dolorum eos ipsum necessitatibus
			doloremque quos voluptate debitis earum aut a consequuntur explicabo
			deleniti qui eius facere, harum error eveniet vel laudantium.</div>
	</div>
</footer>
</div>
<!-- app.js 불러오기 -->
<script src="app.js"></script>
</body>
</html>

 

<사이트 게시글 상세보기에 toastui-viewer 적용된 화면>