Zenn
🛴

HTML内にMarkdownを混ぜて利用した際のメモ

2022/02/11に公開
HTML
Markdown
Web
tech

Markdown文書をそのままwebページ化して公開していたものを、HTML内に混ぜて利用し更新した際のメモです。

普段はweb開発をやっていなかったので、個人開発アプリのプラポリ・利用規約を簡易的にMarkdownで公開していました。

参考 : GitHubを使ってMarkdown文書を５ステップでホームページとして公開する方法

元々公開していたページのレイアウト

レイアウトをつくりたいと思っていたものの、マークダウン → HTML化が面倒でした。
HTML内に混ぜて利用する簡単な方法を調べていたところ、こちらの記事を見つけました。

参考 : HTML内にMarkdown記法を混ぜて使うシンプルな方法

記事と同じように、stylesheetを追加し、markedを使いました。
bootstrapのスタイルシートに加え、文字色, 左右のマージン, 背景色を変更したかったので、プラスで追加しました。

マークダウン文書は参考記事同様、md(``)内にそのままコピペ利用しています。

terms.html

<!-- 略 -->

  <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script>
  <script>
  const md = function(html) {
    const div = document.createElement("div")
    div.innerHTML = marked(html);
    // 背景色の変更追加
    div.style.backgroundColor = 'DimGray'; 
    document.body.appendChild(div)
  }
  </script>
<!-- 略 -->

<script>md(`

### SliceTimeCam - Terms & Conditions

**Terms & Conditions**

...略

`)</script>
bootstrap.min.css

/*
    略
*/


/* 文字色, マージンの変更 */
h1,h2,h3,h4,h5,p,li {
    color: rgb(235, 235, 235);
    margin-left: 20%;
    margin-right: 20%;
}

新しく公開したページのレイアウト

最短でレイアウトが整って満足です！

公開しているページ : slicetimecam.jp
公開しているアプリの記事 : 【個人開発】SliceTimeCamというカメラアプリを作りました

Discussion