Steem Markdown to HTML

WordPress article : https://junn.net/archives/690

Source : https://github.com/junn279/steemjs_example/blob/master/steem05.htm

최근 몇몇 의사들이 모여 프로젝트를 진행하고 있다.

Steem에 있는 특별한 태그를 모은 웹사이트인데, 이 과정에서 필연적으로 Markdown 언어를 HTML로 변화시킬 필요가 있다.

To convert Markdown language to HTML, some processes are needed.

중간과정은 생략하고, 간단히 요약하면 다음과 같은 흐름으로 작성하면 된다.(되더라)

1. Steem에서 Article을 받아온다.(이전 포스팅 참조) / Retrieve Steem article (refer to prior article)
2. 본문(body)의 Markdown 언어를 HTML로 변환 / Convert Markdown to HTML
3. 변환되지 않은 몇가지들을 후처리해준다. / Processing few things which have to be changed manually

Fortunately, Showdown.js library makes it easy to convert Markdown language.

본문을 Markdown 언어를 HTML 로 변환해주는 Showdown 라이브러리가 이미 개발되어 있다. (https://github.com/showdownjs/showdown)

1.7.3 is updated version, so you can include js file as below

현재(2017년9월5일) 릴리즈 된 버전은 1.7.3 인듯 하다. 그래서 js파일을 다음과 같이 불러온다.

<script src=”https://cdn.rawgit.com/showdownjs/showdown/1.7.3/dist/showdown.min.js”></script>

Use as below,

사용은 아래와 같이 하고,

var converter = new showdown.Converter();
text = result.body,
html_body = converter.makeHtml(text);

Then, variable html_body has the converted HTML.

이 때 html_body에는 변경된 본문이 담기게 된다.

Then, 3 steps are prepared, 2 of them is due to characteristics of Steem. When you only put the address of YouTube movie of image file, Steem shows us. But converted HTML does not have that information. The other thing is that line-break of Markdown is not converted <br> tag.

이후 후처리 과정은 3가지를 거치는데, 이 중 2가지는 스팀 특성상 이미지 파일과 유투브 파일을 주소만 붙여넣으면 알아서 그것을 보여주는데 있다. 즉 변경된 html로는 그것이 보이지 않게 된다. 그리고 한가지는 바로 줄바꿈이 <br/>태그로 자동 변경이 되지 않는다는 것이다.

So I made functions for those trival matters.

그래서 직접 제작한 함수는 다음과 같다. (Source : https://github.com/junn279/steemjs_example/blob/master/steem05.htm)

chargeBrTag는 개행문자를 <br>태그로 , imageSetting은 자바스크립스상 정규표현식의 lookbehind가 어려워서 <img>태그를 지우고 찾아지는 png,jpg등을 img 태그로 둘러쌓게 하는 것이다.

function changeBrTag( html )  // Line-break to <BR/> tag
{
return html.replace(/(\r\n\|\r|\n)/gi, “\<br\/\>”);
}
function changeYouTubeTag( html ) //Embed YouTube Video
{
return html.replace(/https:\/\/youtu.be\/([\w]*)/gi, ‘\<p\>\<iframe wdith=”420″ height=”315″ src=”https:\/\/www.youtube.com\/embed\/$1″\>\<\/iframe\>\<\/p\>’);
}

function imageSetting(html)  //Show image which was not img-tagged.
{
var html_change = html;
var regex = /(<([^>]+)>)/ig
var result = html_change.replace(regex, “”);

regex = /(https?:\/\/.*\.(?:png|jpg|jpeg))/ig;
var arrMatch = result.match(regex);
console.log(arrMatch);
for(var i=0;i<arrMatch.length;i++)
{
re = new RegExp(arrMatch[i], “g”);
html_change = html_change.replace(re,”<img src='”+arrMatch[i]+”‘/>”);
if(i!=arrMatch.lenght-1)
{
for(var j=i+1;j<arrMatch.length;j++)
{
if(arrMatch[j]==arrMatch[i])
{
arrMatch.splice(j,1);
}
}
}
}
return html_change;
}

Finally,

최종적으로는,

html_body = converter.makeHtml(text);
html_body = imageSetting(html_body);
$(‘#body’).html(changeYouTubeTag(changeBrTag(html_body)));

각각의 함수를 실행시켜서 결과를 출력하면된다.

Result / 결과물 : https://mediteam.us/post/doctorfriend/6xmqm3