markdownファイルをパースして表示する

2018/04/19

外部のmarkdownファイルをHTMLに変換して表示するテストなのだが、とりあえずマークダウンで書かれたテキストをHTMLに変換する一番簡単なサンプル。ここでは、変換にmarked.jsを使った。

<head>
<script type="text/javascript" src="./jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="./js/marked.js"></script>
</head>
<body>

<p id="thehtml"></p>

<script type="text/javascript">
  var html = marked("# Hello, world!");   //markdownテキストをHTMLに変換
  document.getElementById("thehtml").innerHTML=html;
</script>

sample

HTMLの要素にマークダウン書式でテキストを書いておき、それを変換して表示することも簡単にできる。

<head>
....
<script type="text/javascript">
$(document).ready(function() {
 var html = $("#thehtml").text();    //markdownテキストを取得
 html = marked(html);  //markdownテキストをHTMLに変換
  $("#thehtml").html(html);
});
</script>
</head>

<body>
<p id=thehtml># Hello, world!</p>

sample2

次に外部のmarkdwonファイルを取得してHTMLに変換して表示するわけだが、外部ファイルは url にパラメータを付けてコールすることで指定したファイルを読むことにする。markdwonファイルは拡張子を .md とすることにする。つまり、

http://hoge.com/.../index.html?src=test

とすると test.md というファイルを読み込むことにする。

<script type="text/javascript">
function get_args(){
	var src;
	var args = new Object();
	var query = window.location.search.substring(1); 
	var pairs = query.split("&");
	for(var i = 0; i < pairs.length; i++) { 
		var pos = pairs[i].indexOf('=');
		if (pos == -1) continue;
		var argname = pairs[i].substring(0,pos);
		var value = pairs[i].substring(pos+1);
		value = decodeURIComponent(value);
		args[argname] = value;
	} 
	var src=args.src;
	return(src);   //変数 src に markdownファイル名が代入される
}
</script>

読み込んだmarkdownテキストがHTMLに変換されて表示される要素を用意しておく。この要素には src というアトリビュートを設けておく。

  <div id="markdown_content" src=""></div>

markdwonファイルを読み込んで指定した要素にHTMLに変換して表示する。

<script type="text/javascript">
$(document).ready(function(){
	var defsrc ;
	var src;
	src = get_args();
	defsrc="default.md";  //デフォルト
	if(src){
		src = src +".md"; //パラメータで指定したファイル名に .md を追加
	}else{
		src = defsrc;
	}

	$('#markdown_content').attr('src',src);
	var target = $("#markdown_content");
	$.ajax({
		url: target[0].attributes["src"].value,
	}).success(function(data){
		target.append(marked(data));
	}).error(function(data){
		target.append("This content failed to load.");
	});
});
</script>

sample3
sample3.html
sample3.html?src=test

参照
https://qiita.com/amay077/items/704d48130e5cf17e8654