山内のサイト

Markdownが使いたい

ホームページで表示するとき

いろいろあるが、markedがよさそう  ( 比較のページ JavaScript - Markdownパーサーのshowdown.js、markdown-js、markedを簡単比較 )。

引用(「>」)のところが、うまく処理されないし、プログラム(```で括る)もそれらしく表示されない。ということで、別のスクリプトを探した。

Strapdown.jsというのだとうまくいくみたい。ここ:文書内のMarkdown記法をHTMLとして表示するJavaScriptライブラリ「Strapdown.js」を参照。

以下、strapdown.jsの場合。

!DOCTYPE html>
<html>
<title> はじめてのStrapdown.js</title>
<xmp theme="cerulean" style="display:none;">
# Strapdown.js

## Strapdown.jsとは

Strapdown.jsとは、HTMLの替わりにMarkdown記法で記述することでHTMLを出力できるJavascriptライブラリです。 
記述は[Markdown記法](http://ja.wikipedia.org/wiki/Markdown)を使います。 
Markdown記法が使える人は、Markdownのまま公開も出来るので、情報共有に便利ですね。

## Strapdown.jsの特徴

Strapdown.jsの特徴はいくつかあります。

* XMPタグ内のMarkdown記法をすべてHTMLに変換してくれる
* [Bootstrap](http://getbootstrap.com/2.3.2/)を自動的に読み込んでくれるの
* [Bootswatch](http://bootswatch.com/2/)のテーマも利用できる

Markdown記法に変更してくれるのはもちろんのこと、自動的にBootstrapプラグインも読み込んでくれるので装飾も比較的綺麗になります。 
また、Bootswatchと(Bootstrapのフリーテーマ配布サイト)で配布されているテーマも使えます。 
標準のBootStrapの色合いでは満足できないという場合でも、簡単に変更が出来るんですね。

> 引用テスト

```
プログラムテスト
```
---

&copy; 2014 [想造ノート](http://blog.motta.jp/) all rights reserved.

</xmp>
<script src="http://strapdownjs.com/v/0.2/strapdown.js"></script>
</html>

これでChrome上に表示できる。

以下markedの場合。インストールとか不要(cdnから読み出すので)

<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
</head>
<body>
<script src="https://cdn.rawgit.com/chjj/marked/master/marked.min.js"></script>

<div id="mdrender"></div>
<div id="mdraw" style="display:none;">

## ここにMarkdownの記述で本文を書いていく (漢字のため、ファイルはUTF-8でセーブすること)

 ```
画像を使うときは<img>タグを使う
 ```

1. aa
1. bb

</div>
<script>
  document.getElementById("mdrender").innerHTML = marked(document.getElementById("mdraw").innerHTML);
</script>
</body>
</html>

スライドにするときは、

<!DOCTYPE html>
<html>
  <head>
    <title>Genomic confirmation Paper Procedure Section</title>
    <meta charset="utf-8">
    <style>
      @import url(https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz);
      @import url(https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic);
      @import url(https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700,400italic);

      body { font-family: 'Droid Serif'; }
      h1, h2, h3 {
        font-family: 'Yanone Kaffeesatz';
        font-weight: normal;
      }
      .remark-code, .remark-inline-code { font-family: 'Ubuntu Mono'; }
    </style>
  </head>
  <body>
    <textarea id="source">

class: center, middle

<!-- ここに本文 -->
# タイトル

<!-- ページ区切りは-----で -->

<--! 本文はここまで -->

    </textarea>
    <script src="https://remarkjs.com/downloads/remark-latest.min.js">
    </script>
    <script>
      var slideshow = remark.create();
    </script>
  </body>
</html>

面倒かも。

ついでに、Atomで上記の枠組みをスニペットとして出すことを考える。

スニペット登録

スニペットのサンプル

'.source.gfm':
 'Text Markdown':
   'prefix': 'md'
   'body': """
<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
</head>
<body>
<script src="https://cdn.rawgit.com/chjj/marked/master/marked.min.js"></script>

<div id="mdrender"></div>
<div id="mdraw" style="display:none;">

## ここにMarkdownの記述で本文を書いていく (漢字のため、ファイルはUTF-8でセーブすること)

 ```
画像を使うときは<img>タグを使う
 ```
1. aa
1. bb

</div>
<script>
  document.getElementById("mdrender").innerHTML = marked(document.getElementById("mdraw").innerHTML);
</script>
</body>
</html>
"""
  'Slides':
   'prefix': 'mdslide'
   'body': """
<!DOCTYPE html>
<html>
  <head>
    <title>Genomic confirmation Paper Procedure Section</title>
    <meta charset="utf-8">
    <style>
      @import url(https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz);
      @import url(https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic);
      @import url(https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700,400italic);

      body { font-family: 'Droid Serif'; }
      h1, h2, h3 {
        font-family: 'Yanone Kaffeesatz';
        font-weight: normal;
      }
      .remark-code, .remark-inline-code { font-family: 'Ubuntu Mono'; }
    </style>
  </head>
  <body>
    <textarea id="source">

class: center, middle

<!-- ここに本文 -->
# タイトル

<!-- ページ区切りは-----で -->

<--! 本文はここまで -->

    </textarea>
    <script src="https://remarkjs.com/downloads/remark-latest.min.js">
    </script>
    <script>
      var slideshow = remark.create();
    </script>
  </body>
</html>
"""

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2017-03-21 (火) 14:05:02 (187d)