WordPressでシンタックスハイライトするのにPrismを使う

元々プラグインでシンタックスハイライトさせていたのですが、動作が重かったり表示が一昔前っぽくなってしまうのでモダンな表示になるものを探していました。今回はPrismを使って記事中のコードのシンタックスハイライトをさせてみることにしました。Prismを使ったプラグインもあるようですが今回はプラグインを使わずテーマに組み込みました。

Prismで対応している言語のリストはこちらです。大抵の言語はカバーできています。 続きを読む

Gatsbyでfaviconを変更する方法

Gatsbyでページを作成するとデフォルトのfaviconが割り当てられているので、これを自作のfaviconに変更しました。

faviconはブラウザのタブなどに表示されるアイコンです。

続きを読む

gatsby-imageで画像を表示する方法

Gatsbyを使って画像を表示する方法です。dev.toに参考になる記事があったのでこちらをもとに設定しました。

続きを読む

Gatsby + netlifyでフォームを送信する方法

netlify上でGatsbyを使ってフォームを作る方法を調べたのでメモしておきます。
続きを読む

WordPressでテーマのURLを表示させたい場合

WordPressのテーマディレクトリ(フォルダ)の中にJavaScriptや画像を置いて表示させたい場合に、テーマ内でテーマのURLを自動的に表示できると便利です。

続きを読む

Chromeでハードリロードする方法

Google ChromeでWeb開発する際にいつまでもキャッシュが残って更新内容が表示されない場合があります。このような場合に便利なのがハードリロードです。
続きを読む

【JavaScript】ES6でjQueryプラグインをimportした際にjQueryのエラーが出る場合の対策

jQueryをES6でimportしているのにもかかわらず、プラグインをimportしたときにjQueryのエラーが出る場合の対策です。

Uncaught ReferenceError: jQuery is not defined

自分のケースではfeatherlightというプラグインをrequireして実行するとChromeで上記のエラーが出ました。
続きを読む

【Visual Studio Code】対応する括弧(カッコ)に自動で色を付けるExtension

Visual Studio Codeでコード中の対応するカッコ { } ( )に色を付けるエクステンションがあるのでメモしておきます。

Bracket Pair Colorizer からダウンロードまたは、VSCodeのEXTENSIONSでBracket Pair Colorizerを検索してインストールできます。

こんな感じでペアになるカッコに同じ色がつきます。

また、以下の言語に対応しているようです。

– c
– clojure (partial, wip)
– cpp
– crystal
– crystal
– csharp
– css
– dart
– go
– html
– java
– javascript
– javascriptreact
– less
– lua
– php
– powershell
– python
– r
– ruby
– rust
– scss
– sql
– swift
– typescript

に対応しているようです。

JavaScriptでInternet Explorer 11を判定する

JavaScriptでInternet Explorer 11を判定するときの書き方をメモしておきます。


const ua = navigator.userAgent;
if(ua.indexOf('Trident') !== -1) {
//IE 11のときの挙動
}

判定条件がMSIEではなくTridentになっているところがポイントです。

jQueryでHTMLファイル内にあるリンクのリストを作る

HTMLのサイトマップなどからリンクを抜き出して一覧を作る方法です。
URLのリストなどをExcelで作りたいときなどに便利です。

続きを読む