Corredor

ウェブ、プログラミングの勉強メモ。

2020-11-28 : このブログは2020年末をもって更新停止する予定です。
2021年以降は Neo's World (https://neos21.net/) で記事を公開していきますので、今後はコチラをご覧ください。
このブログの記事は2021年以降、Neo's World に順次移行していきます。元記事および本ブログは移行次第削除する予定です。

Markdown

Remark・Rehype で Markdown から HTML に変換してプレビューを確認できるオンラインエディタを作った

メインサイト Neo's World は、自作のビルドシステムでブログを配信している。Markdown で記事を書くと、Remark・Rehype プラグインを駆使して HTML 形式に変換して配信できるのだが、ローカル開発環境を用意せずとも簡単にプレビューできたらいいなと思い、…

Rehype プラグインで Markdown からキレイな HTML ドキュメントを生成する

Markdown から HTML にパースしてくれる、Remark・Rehype プラグイン。コレまでも色々なプラグインを紹介してきたが、生成される HTML のインデントなど整形されておらず、読みづらかった。また、html・head・body 要素などがイマイチで、素のままだと正しい…

Remark・Rehype プラグインで文書の見出しに自動で ID を振り目次リストを自動生成する

Markdown や HTML をパースして加工できる Remark・Rehype のプラグイン紹介。今回は見出しに id 属性を自動付与し、目次 (Table of Contents・ToC) を自動生成してくれるプラグインを紹介する。 Markdown から HTML にパースする際に見出し ID と目次を自動…

Remark プラグインを使って Markdown から Front Matter を抽出する

Markdown をパースして HTML に変換したりできる Remark。今回は Markdown ファイル中に書かれた Front Matter を抽出して利用できるようにする、 remark-frontmatter remark-extract-frontmatter というプラグインを紹介する。 Front Matter とは Remark プ…

Remark・Rehype を使って Markdown から HTML に変換する

Gatsby.js を使っていて、Markdown ファイルをブログ記事として投稿できる gatsby-transformer-remark というパッケージを使ってみた。 gatsby-transformer-remark | Gatsby プラグインを入れていくと、Frontmatter と呼ばれる YAML テンプレート部分を解釈…

iOS 版 Google Drive で Markdown が開けないので Notebooks というアプリに移動して閲覧する

iOS 版の Google Drive で、拡張子 .md (Markdown) のファイルをプレビューできない。中身はテキストファイルなのに、テキストファイルとしては表示してくれないようだ。 Google Drive から「ファイルのコピーを送信」という操作ができるので、Markdown ファ…

チートシートを検索・出力するコマンドラインツール「ch-sh」を作った

僕は自分用チートシートとして、よく Markdown ファイルにスニペットやコマンドなどを記載している。その Markdown ファイルたちが入っているディレクトリでよく grep するので、コマンド化してみた次第。その名も「ch-sh」。 GitHub - Neos21/ch-sh: チート…

Chrome で Markdown と JSON を見るためのオススメ拡張機能をそれぞれ紹介

Chrome ブラウザで Markdown ファイルを開いたり、JSON ファイルを開いたりした時に、良い感じにプレビューしてくれる拡張機能を紹介する。 Markdown Preview Plus Markdown の表示なら、「Markdown Preview Plus」という拡張機能が最適。テーマを変えられる…

技術文書を書く時のユルい TextLint・MarkdownLint ルールプリセット

自分が技術系の文書を Markdown で書く時に使っていた、TextLint と MarkdownLint のルールプリセットを紹介。ルールはまぁまぁユルめ。最後に作ったのが1年前ぐらいなので、少々古いかも。 TextLint オレオレ TextLint ルール集 · GitHub コチラの package.…

指定ディレクトリ配下の Markdown ファイルに含まれる NFD・NFC 文字を一括相互変換する

Windows ユーザと Mac ユーザが入り混じって、Markdown ファイルを書いていた時に起こった、俗に NFD 問題と言われるアレ。 Mac の Finder で表示されるディレクトリ名やファイル名は、「NFD」という形式で Unicode 正規化されている。平たくいうと、「ガ」…

Markdown の中で Markdown 記法を回避するための数値参照文字

マークダウンでテキストから電子書籍を作ろう作者: 柏原基規発売日: 2015/11/10メディア: Kindle版この商品を含むブログを見る Markdown 記法の説明なんかで、「コードブロックの書き方」をコードブロックで書いたりしたくなることがあるかもしれない。 そん…

Markdown ファイルを動的にパースして表示・別ファイルへの遷移もできる Angular アプリ「ngx-markdown-wiki」を作った

Markdown ファイルを動的にパースして表示し、別の Markdown ファイルへの遷移もできる Angular アプリ「ngx-markdown-wiki」を作った。Markdown ファイル同士の遷移ができるので、Markdown 製の Wiki が作れるかなー、という思いで、「Markdown Wiki」とし…

