or wordpress의 markdown에서 shortcode 쓰기
현재 mytory markdown플러그인를 이용하고 있다. 이를 통해 글을 올리는 프로세스는 다음과 같다.
- sublime text로 markdown파일을 dropbox의 public 폴더 내에 저장한다.
- dropbox의 public link를 복사한다.
- wordpress에 새 글 쓰기를 눌러 mytory markdown이 만든 링크를 넣을 수 있는 곳에 링크 주소를 넣는다.
- makrdown이 html로 변환되어 에디터 창에 들어간 것을 확인할 수 있다.
내 글을 내가 직접 관리할 수 있다는 점. 글의 수정시 워드프레스에 반영이 용이하다는 점이 맘에 들어 이 방법으로 계속 포스팅을 하려고 한다.
문제점
이 방법의 몇가지의 문제점이 발생했는데 이는 다음과 같다.
- github 스타일의 코드를 넣으면 에러가 난다.
: markdown변환하는 과정에서 파서가 github favored code 스타일을 인식하지 못해 일어난 에러인데
http://kmyh.kr/add-prism-js-for-glsl-language/에 해결 방법을 기록했다. - gist를 등록하는 과정에서 script나 shortcode가 인식이 안되는 문제가 생긴다.
해결
어떤 식으로 해결이 가능할지 생각해 보았다.
일단 markdown에 gist가 삽입이 되어야 하는데 script방식은 되지 않고, native gist를 삽입하는 방식은 특정 line을 지정할 수도 없어 소용이 없다. 이를 해결한 Gistpress를 설치해서 gist를 성공적으로 wordpress내에 임베딩하는것은 물론 특정 line까지 지정할 수 있었다. 단지 문제는 이제 시작이었는데, markdown에서는 어떤 shortcode도 문자열을 변환시킨다는 것이다.
markdown에서 shortcode를 소화하는 방법을 아무리 찾아보았지만 관련 질문조차 찾을 수 없었다. 단지 github에서는 {% gist … %} 이런 식으로 지정해서 gist를 임베딩하는 방식을 제공한다는 것 밖에. 한참 고민한 끝에 나도 역시 저런 식으로 마크다운 문법을 만든 다음 markdown을 파싱하는 과정에서 숏코드로 변환하자는 생각을 했다.
결국 이 기능은 mytory shortcode플러그인 안에서 markdown을 파싱하는 과정 직후에 preg_replace를 이용해 만들었다.
입력 예)
{% gist daa33988ada6dafa773d prism-glsl.js 851-873 %}변환 예)
[gist id="daa33988ada6dafa773d" file="prism-glsl.js" lines="851-873"]plugins/mytory-markdown/main.php에서 아래 라인을 찾는다.
$post['post_content'] = preg_replace('/<h1>(.*)<\/h1>/', '', $content);이 부분을 아래와 같이 바꾼다.
$content = preg_replace('/<h1>(.*)<\/h1>/', '', $content);
$post['post_content'] = preg_replace('/<p>{%\sgist\s([\w\d]+)\s([\w\d-.]+)\s(([\d-]+)\s)?(?:%}<\/p>)/', 'https://gist.github.com/$1', $content);이처럼 markdown에다 넣어주면 숏코드 형태로 변환되어 html로 입력이 된다.
{% gist daa33988ada6dafa773d prism-glsl.js 851-873 %}