marked renderer custom 하기

1. 들어가며

현록을 개발하면서 티스토리에 있던 포스트들을 markdown으로 변환하여 올리고 있는데,
간혹 이미지 가로 사이즈가 viewport width보다 크면 overflow되는 현상이 있었습니다.

사실 css로 해결하였지만, styled-components 환경에서 nesting하는 것을 꺼리기도 하고,
marked에서 직접 inline style을 넣는 방법이 궁금하기도 해서 찾아보았습니다.

2. 해결법

marked에서는 renderer를 통해 markdown 문서를 html code로 변환합니다.
marked documentation를 확인해보니 Renderer.image 함수를 사용하고 있다고 합니다.

사용법은 간단합니다.
아래와 같이 Renderer instance를 하나 만들어서 marked option에 제공해주면 됩니다.

const renderer = new marked.Renderer()
renderer.image = (href, title, text) => `<img src="${href}" title="${title}" alt=${text}" style="max-width: 100%;" />`
renderer.link = (href, title, text) => `<a href=${href} title="${title}" target="_blank" style="text-decoration: underline;">${text}<img src="/img/icons/link-variant.png" width="15" style="vertical-align: baseline" /></a>`

marked.setOptions({
  renderer,
  langPrefix: 'hljs language-',
  highlight(code, lang) {
    const _lang = lang || 'plaintext'

    return hljs.highlight(code, { language: _lang, ignoreIllegals: true }).value
  },
})