Intro 本サイトは自作の Markdown ビルダを使っていたが、色々と気に食わない部分があったのでフルスクラッチで作り直し、それにともなってサイトの刷新を実施した。 必要だった要件や、意思決定を作業ログとして記す。 Markdown 本サイトは、一般に使われている Markdown -> HTML の変換結果では要件を満たせないため、最も都合の良い AST を吐く Kramdown のパーサから AST だけを取得し、それを Traverser でカスタマイズしてから自前でシリアライズしていた。 その実装を、微修正を繰り返しながら、継ぎ足し継ぎ足しで 5 年くらいイジってきたので、そろそろ自分がブログを書く上での要件も固まっており、記事中の Markdown のスタイルも固定してきた。 一方、 Kramdown の実装が原因でどうしてもワークアラウンドが必要だった部分に、フラストレー
記事の種類 はてなブログの使い方、はてなブログの書き方 SEO対策 関係あり SXO対策 やや関係あり 難しさ 超かんたん 重要さ 超重要 次のような方にオススメ！ はてなブログの引用を使いたい はてなブログの引用の使い方を知りたい はてなブログの引用て、どんな機能？ ぴっぴ（@hiyoko_no_pippi）も、はてなブログの引用の使い方が全然わかりませんでした💦 そんなぴっぴもはてなブログの引用を使えるようになり、今では自他共に認める「はてなブログ使い」になりました。 そのような訳で今回は、はてなブログの引用の使い方について紹介します。 引用機能を使うと、次のようなメリットを期待できますよ！ 引用機能に期待できること トラブル回避 リンクの増加 重複コンテンツの回避 こんなメリットを期待できるので、今回の記事は清く正しくブログ運営をしたい方や少しでも検索流入を増やしたい方はにオススメ
Nuxt.js製のWebサービスにmarked+highlightjsでMarkdownで書いた読書メモを表示できるようにしてみた - Qiita
Nuxt.js製のWebサービスにmarked+highlightjsでMarkdownで書いた読書メモを表示できるようにしてみたCSSJavaScriptMarkdownVue.jsNuxt 先日、開発中の積読用の書籍管理アプリの新機能として、 Markdownで書ける読書メモを追加したので、その時の備忘録。 ✅読書中のメモが残せる読書メモ機能✨ 読書メモを残せる機能を追加しました‼️ マークダウンで書けて、全メモをクリップボードにコピーできちゃいます😊 はてなブログなどマークダウンが使えるなら、コピペで記事も書くことも😍 (続く pic.twitter.com/K3pjr4noVo — めもらば@公式 (@MemoryLoverz) September 1, 2019 全体の流れ やりかたとしては、こんな感じ 1. Markdownの文字列をmarkedを使ってHTML化 2. <
Prettier 2.0 “2020” · Prettier
Better defaults, a better CLI and better heuristics. Oh, and TypeScript 3.8. After a long and careful consideration, we decided to change the default values for the trailingComma, arrowParens, and endOfLine options. We made the CLI more intuitive. And we've finally dropped support for Node versions older than 10, which had grown to become a huge maintenance hassle and an obstacle for contributors.
After learning a little bit more about web accessibility last year I had been exploring some of the less common HTML elements, and making changes to this website, like wrapping the text of the posts on this blog in <article> tags and adding a <main> tag in the website’s layout templates (this website is built using Eleventy). I had previously done some work to make sure that <figure> and <figcapti
どうも！フジグチです！ ブログのカスタマイズを進めていく中で一度は使いたくなるのが、「アイコン」ですよね。 はてなブログではデフォルトで読み込まれている「アイコンフォント」があります。 例えば とか とか。 これをCSSで装飾していくと、フォローボタンやシェアボタンを作ることができます。 はてなブログではこうしたアイコンフォントが125種類用意されています（2021/6/7 時点） カスタマイズを公開している都合上アイコンフォントをよく使うのですが、自分で用意したほうが使い勝手が良さそうなので、今回まとめてみました。 この記事の特徴 アイコンを大きく表示しているので探しやすい アイコンをクリックしてコードをコピーできる 使いたい形式に合わせてコードも付与できる アイコンフォントの使い方 HTMLで使用する方法 大きく表示したい場合 見たまま編集で使用する際の注意点 CSSの疑似要素で表示す
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました あらかじめ設定した処理を実行する、いわゆるタスクランナーは多数あります。GulpやGradleなどが有名です。多くのタスクランナーはシステム向けで、数ヶ月後にメンテナンスするのが困難になったりします。 今回紹介するmaskはMarkdownファイルを使ったタスクランナーです。コメントも使えたりして、使い勝手が良さそうです。 maskの使い方 ファイルの例です。見出し部分が機能になります。 mask build のように指定します。 # Tasks For My Project <!-- A heading defines the command's name --> ## build <!-- A blockquote defines the command's descripti
はてなブログ｜無料で使える100種類超のアイコンフォント素材の使い方 - Simple Life Navi
こんにちは。シンプルライフナビです🌿 ブログでデザインアイコンを使ってみたいと思ったことはありませんか？ 私のブログでは無料で使えるアイコンフォントを一部利用しています。 そこで、はてなブログユーザーが標準で使える、はてなブログのアイコンフォントの使い方を記事にしました。 この記事のオススメ対象 はてなブログユーザーにオススメです。 はてなブログでは、外部のフォントを読み込まなくても標準で使えるアイコンフォントが備わっています。 ぜひ使ってみましょう！ 例えば、このページの左上の方にある「 トップ」というところや日付の前の時計マークなどにアイコンフォントを使用しています。 アイコンがあると文字だけよりもイメージしやすく、わかりやすく感じますよね😄 ブログのデザインカスタマイズや表現の修正をしようとお考えの場合などに、参考にしていただけると幸いです。 はてなブログユーザーならアイコンフォ
[Markdown] An option to highlight a "Note" and "Warning" using blockquote (Beta) · community · Discussion #16925
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
![[Markdown] An option to highlight a "Note" and "Warning" using blockquote (Beta) · community · Discussion #16925](https://cdn-ak-scissors.b.st-hatena.com/image/square/73d9cbcd8e6a6873dc78fdebeb9e3642477c5e0b/height=288;version=1;width=512/https%3A%2F%2Fopengraph.githubassets.com%2F439515db1ee9d96bc51295e63be4f0685a39be17e91bcae2011dfbc608c93a51%2Forgs%2Fcommunity%2Fdiscussions%2F16925)
Zenn が Web Components を使って tweet を表示するようにしていたので、見習ってこのサイトにも取り入れてみた。 Web Components を利用した Zenn マークダウン部分の改善について 🔗 zenn.dev ZennEditor 内のコード 🔗 github.com 比較 何が良いのか？ 埋め込みコードの良くないところ <blockquote class="twitter-tweet"><p lang="ja" dir="ltr">ほぼだいたい完全に理解した</p>— miyaoka / STUDIO (@miyaoka) <a href="https://twitter.com/miyaoka/status/1346720500387438593?ref_src=twsrc%5Etfw">January 6, 2021</a></bloc
【はてなブログ】ブログアイコン、Webフォント一覧（124種類）使い方、表示されない時の対処法 - バンビの初心者ブログ教室
はてなブログで標準で使えるアイコンフォント（Webフォント）とその使い方を紹介します。 ↓↓これぜんぶ！ダウンロードしなくても使えます！！ グローバルメニューや、ブログ中のちょっとしたポイントなどを示したい時にアイコンを使うと目立ちますよね。 ポイントを目立たせたい時 ↓↓ ポイント スマホのボトムメニュー ↓↓（ボトムメニューのCSSはこちら） SNSのシェアボタンなどをつくるのにも使えます！ この記事では、上記のようなWebアイコンをはてなブログの中で使う方法やコピペでできるコード、また上手く表示されない場合の対処法などを紹介しますので、ぜひご参考にしてください。 アイコンは、Font Awesome などを外部から読み込む方法もありますが、はてなブログでは120種類ほどのオリジナルのWEBフォントをデフォルトで読み込んでいます。 これらのフォントであれば、外部から読み込むよりページが
[Markdown] An option to highlight a "Note" and "Warning" using blockquote (Beta) · community · Discussion #16925
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
![[Markdown] An option to highlight a "Note" and "Warning" using blockquote (Beta) · community · Discussion #16925](https://cdn-ak-scissors.b.st-hatena.com/image/square/674b65659392887a52a687d954834a0a61916847/height=288;version=1;width=512/https%3A%2F%2Fopengraph.githubassets.com%2F386e7628204727633031c976c152b8d412e10010e20baefccc52c417b267069f%2Forgs%2Fcommunity%2Fdiscussions%2F16925)
本記事ではVivliostyle用のMarkdownとして開発されている、VFM（Vivliostyle Flavored Markdown）について解説します。 MarkdownとGFM、VFMの関係 構造化された文書を記述するためのマークアップ言語としてHTML/XMLがあります。これらは優れた表現力を持つ反面、記法として手動で書くには煩雑です。この課題を解決するための簡潔なマークアップ言語として、Markdownが登場しました。 以下はHTMLとMarkdownで同じ文書を記述した比較例です。 HTML <h1>Title</h1> <p>The quick brown fox jumps over the lazy dog.</p> Markdown # Title The quick brown fox jumps over the lazy dog. MarkdownはHTM
【ブログカスタマイズ】「はてなブログ」のアイコンフォントの種類・使い方を解説｜グローバルメニューにおすすめ - redoブログ
今回は「はてなブログ」でデフォルトで使えるとても便利な”アイコンフォント”の表示方法を紹介したいと思います。 アイコンフォントを使いこなすとはてなブログの見た目がオシャレになり、見栄えもよくなります。 毎年はてなブログで使えるアイコンフォントは増えており、昨年から「DAZN」など6種類増えて、"合計123種類”になっています。 私のTOPページのグローバルメニューに以下の様なアイコンフォントを追加しています。 今回は最もカンタンな”はてなブログのアイコンフォント”の使い方と種類を紹介します。 アイコンフォントの使い方 アイコンフォントのサイズを変えたい場合 はてなブログアイコンフォント一覧 まとめ アイコンフォントの使い方 このアイコンフォントを使う時は、タグを使って、”HTML”上で下記のように記入します。 <i class="クラス名"></i> すると上の様に”クラス名”にあわせて色
はてなブログで使えるアイコンフォント一覧【全122種】2020年9月時点 - Takeuchi BLOG
・はてなブログで使えるアイコンフォントの使い方を知りたい。 ・はてなブログで使えるアイコンフォントの一覧を見たい。 こういった疑問に答えます。 本記事の内容 はてなブログで使えるアイコンフォント(blogicon)の一覧をまとめました（全122種） はてなブログのアイコンフォント(blogicon)の使い方 この記事を書いている私は、2006年から始めて、アフィリエイト歴は13年ほど。 当ブログの他にも複数ブログを運営していて、毎月コンスタントに収益が発生しています。 こういった私が、解説していきます。 本記事の内容 はてなブログのデフォルトで使えるアイコンフォント(blogicon)について はてなブログで使えるアイコンフォント(blogicon)の一覧まとめ（全122種）【2020年9月時点】 はてなブログのアイコンフォント(blogicon)の使い方 HTMLの中で、iタグを使う場合
2023年11月21日 追記: 初回投稿時（2022年6月）の内容を，2023年11月現在の内容に更新しました はじめに Qiitaの:::noteみたいな強調表示とは，上のような表示（コールアウト）のこと Qiitaでは :::note infoや :::note warn などと入力すると強調して表示ができる GitHubでの対応状況 2023年11月現在，5種類の表示が利用できる [Markdown] An option to highlight a "Note" and "Warning" using blockquote (Beta) というわけで試してみた． 使い方 IssueなどのMarkdownに，以下のような記法で書き込む > [!NOTE] > こんな感じに書き込むと強調表示される > [!TIP] > `TIP` の例 > [!IMPORTANT] > `IMPORT
マークダウンをhtmlにコンバートする方法を探していた。pipで入れられるmarkdownがよさそうなので少し試してみる。 pyenvで入れた環境 $ python --version Python 3.6.5 $ pip --version pip 19.1.1 from /Users/ito_masakuni/.pyenv/versions/3.6.5/lib/python3.6/site-packages/pip (python 3.6) $ pip install markdown Collecting markdown Downloading https://files.pythonhosted.org/packages/c0/4e/fd492e91abdc2d2fcb70ef453064d980688762079397f779758e055f6575/Markdown-3.1.
Markdown Syntax Cheatsheet This is a quick reference for Markdown syntax. A more complete guide can be found on GitHub. Basic Formatting Bold: **Bold** Emphasized: *Emphasized* Strikethrough : ~~Strikethrough~~ Horizontal rules: --- (three hyphens), *** (three asterisks), or ___ (three underscores). Headings All heading levels (e.g. H1, H2, etc), are marked by # at the beginning of a line. For exa
GitHubに追加された警告記法が便利だったので実装してみた。 ↓こんな感じ > [!NOTE] > Highlights information that users should take into account, even when skimming. --- > [!TIP] > Optional information to help a user be more successful. --- > [!IMPORTANT] > Crucial information necessary for users to succeed. --- > [!WARNING] > Critical content demanding immediate user attention due to potential risks. ---- > [!CAUTION] > Negative p
AstroでLPを書き直した 代表のkomiです。 つい先週くらいにLPをNext.jsで作り直したというエントリーを書いたのですが、それをメンバーに見せたところ なんでNext.js使ったの？時代はAstroだよ？ というツッコミをもらいました。 そこからAstroについて調べてみたところ なんだ、Next.jsじゃなくてAstroでいいじゃん となったので6時間程度の突貫工事でゼロから書き直しました。 Astroとは何か もうすでに一部の技術情報にアンテナを張っている人はご存知ですが、Astroは以下のような思想で設計されたフロントエンドフレームワークです。 静的サイトに特化 なるべくJavaScriptを排除してピュアなHTMLを配信 とにかく高速化 感覚としてGatsbyに近いプロダクトとなります。 こうした特徴はReactやSvelteといったフレームワークに依存しない独立したプ
gatsby-transformer-remark empowers developers to translate Markdown into HTML to be consumed via Gatsby’s GraphQL API. Blogs and other content based sites can highly benefit from functionality enabled with this plugin. With this plugin, authors of content for the site don’t need to worry about how the site is written or structured but can rather focus on writing engaging posts and content! In cert
【2021年最新版全116種類】初心者でも超簡単！はてなブログのアイコンフォントの使い方。<i class>で表示できない方も。【コピペOK・CSSいらず】 - 30分集中のすゝめ
メニューや記事の中に「」こういうアイコンがあるの、見たことありますよね？ これ、とっても簡単に使えるので、是非使い方を覚えてブログに彩りを加えてみてください♪ 初心者でも分かりやすい解説を心がけるので、是非最後までご覧ください！ １．アイコンフォント の使い方 使い方はとっても簡単。 記事の「HTML編集」をクリックして、アイコンを挿入したいところに <tt class="クラス名"></tt> を挿入するだけです！ 「クラス名」のところにはお好きな種類のアイコンを入れます。 例えば、家のマーク「」が入れたければ <tt class="blogicon-home"></tt> とすればOKです。 クラス名は最後に一覧を載せているので、好きなものを選んでください。 ２．サイズを大きくする方法 サイズが小さくて見にくい！という場合には大きくして表示するやり方があります。 クラス名の後に半角スペ
Next.js + MDX でブログを書いています - HelloRusk Official Website
Next.js Advent Calendar 2019 9日目の記事です。 今年の2月に Next.js + MDX でブログシステムを構築しました。 あなたが今見ているこのブログは Next.js 製です。 リポジトリは以下の通りです👇 HelloRusk/blog: Tech Blog 日本においては Next.js でブログやポートフォリオを作成している人は GatsbyJS などと比較するとあまり居らず、ましてや Next.js + MDX でブログを書いている人は珍しいという状況かと思います。 私もこのブログを作り始めた頃は、日本語の記事がほぼ皆無という中で、海外の流行の最先端を追うような気持ち（？）で英語のドキュメントやリポジトリを読み漁ったものでした。 ややマイナーな Next.js + MDX ですが、私はとても気に入っています。 Next.js は（他の Now など
Astro is a brand new framework for building websites. To me, the big thing is that it allows you to build a site like you’re using a JavaScript framework (and you are), but the output is a zero-JavaScript static site. You can opt-in to client-side JavaScript as needed, and there are clever options for doing so. Notably, the learning curve is somewhat flattened by the fact that it supports componen
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
自作 Markdown プロセッサベースの blog.jxck.io v2 リリース | blog.jxck.io
はてなブログの引用の使い方を紹介！ - ぴっぴのはてなブログでアフィリエイト
A Blog Post With Every HTML Element
はてなブログで使えるアイコンフォント全125種-コードを追加してワンクリックでコピー！ - フジブロっ！
mask - Markdownファイルを使ったタスクランナー
埋め込みTweetをWeb Componentsで描画するようにした
Vivliostyleに特化したMarkdown - VFMの使い方 | gihyo.jp
GitHubでQiitaの:::noteみたいな強調をする - Qiita
Pythonでmarkdownをhtmlにコンバートする - Qiita
Free Markdown to HTML Converter
はてなブログのMarkdown記法で警告記法(アラート記法)を入れてみた - ぶていのログでぶログ
公式ページを更にAstroで書き直しました
Creating a Remark Transformer Plugin | Gatsby
A Look at Building with Astro | CSS-Tricks