5개월 전에 포스팅했던 https://steemit.com/steemdev/@junn/690 Markdown to HTML 에 관련된 새롭게 업데이트 된 내용을 담습니다.
당시에 개행문자(\r)를 <Br/>로 강제로 변환하는 방식을 이용했습니다만, 이런 부분이 다 필요없이 옵션으로 제공되고 있었습니다.
Markdown을 HTML로 변경하는 라이브러리는 아래와 같습니다.
https://github.com/showdownjs/showdown
스팀을 받아오는 방식은 아직 그대로인것 같습니다.
https://steemit.com/steem/@junn/557
서버에서는 nodejs를 쓰고, 클라이언트에서는 javascript입니다만, 설명은 서버쪽으로 진행하겠습니다.
아래와 같이 설치하고,
$ npm install showdown
JS 파일에는 다음 소스가 이용됩니다.
var showdown = require(‘showdown’);
var converter = new showdown.Converter({
‘tables’:true,
‘strikethrough’:true,
‘simpleLineBreaks’:true
});
//body는 스팀에서 받아온 마크다운 본문입니다.
body = converter.makeHtml(body);
이전과 다른 부분은 Converter 생성자에 들어가는 옵션들입니다.
tables는 마크다운의 테이블,
strikethrough는 문자 가운데 들어가는 취소선,
simpleLineBreaks는 마크다운에서 줄바꿈을 <br>태그로 바꾸는 기능입니다.
이외에도 http 주소만 쓰면 알아서 링크를 걸어주는 옵션, 이렇게 걸때 알아서 target=’_blank'(새창띄우기) 옵션 등등을 추가할 수 있습니다.
YouTube 엠베딩과 이미지 파일 보여주는 것은 옵션에서 못찾은 것 같아 제가 만든 소스를 그냥 계속 쓰고 있습니다.
function changeYouTubeTag( html ) {
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)
{
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);
if(arrMatch != null)
{
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;
}
즉 아래와 같이 이용합니다.
var converter = new showdown.Converter({
'tables':true,
'strikethrough':true,
'simpleLineBreaks':true
});
body = converter.makeHtml(body);
body = changeYouTubeTag(changeBrTag(imageSetting(body)));
이렇게 돌리니 테이블도, 본문도 예쁘게 잘 출력됩니다.
중간에 찾아진 showdown의 문제는
HTML의 <hr>태그 역할을 하는 — 등의 형식이었는데요,
var showdown = require('showdown');
var converter = new showdown.Converter({'tables':true,'strikethrough':true,'simpleLineBreaks':true});
var text = '----\r#### 성장과 발달의 구분\r많은 분들이 성장과 발달이라는 용어를 혼용하고 있습니다. 의학적으로 성장과 발달은 아래와 같이 구분하고 있습니다.\r- 성장: 양적으로 증가하는 과정을 뜻합니다. 키, 체중이 성장을 나타내는 지표입니다.\r- 발달: 기능적인 발전과 과정을 뜻합니다. 언어, 운동, 정서적 상태는 발달하는 것입니다.\r----';
html = converter.makeHtml(text);
/*
'<hr />\n<h4 id="-1">성장과 발달의 구분</h4>\n<p>많은 분들이 성장과 발달이라는 용어를 혼용하고 있습니다. 의학적으로 성장과 발달은 아래와 같이 구분하고 있습니다.<br />\n성장: 양적으로 증가하는 과정을 뜻합니다. 키, 체중이 성장을 나타내는 지표입니다.</p>\n<h2 id="">발달: 기능적인 발전과 과정을 뜻합니다. 언어, 운동, 정서적 상태는 발달하는 것입니다.</h2>'
*/
var showdown = require('showdown'),
converter = new showdown.Converter({'tables':true,'strikethrough':true,'simpleLineBreaks':true}),
text = '***\r#### 성장과 발달의 구분\r많은 분들이 성장과 발달이라는 용어를 혼용하고 있습니다. 의학적으로 성장과 발달은 아래와 같이 구분하고 있습니다.\r성장: 양적으로 증가하는 과정을 뜻합니다. 키, 체중이 성장을 나타내는 지표입니다.\r발달: 기능적인 발전과 과정을 뜻합니다. 언어, 운동, 정서적 상태는 발달하는 것입니다.\r***\r',
html = converter.makeHtml(text);
/*
'<hr />\n<h4 id="">성장과 발달의 구분</h4>\n<p>많은 분들이 성장과 발달이라는 용어를 혼용하고 있습니다. 의학적으로 성장과 발달은 아래와 같이 구분하고 있습니다.<br />\n성장: 양적으로 증가하는 과정을 뜻합니다. 키, 체중이 성장을 나타내는 지표입니다.<br />\n발달: 기능적인 발전과 과정을 뜻합니다. 언어, 운동, 정서적 상태는 발달하는 것입니다.</p>\n<hr />'
*/
(죄송합니다. 캡춰를 못해서…)
정상적이라면
성장과 발달의 구분
많은 분들이 성장과 발달이라는 용어를 혼용하고 있습니다. 의학적으로 성장과 발달은 아래와 같이 구분하고 있습니다.
- 성장: 양적으로 증가하는 과정을 뜻합니다. 키, 체중이 성장을 나타내는 지표입니다.
- 발달: 기능적인 발전과 과정을 뜻합니다. 언어, 운동, 정서적 상태는 발달하는 것입니다.
이렇게 보여야 하는 것이
성장과 발달의 구분
많은 분들이 성장과 발달이라는 용어를 혼용하고 있습니다. 의학적으로 성장과 발달은 아래와 같이 구분하고 있습니다.
- 성장: 양적으로 증가하는 과정을 뜻합니다. 키, 체중이 성장을 나타내는 지표입니다.
발달: 기능적인 발전과 과정을 뜻합니다. 언어, 운동, 정서적 상태는 발달하는 것입니다.
이렇게 보이게 되는 현상을 발견했습니다.
— 위에 빈줄이 없으면 바로 윗 문장에 <h2>태그가 잡혀버립니다. 그래서 — 대신 *** 를 쓰거나, — 위에 반드시 빈 줄을 하나 만들으셔야 합니다.
