md 파일을 출력에 성공한 나 자신.. 기쁨도 잠시..
아래 문제에 봉착했다.
$ npm install --save prismjs
import { marked } from "marked"; import prism from "prismjs"; import "prismjs/themes/prism.css"; import "prismjs/components/prism-bash"; import "prismjs/components/prism-javascript"; import "prismjs/components/prism-json"; import "prismjs/components/prism-liquid"; import "prismjs/components/prism-markdown"; import "prismjs/components/prism-markup-templating"; import "prismjs/components/prism-php"; import "prismjs/components/prism-scss";
marked.setOptions({ highlight: (code, lang) => { if (prism.languages[lang]) { return prism.highlight(code, prism.languages[lang], lang); } else { return code; } }, });
marked.parse(text)
정상적으로 출력된다 !
적용 후 지켜보니
<blockquote>
태그로 인용문이 들어가있다.blockquote {
padding-left: 20px;
border-left: 3px solid #3d3dff;
}
사실 안 멈춰도 됩니다.
문제가 있어서는 아니구요.
marked.js 에서 target
은 지원하지 않는 것 같습니다.
이 부분 역시 marked.js 옵션을 부여해주어야 합니다.
제가 불편한 걸 그냥 못 넘어가서 죄송합니ㄷ..
뭔가했는데 잘 보니 생각보다 단순한 방법이네요
const renderer = new marked.Renderer();
const linkRenderer = renderer.link;
renderer.link = (href, title, text) => {
const html = linkRenderer.call(renderer, href, title, text);
return html.replace(/^<a /, '<a target="_blank" rel="nofollow" ');
};
marked.setOptions({
renderer: renderer, // 이 부분 추가해주었습니다.
highlight: (code, lang) => {
if (prism.languages[lang]) {
return prism.highlight(code, prism.languages[lang], lang);
} else {
return code;
}
},
});
코딩 인생 얼마 안 됐지만 몇 안되는 속전속결의 순간..
별 오류없이 잘 진행된..
어려운 내용은 아니였지만 뭔가를 사례와 검색에 이해하고 해결했다는 것이 뿌듯..
그 와중에 빠르게 해결이 또 되다니..신기하다
오늘 삽질 12시간째인건 비밀
해당 게시글은 아래 블로그를 참고하여 작성되었습니다.
링크 : https://benborgers.com/posts/marked-prism