API Blueprint を利用して Markdown 形式で API 仕様書を作成する

WebAPI の仕様書を Markdown 形式で作成するための拡張言語として、API Blueprint というものが作られている。今回はコレを用いて、Markdown 形式で API 仕様書を作り、HTML 形式で出力してみる。 API Blueprint とは API Blueprint | API Blueprint GitHub …

Reveal.js を使って Markdown ファイルでスライドを作ってみる

Reveal.js というライブラリを使って、Markdown ファイルでスライド資料を作ってみる。 今回は機能を深くは掘り下げず、お試し環境を構築してみるところまで。 まずは Reveal.js の Git リポジトリを Clone し、必要なパッケージをインストールする。 $ git …

「.md」ファイルって何?Markdown (マークダウン) のおさらい

今更かもしれないが、Markdown をおさらいする記事を書いてみようと思う。最近フロントエンド界隈に飛び込んで、「.md ファイルって何やねん?」となっている初学者向け。 Markdown とは Markdown (マークダウン) とは、文書を記述するための軽量マークアッ…

HTML ファイルだけで Markdown を Wiki 風に表示できる「MDWiki」を試してみた

HTML ファイル1つだけで Markdown ファイルをパースして表示してくれる、MDWiki というツールを試してみた。 Markdown ファイルをパースして HTML 表示してくれるツールというと GitBook などがあるが、HTML ファイル1つだけという最強の手軽さが売り。早速…

Markdown の強調構文で使う「アスタリスク」と「アンダースコア」の違い

Markdown 記法の中で強調するための記号には2種類ある。アスタリスク * とアンダースコア _ だ。 **これで強調される** __これでも強調される__ これらの2つの違いと、なぜ2つあるのか、というところを調べてみた。 アスタリスクとアンダースコアの違い 「別…

VSCode の markdown.styles にローカルファイルをフルパス指定できなくなっていた

VSCode の設定 (settings.json) に、markdown.styles という項目がある。これまではココに以下のように記述すると、Markdown のプレビュー表示時に好きなスタイルを当てられた。 // Windows の場合、Mac の場合、file: プロトコルを付けた場合、いずれも緩く…

Markdown を Lint チェックできる「markdownlint」を試してみた

はじめてのMarkdown―軽量マークアップ言語の記法と使い方 (I・O BOOKS)作者: 清水美樹出版社/メーカー: 工学社発売日: 2014/05/01メディア: 単行本この商品を含むブログ (1件) を見る Markdown 記法は HTML パースしてプレビューするものだが、プレーンテキ…

Jenkins に入れて良かったプラグイン4選

Effective DevOps ―4本柱による持続可能な組織文化の育て方作者: Jennifer Davis,Ryn Daniels,吉羽龍太郎,長尾高弘出版社/メーカー: オライリージャパン発売日: 2018/03/24メディア: 単行本(ソフトカバー)この商品を含むブログ (1件) を見る Jenkins に入…

はてなブログに Markdown プレビュー機能があった…

はてなブログPerfect GuideBook[本/雑誌] / JOEAOTO/著ジャンル: 本・雑誌・コミック > PC・システム開発 > 入門書 > インターネット入門書ショップ: CD&DVD NEOWING価格: 1,706円 今更知った…。 参考:記事を書きながら表示を確認! 編集画面にリアルタイ…

GitBook を使ってみる

Web制作者のためのGitHubの教科書 チームの効率を最大化する共同開発ツール Web制作者のための教科書シリーズ作者: 塩谷啓,紫竹佑騎,原一成,平木聡著出版社/メーカー: インプレス発売日: 2014/11/27メディア: Kindle版この商品を含むブログを見る この1年ほ…

Google Drive 上で Markdown ファイルを閲覧・編集できる「StackEdit」

Google ドライブを使うことが増えてきたので、Google ドライブ上で Markdown ファイルを書きたいなーと思って調べたら良いアプリがあった。「StackEdit」というアプリだ。 Google ドライブで使用するには、Google ドライブ上で右クリックし、「アプリを追加…

はてなブログの Markdown で「この言語はどうやってシンタックスハイライトさせたらいい?」を考える

はじめてのMarkdown―軽量マークアップ言語の記法と使い方 (I・O BOOKS)作者: 清水美樹出版社/メーカー: 工学社発売日: 2014/05メディア: 単行本この商品を含むブログ (1件) を見る はてなブログの Markdown を使っていて、「この言語はどうやってシンタック…

はてブロの Markdown 記法でコードを綺麗に書く (シンタックスハイライトさせる)

さきほど書いた記事でスタイルシートをこんな風に見せたけど、 .editor, atom-text-editor::shadow { .comment { font-style: normal; } } これをやる方法。 neos21.hatenablog.com Markdown 記法とか知るまでは「どこのブログも似たようなシンタックスハイ…