HTML을 Markdown으로 변환하고 Markdown을 HTML로 변환

4747 단어 dotnethtmlmarkdown
Markdown은 인터넷 작성을 더 쉽게 하기 위한 일반 텍스트 서식 구문입니다.

Markdown의 기본 철학은 일반 텍스트 문서는 모든 것을 방해하는 태그 없이 읽을 수 있어야 하지만 목록, 볼드체, 이탤릭체 등과 같은 텍스트 수정자를 추가하는 방법이 있어야 한다는 것입니다.

나중에 적절한 HTML로 변환되는 서식 있는 텍스트를 사용하는 WYSIWYG(What you see is what you get) 편집기의 대안입니다.

이 사이트는 마크다운 에디팅을 사용하고 있으니 마크다운이 무엇인지 더 이상 설명하지 않아도 될 것 같습니다 :)

이를 .Net 프로젝트에 구현하는 방법을 살펴보겠습니다.

전제 조건


  • CodeHelper.Core.Extensions

  • 기존 HTML을 Markdown으로 변환



    예를 들어 이미 블로그 게시물이 있고 마크다운을 사용하는 다른 웹 사이트에 게시하고 싶을 수 있습니다.

    using CodeHelper.Core.Extensions;
    
    string _markdown = _htmlPage.HtmlToMarkDown();
    


    기존 Markdown을 HTML로 변환



    예를 들어 귀하의 기사가 여기 Dev에 게시되는 것일 수 있습니다. 귀하의 블로그에서도 기사를 사용할 수 있기를 원합니다. HTML만 허용하는 블로그입니다.

    using CodeHelper.Core.Extensions;
    
    string _html = _myDevToArticle.MarkDownToHtml();
    


    온라인 확장 테스트


  • Test Online

  • 양방향으로 변환되는 태그


  • 제목 1: h1
  • 제목 2: h2
  • 제목 3: h3
  • 굵게: <b> + <strong>
  • 기울임꼴: <i>
  • 스트라이크: <s> + <strike>
  • 견적: <q>
  • 브레이크 라인: <hr /> + <hr>
  • 마크: <mark>
  • 하위: <sub>
  • 저녁 식사: <sup>
  • 코드: <code>
  • 울타리 코드 블록: <code>multiple lines
  • 링크: <a href..
  • 이미지 <img src...
  • 주문 목록: <ol>
  • 정렬되지 않은 목록: <ul>
  • 정의 목록: <dl>

  • 확장 프로그램은 목록을 포함하여 여러 태그를 처리할 수 있습니다.

    1. Item 1
    2. Item 2
    
    ## Title 
    1. Item 2
    2. Item 3
    


    결과는 다음과 같습니다.

    <ol>
      <li>Item 1</li>
      <li>Item 2</li>
    </ol>
    
    <h2>Title</h2>
    <ol>
      <li>Item 3</li>
      <li>Item 4</li>
    </ol>
    




    정의 목록



    HTML 변환

    <dl>
        <dt>Beast of Bodmin</dt>
        <dd>A large feline inhabiting Bodmin Moor.</dd>
    
        <dt>Morgawr</dt>
        <dd>A sea serpent.</dd>
    
        <dt>Owlman</dt>
        <dd>A giant owl-like creature.</dd>
    </dl>
    


    마크다운으로

    : **Beast of Bodmin**
     A large feline inhabiting Bodmin Moor.
     : **Morgawr**
     A sea serpent.
     : **Owlman**
     A giant owl-like creature.
    


    정의 목록



    마크다운 변환

    <dl>
        <dt>Beast of Bodmin</dt>
        <dd>A large feline inhabiting Bodmin Moor.</dd>
    
        <dt>Morgawr</dt>
        <dd>A sea serpent.</dd>
    
        <dt>Owlman</dt>
        <dd>A giant owl-like creature.</dd>
    </dl>
    


    마크다운으로

    : **Beast of Bodmin**
     A large feline inhabiting Bodmin Moor.
     : **Morgawr**
     A sea serpent.
     : **Owlman**
     A giant owl-like creature.
    


    블로그 게시물을 HTML로



    Markdown에서 이 게시물의 일부를 살펴보겠습니다.

    # Convert HTML into Markdown  and Markdown to HTML
    
    Markdown is a plain text formatting syntax aimed at making writing for the internet easier.
    
    ## Prerequisites
    - [CodeHelper.Core.Extensions](https://www.nuget.org/packages/CodeHelper.Core.Extensions/1.3.2)
    
    
    using CodeHelper.Core.Extensions;
    string _html = _myDevToArticle.MarkDownToHtml();
    


    HTML로 변환됩니다

    <h1>Convert HTML into Markdown  and Markdown to HTML</h1>
    
    Markdown is a plain text formatting syntax aimed at making writing for the internet easier.
    
    <h2>Prerequisites</h2>
    <ul>
      <li><a href="https://www.nuget.org/packages/CodeHelper.Core.Extensions/1.3.2">CodeHelper.Core.Extensions</a></li>
    </ul>
    <code >
    using CodeHelper.Core.Extensions;
    
    string _html = _myDevToArticle.MarkDownToHtml();
    </code >
    

    좋은 웹페이지 즐겨찾기