Markdown を拡張する MDX はドキュメント作成の新たな可能性？
この記事は、技術書典 11 で頒布中の「Vivliostyle で本を作ろう vol. 5」から抜粋した記事です。ご興味ありましたら、Vivliostyle を使って組版された本誌もぜひお買い求めください！ また、この記事以外の内容もすべて Vivliostyle 公式サイトで無料公開中です。 技術書やドキュメントを執筆する際、あなたはどのような形式で文章を書きますか？ 最近ではもっぱら Markdown で書かれることが多いですが、この Markdown を拡張するポテンシャルを持つお気に入りの OSS プロジェクト「MDX」を紹介します。 MDX = Markdown + JSX MDX の名前の由来は Markdown + JSX なので、MDX を理解するためにはまず JSX について知る必要があります。 JSX とは JavaScript の拡張構文の一つで、元々 React の
maildown - Markdownを日本企業で使えるメール文面に変換 MOONGIFT
Markdownが便利な記法であってもすべてに使える訳ではありません。まだまだ個人間でやり取りされるメールはテキストが一般的で、HTMLメールが使われることはほぼありません。となるとMarkdownの出番がありません。 そこで作られたのがmaildownです。Markdownで書かれた文章を日本企業で使われるメール風の体裁にしてくれます。 maildownの使い方 左側が元文章、右側が変換された内容です。 リストなどに特徴があります。 maildownではリストの他、罫線を使ったテーブル表示、見出しの処理、80文字で改行などと細かな部分を日本企業風に仕立ててくれます。また、下には変換された部分やタイポなどの指摘がされるようになっています。日本風と言わずともメール用のMarkdownコンバータとして便利なソフトウェアです。 maildownはnode/JavaScript製のオープンソース・
Atomのはてな記法モードを作ったよ！！ - マルシテイア
atom.io はてなブログやはてなグループ、増田に投稿する時に便利です。 どうぞご利用ください。 もくじ 機能 はてな記法をシンタックスハイライトしてくれる Markdown文字列をはてな記法に変換できる スニペット使える インストール方法 Atomで新しい言語のモードを作る方法 基礎知識 言語モードはAtomのpackageとして開発する 言語のパースは正規表現で行なう 実際の手順 apm init -l で雛形を作る apm link して手元のAtomで確認 grammars/ にGrammarファイルを書く snippets/ にスニペットを追加 settings/ を編集 GitHubにpush apm publish 参考リンク 機能 はてな記法をシンタックスハイライトしてくれる こんな感じ Markdown文字列をはてな記法に変換できる md2hatenaを利用した変換機能
Kajero - JavaScriptがその場で実行できるドキュメントシステム
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Markdownを使うようになって、逆にその物足りなさを感じるのではないでしょうか。色が使えなかったり、装飾も限られたものしか使えません。その制限がちょうど良いのかも知れませんが、もっと高度なドキュメントにしたいという要望もあります。 しかしプログラマーであるならば制限されているそのものを使い続けるのではなく、自分で拡張だってできるはずです。今回はインタラクティブなドキュメントを実現するKajeroを紹介します。 Kajeroの使い方 こちらがドキュメントのページです。通常のMarkdown記法が使えます。 こちらが特殊な部分。コードが書いてあります。 右上の再生ボタンをクリックするとJavaScriptが実行されて結果が表示されます。 複数ある場合、変数が共有されます。 実行時間
uiflow - Markdown風の記法でUI Flowを記述
UI FlowはBasecamp（旧37 signals）が考えた画面遷移手法で、ユーザの見るもの/することという点に主眼を置いて描かれるのが特徴です。ムダを省いた作りなので、メンテナンスしやすく、かつ分かりやすいという利点があります。 とは言え、画面遷移図は徐々にメンテナンスされていかなくなるものです。原因としては、バイナリファイルなので編集しづらかったり、移動や結合、分割に工数がかかってしまうということがあります。そこで使ってみたいのがuiflowです。 uiflowの使い方 uiflowの例として、例えば以下のようなテキストファイルを作成します。Markdownに似せた記法となっています。 [最初に] ユーザーが見るものを書きます。 -- ユーザーがする行動を書きます。 [次に] ユーザーが見るもの -- ユーザーがすること１ ==> その結果１ ユーザーがすること２ ==> その結
完全に単一のHTMLファイルで動作するMarkdownエディタ作った - Qiita
概要 完全に単一のHTMLファイルで動作するMarkdownエディタ「かんたんMarkdown」を作ったというお話。 お断り 一応簡単に動作検証はしていますが、とんでもないバグが潜んでいるかもしれません。 かんたんMarkdownを利用して大切な文章がなくなってしまったり、その他損害が生じても責任は取れませんm_ _m 経緯 前回の記事(そろそろExcelで資料作るのやめたい)で、 単一ファイルで動くMarkdown 画像をbase64で埋め込んでしまう というアイデアに可能性を感じて下さった方が多いようです1。 しかしながら、 エディタとプレビューアが別なのが面倒 base64に変換するのが面倒 といった意見も多く聞かれました。 そこで思ったのです。ならばエディタを作ってしまえと。 かんたんMarkdown かんたんMarkdownは完全に単一のhtmlファイルで動作するMarkdown
Markdownで書く電子書籍開発環境
Markdownで書く電子書籍開発環境 #niku_sushi 自己紹介 Name : azu Twitter : @azu_re Website: Web scratch, JSer.info JavaScript Plugin Architecture JavaScript Plugin Architecture 電子書籍の開発中にやったこと やりたかったこと [Markdown] 電子書籍開発環境 · Issue #42 Markdown/文章のLint インラインコードのLint ファイルのincludeするMarkdown拡張 Markdown to HTML or PDF エディタ [Markdown] 電子書籍開発環境 · Issue #42 Markdown/文章のLint => textlint インラインコードのLint => ESLint ファイルのincludeする
Shiba v0.4.0 をリリースしました - はやくプログラムになりたい
先月ぐらいから Markdown プレビューアプリ Shiba をつくっています． rhysd.hatenablog.com 指定した markdown ドキュメント（または特定のディレクトリ下のすべてのドキュメント）をプレビューするアプリです．特定のファイルを監視し，ファイルに変更があった際は自動で更新します．lint 付きです． 会社でぼちぼち使い始めていて，ちょっと資料見せて話したい時は Markdown で資料を書いて Shiba で別画面に出して説明したりしてます．Markdown のドキュメントのままだとフォントサイズが均一だったり画像見せられなくて不便なので，それが解消されました．また，資料に間違いがあっても手元のエディタでサッと修正すれば大体バレません．以前は PowerPoint で資料作ったりしてたのですが，無駄にスライド式に囚われてしまって資料全体が見渡しづらかったり
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を安全に展開する - 葉っぱ日記
不特定のユーザーが入力したMarkdownをブラウザ上でJavaScriptを使ってHTMLに変換するという場面においては、JavaScriptで変換してHTMLを生成するという処理の都合上どうしてもDOM-based XSSの発生を考えないわけにはいかない。かといって、MarkdownをパースしHTMLを生成するという処理すべてをXSSが存在しないように注意しながら自分で書くのも大変だし、markedやmarkdown-jsなどの既存の変換用のJSを持ってきてもそれらがXSSしないかを確認するのは結構大変だったりする。 そういった場合には、Markdownから生成されたHTMLをRickDOMを通すことで、万が一HTML内にJavaScriptが含まれていたとしてもそれらを除外し、許可された要素、許可された属性だけで構築された安全なHTMLに再構築することができる。さらに、そうやって生成
いまさらですが、増井雄一郎さんのメモ帳サービス「wri.pe」がすごい件 #HTML5 #プログラミング #wri.pe #markdown - CodeIQ Blog
CodeIQ中の人、babaQです。 ちょっと前になるのですが、コワーキングスペース茅場町 Co-Edo（コエド） で開催されたmasuidriveこと増井雄一郎さんのトークセッションに参加してきました。 HTML5を活用したメモ帳アプリ「wri.pe」誕生のきっかけ テーマは、増井さんが個人でつくった（とは思えない）メモ帳アプリ「wri.pe」 ゴールデンウィークを利用して、何かゴリゴリと作りたいと思い立ち、 1週間で「自分で使いたいものを作る！」と決めたのがきっかけなんだとか。 まず、浮かんだアイデアは2つ。 煩雑なメモをどうにかできるアプリと、未読のチャットを整理できるアプリ。 でも、1週間で開発するにはチャットはちょっと重い… ということで、メモアプリを作ることに決定。 まず最初に「メモアプリの課題」を整理したそうです。 - いつでも、どこでも使える（iPhone、iPadでも）
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
