Visual Studio Code + Markdown Preview Enhancedはチームでデファクト化したいMarkdown環境だ！、と思う�(2017/10月時点) - Qiita
Visual Studio Code + Markdown Preview Enhancedはチームでデファクト化したいMarkdown環境だ！、と思う�(2017/10月時点)MarkdownエディタVSCodeVisualStudioCode 0.注意書き 筆者の本稿での意図はエディタ宗教論争を巻き起こすことではありません。「世の中では、これくらいのことが出来るようになってきている」とご参考にしてただくことが本稿の狙いです。それによって何かのお役に立てれば幸いだなと思っています。 皆さんは自分の使いやすい、皆さんの用途やプロジェクトの環境をにあったエディタを使用していただければとお断りしておきます。 1.Markdown環境について Markdwonは以前に書いたように今後の文書生産性を変えていく可能性のあるツールの一つです。Markdownのメリットは次の点だと思います。 1.1.M
MarkDownで書いたファイルを置くだけでWiki化できるMDWikiを導入してみた。 - Qiita
MarkDownファイルを書くだけで簡単にWiki化できるMDWikiを導入してみました。 日本語情報が少なかったことと、恐ろしく便利なのにあまり日本で使われていなさそうだったので書いてみました。 情報共有Wikiを作りたいけどDB用意したくないとか、簡単で軽量なwikiを求めている人に向いています。 MDWikiの特徴 ・3MB程度と軽量 ・JavaScriptだけで動く ・DBを使用しない ・スマホのページビューに対応している ・記事更新がMarkDownファイルを配置するだけで簡単 ・MarkDownなのでQiitaからのデータ移行も簡単 ・GitHub／GoogleDrive／Dropbox／Disqus／facebook／twitterなどとも連携できる。 ・特にGoogleアカウントでグループ管理していてGoogleドライブを利用しているような組織にはお勧め ダウンロード ht
GitHub製エディタAtomのMarkdownリアルタイムプレビューの仕様 - memorandum
GitHub製エディタAtomのソースコードがMIT Licenseで公開されたので久しぶりに使ってみたところ、以前はできなかったMarkdwonファイルのリアルタイムプレビューができるようになっていました。 ここでは、AtomのMarkdownリアルタイムプレビュー機能の現時点での仕様やその調べ方を簡単にまとめます。 仕様の調べ方 Atomの機能はコア部分を除くとパッケージと呼ばれる取り外し可能なモジュールの集合体となっています。Vimにおけるプラグインのようなものですが、基本的な機能もパッケージとして実装されているのが特徴です。 Markdownのリアルタイムプレビュー機能はmarkdown-previewというパッケージが担当しています。したがって、このパッケージのコードを見ると仕様がわかります。 atom/markdown-preview - GitHub Markdownリアルタ
[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
markdown記法でリンクをtarget="_blank"にする - エンジニアをリングする
はてなブログデビューと共にマークダウン記法デビューも果たしたのですが、なかなかいい感じ。 しかし、[アンカーテキスト](URL)でリンクがはられるのはいいのですが、target="_blank"にして別タブで開くにはどう書くんだろ？と調べたところ、いくつかググったらその場合はHTMLで書いてね！とのこと・・・ せっかくタグなしで書いてるのでタグなしで通してみたいです。 というわけで調べた結果、以下のコードをはてなブログのヘッダーにいれることにしました。 <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script language="JavaScript"> $(document).ready( function () {
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にしてあげるだけ。
pdf-markdown-annotator – PDFファイルにMarkdownを使ってマーキング
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 最近は説明書や書類などでPDFを使うのが当たり前になっています。さらに電子書籍も一部はPDFで配信されています。そうしたドキュメントを見た時にはマーカーで印をつけておきたいと思うこともあるでしょう。 pdf-markdown-annotatorはまさにそうした用途にぴったりなソフトウェアになります。NW.jsを使ってPDFファイルにマーキングできるソフトウェアになります。 pdf-markdown-annotatorの使い方 メイン画面です。左側にPDFが表示されています。 マーキングすると、右側にMarkdown形式でメモされます。 ページ数や行数、ズームなどのパラメータもリンクとして保存されています。 左側にサムネイルを出すこともできます。 pdf-markdown-annot
ブラウザで動く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
恋に落ちるエディタSublime TextはAtomにユーザーを寝取られる
Atomとは GitHub製のテキストエディタでSublimeのようにパッケージによる機能拡張が可能。以前は招待制だったが現在は公式サイトで無料でダウンロード可能。 https://atom.io/ Atomは無料、Sublimeは有料 Atomは無料で利用できるがSublime Textは有料。ダウンロードすればどちらも登録なしで利用できるがSublime Textはシェアウェアなので無料で使い続けていると定期的に購入依頼ダイアログが表示される。 Sublimeの価格 2014年12月14日現在の価格は70米ドル。日本円だと円安のため約8300円となりテキストエディタとしては高額。 AtomとSublime Textの違い 基本的にSublime Textにある機能はAtomにもほとんど実装されており、キーボードショートカットも違いがあまりないため乗り換えても違和感なく使える。 Atom
多様なフォーマットに対応！ドキュメント変換ツールPandocを知ろう - Qiita
追記（2020.4.19） Pandoc User’s Guideを日本語に全訳しました。 よろしければご参照ください。 新しい翻訳をプレリリースしました！（翻訳途中の部分もあります） Pandocユーザーズガイド 日本語版 [2.7.2] — 日本Pandocユーザ会 2019.02.21 ドキュメント 旧日本語版：Pandoc ユーザーズガイド 日本語版 はじめに 今回は、ドキュメント作成Tips Advent Calendar 2012の1日目 （マインドマップから全てを紡ぎ出す - XMind+Pandocのドキュメント作成術 -） で少し紹介したPandocというツールについて、もう少し深く掘り下げて紹介したいと思います。 MarkdownとかreStructuredTextとか、流行ってますよね いわゆる軽量マークアップ言語が最近流行しています。特にMarkdownは猫も杓子も
ブラウザ上でMarkdownを安全に展開する - 葉っぱ日記
不特定のユーザーが入力したMarkdownをブラウザ上でJavaScriptを使ってHTMLに変換するという場面においては、JavaScriptで変換してHTMLを生成するという処理の都合上どうしてもDOM-based XSSの発生を考えないわけにはいかない。かといって、MarkdownをパースしHTMLを生成するという処理すべてをXSSが存在しないように注意しながら自分で書くのも大変だし、markedやmarkdown-jsなどの既存の変換用のJSを持ってきてもそれらがXSSしないかを確認するのは結構大変だったりする。 そういった場合には、Markdownから生成されたHTMLをRickDOMを通すことで、万が一HTML内にJavaScriptが含まれていたとしてもそれらを除外し、許可された要素、許可された属性だけで構築された安全なHTMLに再構築することができる。さらに、そうやって生成
redmineでGitHubのMarkdown記法を利用する - Qiita
Redmine textileのフォーマットはいやだという人のために、いま流行りのGithub Markdown形式でredmineのwiki, チケットを編集するプラグインRedmine Redcarpet Markdown Formatterを紹介する。他にも似たプラグインはあるらしいけど、Githubとの互換性と高速性が特徴とのこと。 インストール Redcarpet Formatterの動作にはRedcarpet 2.0.0b5以降のバージョンが必要とのことなので、バージョン指定でgemを使ってインストールする。 次に以下のサイトから、アクセスurlをコピーしてプラグインディレクトリにコピーする． https://github.com/alminium/redmine_redcarpet_formatter 注意：Redmine Markdown Formatterプラグインが既に
Markdown 記法を他の軽量マークアップ言語と見比べてみた
以前に書いた Markdown の良さについて考えてみた の中で 整形済みテキスト (pre)、リスト (ul,ol,li)、強調表現 (em)、コード (code) などの表現に関して Markdown は少ない文字列でスッキリ書ける ようになっており、RD、Textile、Pukiwiki、Trac Wiki に比べてプレーンテキストとしては読みやすいです。 と述べましたが、せっかく調べたので各種記法の具体例を列挙し、個人的な感想をば。 目次 記法に関して参考にしたサイト Markdown RD (Ruby) Textile (Redmine) Pukiwiki Trac Wiki まとめ 記法に関して参考にしたサイト Markdown 【日本語訳】 RD (Ruby) Textile (Redmine) Pukiwiki Trac Wiki Markdown # Title ## S
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
MDwiki - Markdown based wiki done 100% on the client via javascript
MarkdownのTable内で改行を入れる - Qiita
http://knsv.github.io/mermaid/
GitHub - markedjs/marked: A markdown parser and compiler. Built for speed.
