Web에 게시된 대부분의 Markdown 작성과 html 및 markdown 편집기에 대한 내용은 Local에서 사용 가능한 방법을 게시한 것이 일반적인 것으로 보인다. 왜냐하면 하루패드에서 작성한 Markdown을 실제로 HTML로 저장하게 되면 Local Computer에서는 정상적으로 보이지만, 이를 실제로 적용하게 되면 Style 에 정의된 각종 폰트 파일들이 실제로 존재하는 경로가 달라 수식이나 그림등이 깨지는 현상이 나타난다. 따라서 이를 회피하고 정상적으로 Markdown으로 작성된 내용이 Local 컴퓨터 뿐만 아니라, Web에서도 정상적으로 게시될 수 있는 방법을 보인다.
HarooPad에서 작성된 HTML은 참고용
하루패드에서 작성된 HTML을 그대로 출력하게 되면 Local Computer의 Style 이 그대로 HTML에 들어가기 때문에 이렇게 만들어진 HTML을 Apache서버를 통해 외부로 게시할 수는 없다. 그러므로 Notepad를 사용하여 순수 HTML 만 클립보드로 복사한 후 이를 바탕으로 HTML을 만들어야 한다. 하지만 이 방법 보다, StackEditor를 사용하여 서식있는 HTML을 추출한 후 (Using Template) 여기에 MatheJax Script와 Header 정보를 부가하는 것이 낫다.
TOC가 있는 경우 StackEditor 사용
Table of Contents가 있는 경우에는 Chrome의 플러그인 프로그램인 StackEditor 를 사용하여 TOC 에 해당 하는 부분만을 추출 하여야 한다. 즉 다음과 같은 부분을 모두 가져와야 한다.
<p><div class="toc">
<ul>
~
</ul>
</div>
</p>
stackEditor에서 만들어진 서식있는 HTML을 Export 하게 되면 잘 정리된 TOC Markup이 추출된다.
Mathjax Script
Mathjax Script를 복사해 가져온다. 다음의 script 이다.
<script type="text/javascript" src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML"></script>
HTML의 구조
따라서 HTML의 첫부분은 다음을 그대로 카피하여 사용하는 것이 좋다. HTML 파일의 이름은 “DifferentialGeometryFirstPhase” 이다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DifferentialGeometryFirstPhase</title>
<script type="text/javascript" src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML"></script>
</head>
이 다음에 다음을 추가한다.
<body><div class="container">
다음 TOC를 붙여 넣고 실제 내용(body)를 붙여 넣는다. body가 붙어 있으므로 당연히 HTML의 마지막 부분은 다음과 같다.
</body>
</html>