タグ

JavaScriptとMarkdownに関するski_yskのブックマーク (21)

  • LaRecipe - Markdownから格好良いドキュメントを生成

    MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 開発者に対して見栄えの良いドキュメントを提供する、これはDevRelにおいて大事な要素です。誰だって使いづらい、読みづらいドキュメントは嫌がるものです。デザインはもちろんのこと、文字サイズや見出しの付け方などによっても可読性は変わってきます。 そこで紹介したいのがLaRecipeです。Laravelを使い、Markdownから綺麗なドキュメントを生成してくれるソフトウェアです。 LaRecipeの使い方 デモです。左側に大見出し、中央がコンテンツ、右側にそのページのアウトラインが表示されます。 コードなども綺麗に表示されます。 アウトプットのデモデザインを入れている例。 ドキュメントの下にはコメント欄が用意されています。 左側の目次は非表示にできます。 検索も使えます。 LaRec

    LaRecipe - Markdownから格好良いドキュメントを生成
  • Fiddly - MarkdownのREADMEを綺麗なHTMLで表示

    MarkdownファイルはHTML生成のために使われることが多いです。生成するタグはごく基的なものになるので、デザインは利用するWebサイト側に任されています。多くはシンプルなデザインであったり、GitHub風になっています。 今回紹介するFiddlyはMarkdownからより綺麗でデザインされたHTMLを生成するソフトウェアになります。 Fiddlyの使い方 サンプルです。 コードやリンクなどが分かりやすく表示されます。 テーブルです。 Todoにも対応しています。画像を並べて表示するのも良い感じです。 テーマを変更してダークモードにも。 Fiddlyはデザインがすっきりとして見やすいのはもちろん、絵文字のサポート、コードハイライト、画像の縮小表示、コードをiframeで安全にするといった工夫がされています。カスタマイズも可能なので、自分好みの使い方ができるでしょう。 FiddlyはJ

    Fiddly - MarkdownのREADMEを綺麗なHTMLで表示
  • Slate markdown editor - ホットキーが用意されたMarkdownエディタ

    MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Markdownエディタは数多く存在します。多くは二画面形式になっており、左側がエディタ、右側がプレビューになっています。しかし、この場合は編集している内容とその結果の両方を逐次確認しないといけません。 Slate markdown editorはそういった手間なく、その場で表示に反映されるので初心者にも分かりやすい仕組みになっています。 Slate markdown editorの使い方 Slate markdown editorの画面。左側がエディタ、右側には変換後のHTMLが表示されています。 画像は選択すると削除できます。 新しい画像を埋め込むこともできます。 Slate markdown editorは多数のキーボードショートカットが用意されており、その多くはMarkdo

    Slate markdown editor - ホットキーが用意されたMarkdownエディタ
  • bedecked - Markdownで作るHTMLスライド MOONGIFT

    HTMLでスライドを作るソフトウェアが増えています。その多くがMarkdownも使えるようになっています。しかしMarkdownはあくまでもオプションだったりするので、ちょっとした設定が必要になったりします。 bedeckedはMarkdownだけに対応したHTMLスライドソフトウェアです。スライド部分はreveal.jsを使っているので操作性は全く問題ありません。 bedeckedの使い方 Markdownでコンテンツを書いて、それがHTMLスライドになります。変換は不要です。 Escキーでスライドを一覧表示する機能もあります。 bedeckedは普段使っているMarkdownの書き方と、reveal.jsの使い方さえ覚えてしまえばすぐに使いこなせます。アニメーションであったり、文字の大きさなどを気にしないで良いので、スライドの内容だけに集中できることでしょう。 bedeckedはJav

    bedecked - Markdownで作るHTMLスライド MOONGIFT
  • docxtemplater - テンプレートからWord/PowerPointファイルを生成 MOONGIFT

    エンジニアであってもオフィススイートを使う機会はあります。例えばWordを使ったり、PowerPointでプレゼンを作ったりするでしょう。資料はMarkdownやシステムに入っていて、それを取り出してファイルの内容に埋め込んだりする作業は手間です。 そこで使ってみたいのがdocxtemplaterです。テンプレートされたオフィスファイルを使ってWord/PowerPointファイルを生成します。 docxtemplaterの使い方 デモです。 {} で囲まれた部分がテンプレートとして置き換わります。 繰り返し処理もできます。 状態による分岐処理も。 XMLを埋め込むこともできます。細かい文字装飾はそちらでできます。 テーブルでも繰り返し処理ができます。 リスト。 docxtemplaterではもっと多機能なものはPro版として販売されています。しかし簡易的な文書であればオープンソース版でも

    docxtemplater - テンプレートからWord/PowerPointファイルを生成 MOONGIFT
  • CodiMD - リアルタイムコラボレーション付きのMarkdownエディタ MOONGIFT

    Markdownは業務の中でも広く使われるようになっています。個人でメモとして使う範疇を遙かに超えて、Markdownなしでは仕事が回らないというチームすらあるのではないでしょうか。 そんな方達にお勧めなのがCodiMDです。共同編集をサポートしたMarkdownノートアプリです。 CodiMDの使い方 エディタです。2ペインになっています。左側が編集、右側にプレビューが表示されます。 他のブラウザの編集がリアルタイムに反映されます。 画像はドラッグ&ドロップでアップロードされます。 メニューです。プレゼンテーションモードや各種フォーマットでのダウンロードが可能です。 PDFは残念ながら日語が表示されませんでした(Herokuに日フォントが入っていないせいだと思いますが)。 テーブルもサポートされています。 PDFの埋め込み。 MathJax。 Graphvizによるグラフ埋め込み。

    CodiMD - リアルタイムコラボレーション付きのMarkdownエディタ MOONGIFT
  • markdownlint-cli - より良いMarkdownドキュメントを目指す

    MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Markdownは柔軟な記法をサポートしています。なんとなく書いてもそれっぽく表示されます。しかし、会社などで何人もMarkdownを使うようになると一定の統一された基準が必要になるでしょう。 そこで使ってみたいのがmarkdownlint-cliです。MarkdownLintツールかつCLIになります。 markdownlint-cliの使い方 インストールが終わったら後はmarkdownlintコマンドを実行するだけです。そうすると直すべきポイントがリストアップされます。 $ markdownlint README.md README.md: 210: MD007 Unordered list indentation README.md: 92: MD009 Trailing

    markdownlint-cli - より良いMarkdownドキュメントを目指す
  • Ordinance format jp - Markdownで日本の公文書を記述

    MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Markdownは広く使われるようになっていますが、シンプルな記法だけに簡易的なHTMLへの変換以外のニーズ向けとなると使い勝手が悪いことがあります。そのためグラフを入れられるようにしたり、チャートを描けるようにするソフトウェアが作られます。 今回紹介するOrdinance format jpもその一つです。日の公文書フォーマットに合わせたMarkdown記法です。 Ordinance format jpの使い方 サンプルです。左側が拡張されたMarkdownで、右側に展開されます。 ラベルが付けられたり、補足情報の記述、リストの番号の付け方が変わっています。 Ordinance format jpを使うことで普段から慣れているMarkdown記法のまま、公文書風に仕上げることが

    Ordinance format jp - Markdownで日本の公文書を記述
  • cgmd-browser - Markdownに注釈を入れる

    MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Markdownが開発者の間でデファクトのフォーマットになってきています。そうやって広まっていく中では、周辺ツールも充実してきます。今回はアノテーション、注釈に注目します。 Markdownでもワードプロセッサのように文書に対してコメントしたいと考える時があるでしょう。そんな時に使えるのがcgmd-browserです。 cgmd-browserの使い方 cgmd-browserのメイン画面です。タブに対応しているので複数のMarkdownファイルが開けます。そして文字を選択するとアイコンが表示されます。 そして鉛筆のアイコンをクリックするとコメントが書けます。 コメントするとフローティングで確認できるようになります。 cgmd-browserはazu/markdown-review

    cgmd-browser - Markdownに注釈を入れる
  • Prettier Markdown - Markdown中のJavaScriptコードを整形

  • maildown - Markdownを日本企業で使えるメール文面に変換 MOONGIFT

    Markdownが便利な記法であってもすべてに使える訳ではありません。まだまだ個人間でやり取りされるメールはテキストが一般的で、HTMLメールが使われることはほぼありません。となるとMarkdownの出番がありません。 そこで作られたのがmaildownです。Markdownで書かれた文章を日企業で使われるメール風の体裁にしてくれます。 maildownの使い方 左側が元文章、右側が変換された内容です。 リストなどに特徴があります。 maildownではリストの他、罫線を使ったテーブル表示、見出しの処理、80文字で改行などと細かな部分を日企業風に仕立ててくれます。また、下には変換された部分やタイポなどの指摘がされるようになっています。日風と言わずともメール用のMarkdownコンバータとして便利なソフトウェアです。 maildownはnode/JavaScript製のオープンソース・

    maildown - Markdownを日本企業で使えるメール文面に変換 MOONGIFT
  • Visdown - Markdownにグラフ機能を追加

    MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Markdownは誰でもすぐに覚えられて便利な記法ですが、ちょっとこだわったことをしようと思うだけでMarkdownだけでは物足りなくなってしまいます。その結果、HTMLタグが氾濫することになってしまったりもします。 今回紹介するVisdownはMarkdownに足りないデータのビジュアル化機能を追加するソフトウェアです。 Visdownの使い方 Visdownの画面です。左側がエディタ、右側にプレビューが表示されています。 ```vis とするのがコツです。 色を変えることもできます。 変更はリアルタイムに反映されます。 VisdownではSVGのグラフを出力します。すべてクライアントサイドで完結していますので表示の反映が即座に行われます。ビジュアル化はVegaを使って行っていま

    Visdown - Markdownにグラフ機能を追加
  • md2googleslides - MarkdownファイルをGoogleスライドに変換

    MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 最近、Markdownファイルで作成してHTMLプレゼンに展開するソフトウェアが増えています。便利なのですが、ちょっとしたアニメーションを追加したいなど既存のプレゼンソフトウェアで最後の仕上げをしたいこともあるでしょう。 そこで使ってみたいのがmd2googleslidesです。MarkdownファイルをGoogleスライドに展開してくれるソフトウェアです。 md2googleslidesの使い方 変換したスライドです。日語も使えます。 背景画像を指定することもできます。 テーブル表示も行えます。 md2googleslidesでは他にも動画の埋め込みやコードの表示も行えます。Markdownを使ってコンテンツを作成し、後はmd2googleslidesでGoogleスライドに載

    md2googleslides - MarkdownファイルをGoogleスライドに変換
  • Kajero - JavaScriptがその場で実行できるドキュメントシステム

    MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Markdownを使うようになって、逆にその物足りなさを感じるのではないでしょうか。色が使えなかったり、装飾も限られたものしか使えません。その制限がちょうど良いのかも知れませんが、もっと高度なドキュメントにしたいという要望もあります。 しかしプログラマーであるならば制限されているそのものを使い続けるのではなく、自分で拡張だってできるはずです。今回はインタラクティブなドキュメントを実現するKajeroを紹介します。 Kajeroの使い方 こちらがドキュメントのページです。通常のMarkdown記法が使えます。 こちらが特殊な部分。コードが書いてあります。 右上の再生ボタンをクリックするとJavaScriptが実行されて結果が表示されます。 複数ある場合、変数が共有されます。 実行時間

  • AzerothJS - サーバサイドのコードを持たない静的サイトジェネレータ MOONGIFT

    GitHub Pagesを使えば手軽にWebサイトを公開できます。静的なコンテンツのみですが、ローカルでコンテンツを作ってアップロードするような使い方であればブログやプロジェクトサイトは十分に作れます。 今回はそんな静的サイトを生成するAzerothJSを紹介します。シンプルな作りで、カスタマイズ性が高いのが特徴です。 AzerothJSの使い方 デモサイトです。 ソースコードのハイライトもできます。テーマは幾つか用意されています。 AzerothJSは独自のサーバ機能は持っておらず、Pythonなどのワンライナーを使うように指定されています。そして、コンテンツはMarkdownで作成し、開発中はMarkdownをダイナミックに読み込んで表示しています。 サイトができあがったらgenerator.jsを実行し、HTMLファイルが生成される仕組みです。テンプレートなどもシンプルなので、カスタ

    AzerothJS - サーバサイドのコードを持たない静的サイトジェネレータ MOONGIFT
  • mathdown - 計算式が使えるMarkdown記法をサポートしたリアルタイムコラボレーションノート MOONGIFT

    Markdown記法は汎用的な一方、足りない機能の多さにストレスを感じることも少なくありません。せっかく皆が使えるようになってきた記法だけに、他の用途でも使っていきたいと思うはずです。 そこで元の記法を踏襲しつつ、自分で拡張してしまうと言う手があります。今回はMarkdown記法が使え、計算式も書けるmathdownを紹介します。 mathdownの使い方 mathdownはコラボレーションを重視しています。Wikiのように皆で計算式が書けます。 編集する場合は、数式の左側にキャレットを持っていって右に移動すれば元の文字列に展開されます。 画面中央にあった数式も文字列に展開されました。 mathdownはMathJaxの記法に則って作られています。また、コラボレーション部分にFirepadを使っており、リアルタイムコラボレーションを実現しています。学生、研究者などに向いたシステムと言えそう

    mathdown - 計算式が使えるMarkdown記法をサポートしたリアルタイムコラボレーションノート MOONGIFT
  • Crowi - MarkdownとWikiを組み合わせた組織用コミュニケーションツール MOONGIFT

    メモというのは大事なもので、蓄積されたメモは後々大きな意味をもってきます。そのためにも手軽に、かつ一カ所にまとめて書けるようになっていなければなりません。散在したメモは探すコストが大きく、役に立ちません。 会社であればメモはみんな一カ所に書きためるべきです。それによって知らなかった新しい知識に辿り着けます。それを可能にするのがCrowiです。 Crowiの使い方 まずログインします。 こちらがメモの画面で、ビューワーにあたります。 こちらはプロフィール画面。この画面も編集できます。 右上のアイコンをクリックすると新しいメモが作成できます。 編集画面です。Markdownを使います。画像のアップロードはドラッグ&ドロップでできます。 自動的にURLが変わって、プレビューも更新されます。 更新履歴も表示できます。 Crowiはグループで利用できるWikiエンジンで、ブラケット名も利用できます。

    Crowi - MarkdownとWikiを組み合わせた組織用コミュニケーションツール MOONGIFT
  • Editor - Web用のMarkdownエディタ

    MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 世の中、Markdownばかりになってきました。その効果として、コンテンツが増えたり、関連ツールも多数出てきています。特にMarkdownエディタについてはかつてのWikiのように多数の言語で実装されるようになっています。 今回紹介するEditorもその一つですが、単独で動くものではなくWebサイトに埋め込んで使うタイプのMarkdownエディタになります。 Editorの使い方 Editorのトップページです。 日語も問題なく書けますが、変換候補が表示されませんでした。 画像の埋め込みは ![](http://) が表示されるだけでした。 プレビューです。切り替えがアニメーションなのが格好良いです。 Editorはサイトの利用者にMarkdownコンテンツを作成してもらう時に便

    Editor - Web用のMarkdownエディタ
  • Boostnote - オンラインでシェアもできるMarkdownベースのメモ帳

    メモ環境は大事です。気がついた時にさっとメモをしておけば、後々見返すこともできます。かつメモ環境はなるべく一カ所に統一しておくのが大事です。個人的には適当なテキストファイルに書き込んでいます。 しかし個人的にBoostnoteに集中させようと思っています。それくらい使い勝手のいいソフトウェアです。 Boostnoteの使い方 メイン画面です。 フォルダ、メモ一覧そしてメモと3段階の構成になっています。メモにはタグがつけられます。 新しいメモを作成しました。 メモはMarkdownで記入できます。 編集時はAceエディタを使っているので見やすいです。 Boostnoteの面白いのはメモをシェアできる機能があることで、専用の7日間のURLが生成されます。ローカルでメモを書いて、必要があればオンラインで共有できます。検索機能も便利なのでぜひ使ってみてください。 BoostnoteはElectro

    Boostnote - オンラインでシェアもできるMarkdownベースのメモ帳
  • MDWriter - 多彩なエクスポートが可能なMarkdownエディタ

    MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 最近、Markdownエディタが数多く作られています。それぞれプラットフォームが異なっていたり、フレームワークが違うなど、一時期のWikiエンジンを思わせるくらい流行っています。 こうした中では数多くのエディタに触れて、自分に合っているものを選んでいきましょう。今回はMDWriterを紹介します。ブログやMarkdown以外のフォーマット出力が多彩なエディタです。 MDWriterの使い方 MDWriterはHTML5/JavaScript/CSSで作られています。まずメイン画面です。メニューも用意されています。 編集しているところ。右側にリアルタイムプレビューが表示されます。 PDF出力できます。ただし日語は文字化けしてしまいました。 ローカルのファイルを指定して読み込んだり、

    MDWriter - 多彩なエクスポートが可能なMarkdownエディタ