Markdown에서 html 파일을 생성하여 앱 도움말 파일로 표시

개요



앱에 도움말 파일이 있으면 사용자에게 유용합니다.
그 밖에도 다음과 같은 조건을 충족하고 싶습니다.
  • 도움말 파일은 지금 html 파일입니다
  • 오프라인에서도 작동하도록 로컬 파일로 앱에 포함
  • 앱에서 한 번의 클릭으로 열고 싶습니다
  • 도움말 내용은 Markdown에서 작성하고 싶습니다.
  • Markdown이 업데이트되면 자동으로 Html 파일로 변환하여 앱에 통합하고 싶습니다.

    그래서 Markdown에서 도움말을 작성하고 변환된 로컬 HTML 파일을 앱에 통합하고 도움말 파일로 사용하는 방법을 설명합니다.

    샘플은 WPF로 작성했지만 WinForms와 UWP에서도 동일하게 할 수 있습니다.

    스크린샷



    이런 앱이 있었다면 어떻게 사용합니까? 라고 할 때, 중앙의 HELP!! 버튼을 누르면,



    로컬 HTML 파일이 호출되고 도움말이 브라우저에 표시됩니다.
    이제 중앙의 🍪을 누르면 쿠키가 굽는 것을 알 수 있습니다.



    방법



    Markdown 쓰기



    도움말 파일의 원본인 Markdown을 원하는 편집기로 씁니다. 타이포라를 애용하고 있습니다.

    Markdown의 시작 부분에 제목, 저자 이름, 날짜 및 시간을 쓰면 html 파일의 Head에 반영됩니다.
    % Help Coockie Creater
    % soi
    % 2021/02/11
    
    # 🍪HOW TO USE🍪
    
    丸いところをクリックすると<kbd>Coockie Count</kbd>が1つ増えます。
    
    ## UI説明
    
    | 項目           | 見た目   | 説明                       |
    | -------------- | -------- | -------------------------- |
    | Coockie Count  | 文字     | 現在の焼けたクッキー数     |
    | Coockie Button | クッキー | 押すとクッキーが焼き上がる |
    
    # 🍪ホームページ🍪
    
    Githubで公開しています!
    
    [Coockie Creater](https://github.com/soi013/HelpHtmlTest)
    
    

    Pandoc에서 Html 파일로



    Pandoc를 설치합니다.
    ToC가있는 템플릿과 Github 스타일 CSS를 지정하여 단일 html 파일을 생성합니다.
    pandoc -s ./help.md -o ./help.html --toc --template=./elegant_bootstrap_menu.html --self-contained -t html5 -c my_markdown.css
    

    자세한 내용은 아래 링크를 참조하십시오.

    pandoc에서 markdown을 1 파일의 html로 변환 - chocolattips
    Pandoc 메모 - jou4 블로그

    PowerShell



    사전 빌드 이벤트에서 PowerShell 스크립트를 호출하여 pandoc에서 html 파일로 변환합니다.
    빌드 전은 생성한 html 파일을 앱의 콘텐츠 파일로 포함하기 때문입니다.
    pandoc의 작업은 상당히 시간이 걸리므로 빌드마다 움직이고 싶지 않습니다. 그래서 Markdown 파일과 html 파일의 업데이트 날짜와 시간을 비교하여 필요한 경우에만 생성합니다.
    cd 'Help'
    $sourcePath = ".\help.md"
    $sourceTime = $(Get-ItemProperty $sourcePath).LastWriteTime
    $targetPath = "..\Resources\help.html"
    if (Test-Path $targetPath)
    {
        $targetTime = $(Get-ItemProperty $targetPath).LastWriteTime
    }
    else
    {
        $targetTime = 0
    }
    
    echo "Creation help.html: sourceTime is $sourceTime, targetTime is $targetTime"
    
    # 生成したHTMLファイルが元のMarkdownファイルより更新日時が新しいときのみコンバートする
    if ( $sourceTime -gt   $targetTime )
    {
        echo "Start Create help.html"
        # Pandocを使用してMarkdownからHTMLファイルを生成する。cssなどを指定する
        & 'C:\Program Files\Pandoc\pandoc' -s ./help.md -o ../Resources/help.html --toc --template=./elegant_bootstrap_menu.html --self-contained -t html5 -c my_markdown.css
        echo "Finished Create help.html"
    }
    

    사전 빌드 이벤트에서 PowerShell 스크립트 호출

    csproj
      <Target Name="PreBuild" BeforeTargets="PreBuildEvent">
        <Exec Command="powershell -ExecutionPolicy Unrestricted &quot;$(ProjectDir)\Help\CreateHtmlPandoc.ps1&quot;" />
      </Target>
    

    html 파일 속성



    PowerShell이 ​​가능한 시점에서 한 번 빌드합니다. 그러면 프로젝트 > Resources 폴더에 html 파일이 생성됩니다.
    VisualStudio에서 이 속성을 コンテンツ , 新しい場合はコピーする로 설정합니다.
    또 코드 관리를 사용하고 있는 경우는 생성한 html 파일은 관리 대상으로부터 제외해 둡니다.
    여기에서 다시 빌드하면 실행 폴더에 Resources 폴더가 생기고 그 안에 html 파일이 배치됩니다.

    로컬 html 파일 호출



    앱에서 위에서 생성하고 실행 폴더에 배치된 html 파일을 호출합니다.
    이제 브라우저에서 html 파일이 표시됩니다.
    private void Button_HelpClick(object sender, RoutedEventArgs e)
    {
        string htmlFilePath = "Resources/help.html";
        var pi = new ProcessStartInfo("cmd", $"/c start {htmlFilePath}") { CreateNoWindow = true };
        Process.Start(pi)?.WaitForExit();
    }
    

    전체 코드



    전체 코드는 다음 위치에 있습니다.
    htps : // 기주 b. 코 m / 소 013 / lpHtml로 st

    환경



    VisualStudio 2019 버전 16.8.4
    .NET 5
    C# 9
    PowerShell 버전 5.1.19041.610
  • 좋은 웹페이지 즐겨찾기