마크다운(markdown) 심플 렌더링 방법

2023. 11. 15. 22:20토막메모

728x90
반응형

html 샘플코드 (template.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/9000.0.1/prism.min.js"></script>
    <script type="module" src="https://md-block.verou.me/md-block.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.4.0/github-markdown.min.css" integrity="sha512-30lMQ13MJJk66BfdlnvVnKmP05V7Qt1g6sHyYigDgV8i9M2ENAsXk1U4dVvKUYB6pqb2bVhoxhZsYK08hQpS+g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <title>Document</title>
</head>
<body>
    <div class="markdown-body">
        <md-block src="./template.md">
            `template.md` was *not* found
        </md-block>
    </div>
</body>
</html>

template.md

## Acknowledgements

 - [Awesome Readme Templates](https://awesomeopensource.com/project/elangosundar/awesome-README-templates)
 - [Awesome README](https://github.com/matiassingers/awesome-readme)
 - [How to write a Good readme](https://bulldogjob.com/news/449-how-to-write-a-good-readme-for-your-github-project)

결과

 

참조사이트:

https://doggyfootstep.tistory.com/7

 

[Web] README.md 파일 HTML 형식으로 렌더링하기(markdown → HTML)

안녕하세요🐾 커스텀 라이브러리 배포 작업 진행 중 깃허브 라이브러리 페이지처럼 HTML 내에 README.md 파일을 표시 해야할 일이 생겼습니다. CDN을 이용해 HTML 파일 내에서 마크다운 파일을 렌더

doggyfootstep.tistory.com

https://readme.so/editor

 

readme.so

Use readme.so's markdown editor and templates to easily create a ReadMe for your projects

readme.so

https://md-block.verou.me/

 

md-block: Render styleable Markdown in your HTML

Demos Block Block with incorrect src and fallback content Minimum heading level: Heading links Inline. Note that block level syntax like headings, code blocks, or lists is not processed With and without [sanitization](#handling-untrusted-content). View sou

md-block.verou.me

https://cdnjs.com/libraries/github-markdown-css

 

github-markdown-css - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers

The minimal amount of CSS to replicate the GitHub Markdown style - Simple. Fast. Reliable. Content delivery at its finest. cdnjs is a free and open-source CDN service trusted by over 12.5% of all websites, serving over 200 billion requests each month, powe

cdnjs.com

https://cdnjs.com/libraries/prism

 

prism - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers

Lightweight, robust, elegant syntax highlighting. A spin-off project from Dabblet. - Simple. Fast. Reliable. Content delivery at its finest. cdnjs is a free and open-source CDN service trusted by over 12.5% of all websites, serving over 200 billion request

cdnjs.com

 

반응형

'토막메모' 카테고리의 다른 글

서버 정보 노출 감추기 nginx/php  (0) 2023.11.13
VLAN 개념  (0) 2023.11.01
그림으로 한눈에 보는 웹  (0) 2023.08.17
서버와 클라이언트  (0) 2023.06.22