Steem Markdown to HTML <업데이트> Table, Linebreak(줄바꿈) 및 기타 오류 문제

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&lt;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&lt;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>태그가 잡혀버립니다. 그래서 --- 대신 *** 를 쓰거나, --- 위에 반드시 빈 줄을 하나 만들으셔야 합니다.