mediteam.us 개발을 통해 발견된 문제점들을 수정하면서 확인된 내용들입니다.
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(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);
/*
'
\n성장과 발달의 구분
\n많은 분들이 성장과 발달이라는 용어를 혼용하고 있습니다. 의학적으로 성장과 발달은 아래와 같이 구분하고 있습니다.
\n성장: 양적으로 증가하는 과정을 뜻합니다. 키, 체중이 성장을 나타내는 지표입니다.
\n발달: 기능적인 발전과 과정을 뜻합니다. 언어, 운동, 정서적 상태는 발달하는 것입니다.
'
*/
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);
/*
'
\n성장과 발달의 구분
\n많은 분들이 성장과 발달이라는 용어를 혼용하고 있습니다. 의학적으로 성장과 발달은 아래와 같이 구분하고 있습니다.
\n성장: 양적으로 증가하는 과정을 뜻합니다. 키, 체중이 성장을 나타내는 지표입니다.
\n발달: 기능적인 발전과 과정을 뜻합니다. 언어, 운동, 정서적 상태는 발달하는 것입니다.
\n
'
*/
(죄송합니다. 캡춰를 못해서...)
정상적이라면 아래와같이, 위아래의 가로줄과 본문이 출력되야합니다만,
성장과 발달의 구분
많은 분들이 성장과 발달이라는 용어를 혼용하고 있습니다. 의학적으로 성장과 발달은 아래와 같이 구분하고 있습니다.
- 성장: 양적으로 증가하는 과정을 뜻합니다. 키, 체중이 성장을 나타내는 지표입니다.
- 발달: 기능적인 발전과 과정을 뜻합니다. 언어, 운동, 정서적 상태는 발달하는 것입니다.
이렇게 보여야 하는 것이 아래 줄이 출력이 안되면서 윗 문장의 스타일이 망가집니다.
성장과 발달의 구분
많은 분들이 성장과 발달이라는 용어를 혼용하고 있습니다. 의학적으로 성장과 발달은 아래와 같이 구분하고 있습니다.
- 성장: 양적으로 증가하는 과정을 뜻합니다. 키, 체중이 성장을 나타내는 지표입니다.
발달: 기능적인 발전과 과정을 뜻합니다. 언어, 운동, 정서적 상태는 발달하는 것입니다.
이렇게 보이게 되는 현상을 발견했습니다.
--- 위에 빈줄이 없으면 바로 윗 문장에 <h2>태그가 잡혀버립니다. 그래서 --- 대신 *** 를 쓰거나, --- 위에 반드시 빈 줄을 하나 만들으셔야 합니다.