listitem [Markdown 다루기 with Marked, Tailwind CSS]

 

사용 라이브러리

https://marked.js.org/

https://tailwindcss.com/

 

itemlist

itemlist 예를 들면 li 같은 태그에서 

• 이렇게 동그라미가 나와야 하는데 나오지 않는다면, marked에서 지원하는 use를 사용해 custom class를 적용 할 수 있다.

 

Marked + Tailwind CSS에서 사용 예제이다.

const renderer = {
    listitem(text, task, checked) {

        return `<li class="ml-5 mt-3 text-lg whitespace-pre-line list-disc">${text}</li>`;
    },
};


marked.use({ renderer });

const parse = marked.parse(body);

 

위의 예제와 같이 listitem의 li에 tailwind css를 적용해주는 예제이다.

위처럼 적용하면 li태그에 동그라미가 나오는 것을 볼수 있다.

 

Marked

https://marked.js.org/using_pro#use

Block-level renderer methods

• code(string code, string infostring, boolean escaped)
• blockquote(string quote)
• html(string html)
• heading(string text, number level, string raw, Slugger slugger)
• hr()
• list(string body, boolean ordered, number start)
• listitem(string text, boolean task, boolean checked)
• checkbox(boolean checked)
• paragraph(string text)
• table(string header, string body)
• tablerow(string content)
• tablecell(string content, object flags)

 

Tailwind CSS

https://tailwindcss.com/docs/list-style-type#setting-the-list-style-type

 

list-disc

• Now this is a story all about how, my life got flipped-turned upside down
• And I'd like to take a minute just sit right there
• I'll tell you how I became the prince of a town called Bel-Air

 

위의 예제는 https://delog.io/@pishio/can-respond 에서 적용된 것을 확인해 볼 수 있습니다.