markdown 내용을 javascript로 표시

9167 단어 HTMLMarkdown
Qiita 첫 투고입니다.
지금까지, 얼마쯤 html 쓴 글의 홈페이지를 공개하고 있었습니다만 쓰는 것이 귀찮아지고 있어, markdown를 직접 표시할 수 있도록 해 보았습니다.

이런 느낌입니다.


markdown에서 쓴 것
# WebブラウザのレンダリングとAngular の change detection
WebフレームワークとHTML 描画の仕組みの関係を研究する。

## react.js と仮想DOM
### 仮想DOM
- [仮想DOMは本当に“速い”のか？ DOM操作の新しい考え方を、フレームワークを実装して理解しよう](https://employment.en-japan.com/engineerhub/entry/2020/02/18/103000)
- [ブラウザの仕組み: 最新ウェブブラウザの内部構造](https://www.html5rocks.com/ja/tutorials/internals/howbrowserswork/)

소스 코드



jquery + marked.js로 할 수 있습니다.

html
<!DOCTYPE html>
<html lang="ja">
    <head>
       <meta charset="UTF-8">
       <link href="../../lib/marked/0.3.5/markdown7.css" rel="stylesheet"></link>
   </head>
    <body>
        <div id="container">
        </div>
        <script src="../../lib/jquery/3.0.0-alpha1/jquery.min.js"></script>
        <script src="../../lib/marked/0.3.5/marked.min.js"></script>
        <script src="../../script/showmarkdown.js"></script>
    </body>
</html>

showmarkdown.js
function loadFile(fileName, callback){
    httpObj = new XMLHttpRequest();
    httpObj.open('GET', fileName+"?"+(new Date()).getTime(),true);
    // ?以降はキャッシュされたファイルではなく、毎回読み込むためのもの
    httpObj.send(null);
    httpObj.onreadystatechange = function(){
       if ( (httpObj.readyState == 4) && (httpObj.status == 200) ){
           callback(httpObj.responseText);
       }
    }
 }

 var list = [];
 loadFile('tech_study_of_web_framework.md', function(resultText) {
     var md = marked(resultText);
     $("#container").append(md);
 });

서버에서 파일 로드



httpObj에서 로드합니다.
덧붙여서 이 코드에서는 로컬의 파일은 CORS에 저해되어 읽을 수 없기 때문에, 서버에 업로드 하지 않으면 동작 확인할 수 없습니다.
function loadFile(fileName, callback){
   httpObj = new XMLHttpRequest();
   httpObj.open('GET', fileName+"?"+(new Date()).getTime(),true);
   // ?以降はキャッシュされたファイルではなく、毎回読み込むためのもの
   httpObj.send(null);
   httpObj.onreadystatechange = function(){
      if ( (httpObj.readyState == 4) && (httpObj.status == 200) ){
          callback(httpObj.responseText);
      }
   }
}

markdown 표시



방금 전의 loadfile 를 호출한 것을 marked 에 건네주어 표시해 줍니다. callback이 됩니다.
var list = [];
loadFile('tech_study_of_web_framework.md', function(resultText) {
    var md = marked(resultText);
    $("#container").append(md);
});

이제 markdown에서 편집하는 것만으로 멋지게 성형되고 표시됩니다.
새 Markdown 파일을 Windows 컨텍스트 메뉴에서 생성
HTML 리치 텍스트를 Markdown으로 변환 ( #WYSIWYG #Slack #GoogleChrome #Markdown )

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage