[JavaScript]marked.jsを無理矢理拡張してオレオレパーサーを作る
前書き最近例のクソアプリのマニュアルを書いているんですが、なんだかHTMLを書くのが面倒になってきました。 GitHub Pagesですし、jekyllを使えば比較的簡単にMarkdown記法でガリガリ書けるらしいんですけど、使い方を覚えるのが面倒です。また、Rubyの環境がないと書けないのもちょっと嫌です。 どうしようかなぁと色々探してみたらmarked.jsなるものを使えばとても簡単にMarkdownをHTMLに変換してくれると言うことを知り、じゃあ使ってみようか、となったわけです。 が、そのまま使うとなると色々と面倒なことがあるので、無理矢理拡張してオレオレパーサーにしてしまいました。 marked.jsの使い方非常に簡単です。コード例を読むだけでも十分でしょう。 <!doctype html> <html> <head> <meta charset="utf-8"/> <title
![[JavaScript]marked.jsを無理矢理拡張してオレオレパーサーを作る](https://cdn-ak-scissors.b.st-hatena.com/image/square/90eb2958e42491074ba3b8e136706c060c1c0ee5/height=288;version=1;width=512/https%3A%2F%2F66.media.tumblr.com%2Favatar_40dd84613d3b_512.pnj){kind=avatar}
DailyJS | マークダウン風にグラフを生成するD3ベースの「Mermaid」 | JSお散歩
原文: DailyJS | Mermaid: Like Markdown for Diagrams 著者： Alex Young | 2014/11/28 | 翻訳：h.sakai 本を書いている時にちょっとダイアグラム（※）を付け足したいと思うことはよくある。ダイアグラムを入れるのは効果的だが、ドローツールを引っ張りだすのは面倒臭い。本当に煮詰まっている時には紙とペン、あるいはアスキーアートで済ませがちだ。これは普通の人がテキスト編集する場合と同様だろう。エディタでフォントやタグをいじるよりマークダウンを使う方がずっと効率的だが、多くの人は面倒臭がって憶えようとはしない。 ※（訳注）ダイアグラム：ここでは相関関係などを示すチャートのこと。グラフ・チャート・ダイアグラム・プロットの意味の違いについては下記を参照。 ・JSお散歩 | graph / chart / diagram / p
mermaid.jsが素晴らしいけどなかなか使ってる人見かけないので実例晒す(追記あり) - Qiita
mermaid.jsとは JavaScriptのチャート作成ライブラリです。他にも似たようなのは色々ありますが、これ一本でフローチャート、シーケンス、ガントに対応してるので、個人的にお気に入り。 http://knsv.github.io/mermaid/ サイトの各チャートのページ見ると書き方と何ができるかはわかるので、ご覧あれ。 僕の使い方 JSのライブラリを自分でインポートして何かすることはほとんど無くて(後述の理由からガントだけJSで使ってるけど)、基本的には以下の2つの方法で使ってる。 Haroopad フリーでクロスプラットフォーム(OS X, Win, Linux)なMarkdownエディタ。 v0.13からmermaid.jsがインテグされているので、何もしなくてもそのまま使える。 mermaid.jsのグラフの書き方は、コード表記で、言語をmermaidにしてあげるだけ。
ブラウザで動くMarkdown editor - Nao Minami's Blog
vue.jsの公式サイトのexampleにmarkdown editorっていうのがあって、以下のコードの様にただfilterにmarked指定するだけでちゃんと動いててすごかった。 new Vue({ el: '#editor', data: { input: '# hello' }, filters: { marked: marked } }) htmlもこれだけ <div id="editor"> <textarea v-model="input"></textarea> <div v-html="input | marked"></div> </div> marked.jsのmarked関数を適用してるだけなのでmarked.jsがすごいのかもだけど、感動したので手元でも動かしてみた。 環境 例によって、yoのwebappを使う。 bowerでvue.jsとmarked.jsをin
JavaScript - Markdownパーサーのshowdown.js、markdown-js、markedを簡単比較 - ぼっち勉強会
主に比較したいこと 使い方 変換結果の見た目の印象 table記法を解釈できるか コードブロックの解釈 動作確認の前提 MarkdownはQuick Markdown Exampleから一部引用しています 使用したテキストはGistに置いておきます CSSはTwitter Bootstrapを使っています クライアントで使う場合を想定しています(=node.jsでの使用例ではない) HTMLはどれも次のコードを基本としています <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <link href="bootstrap.min.css" rel="stylesheet"> </head> <body> <div class="container"> <div id="content">hoge</div> </di
簡単なMarkdownエディタを作る - Qiita
自作 Web アプリに簡単な Markdown エディタを入れたくなった。 埋込み型のエディタ はあるっぽい。 でもそんな高機能でなくていいし、いちいち使い方調べるのシンドイし、 Markdown の JavaScript 用パーサーはあるみたい だから簡単に作れそう。 作ってみたら、３０分くらいですぐにできた。 ということで作り方メモ。 作るもの こんなの 左のテキストエリアに Markdown を記述すると、右側に結果が出力される。 opengl-8080/SimpleMarkdownEditor 用意するもの Markdown のパーサー Markdown で書いたテキストをパースして、 HTML を吐き出すパーサー。 marked を使ってみる。 コードのハイライト コードブロックをハイライトしてくれるライブラリ。 highlight.js を使ってみる。 スタイル設定 marke
ブラウザ上でMarkdownを安全に展開する - 葉っぱ日記
不特定のユーザーが入力したMarkdownをブラウザ上でJavaScriptを使ってHTMLに変換するという場面においては、JavaScriptで変換してHTMLを生成するという処理の都合上どうしてもDOM-based XSSの発生を考えないわけにはいかない。かといって、MarkdownをパースしHTMLを生成するという処理すべてをXSSが存在しないように注意しながら自分で書くのも大変だし、markedやmarkdown-jsなどの既存の変換用のJSを持ってきてもそれらがXSSしないかを確認するのは結構大変だったりする。 そういった場合には、Markdownから生成されたHTMLをRickDOMを通すことで、万が一HTML内にJavaScriptが含まれていたとしてもそれらを除外し、許可された要素、許可された属性だけで構築された安全なHTMLに再構築することができる。さらに、そうやって生成
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://knsv.github.io/mermaid/
GitHub - markedjs/marked: A markdown parser and compiler. Built for speed.