【Node.js】Markdown内のimgタグの画像の大きさを変える
662 語
3 分
【Node.js】Markdown内のimgタグの画像の大きさを変える
はじまり

135ml
今回は、Markdownの中にある画像のサイズを変えるツールの紹介します。

リサちゃん
沢山画像を貼っててそいつらのサイズをまとめて変えるとなると、手作業だと大変だもんねえ。
今回作った処理
今回は、README.md内のimgタグで記載された画像のサイズを変更する処理を作成しました。処理の実行前と実行後は以下になります。
実行前

実行後(大きくなった)

処理の流れ
ソースはこちらになります。
image-scale.js:
import path from 'path';import url from 'url';
import { Command } from 'commander';
import * as methods from './lib/lib-methods.js';
try { (async() => { const commander = new Command(); commander.option('-c, --config-yaml <type>', 'file name for config with yaml').parse(process.argv); console.log(commander);
const yamlFileName = String(commander._optionValues.configYaml); console.log(`image-scale.js: yamlFileName is "${yamlFileName}"`);
const __dirname = path.dirname(url.fileURLToPath(import.meta.url)); const configByYaml = methods.loadYamlFile(path.join(__dirname, yamlFileName)); console.log(configByYaml);
const sourceMdFileName = configByYaml.sourceMarkdownFileName; const lines = methods.getTextLines(sourceMdFileName); console.log(lines);
const imageArea = configByYaml.imageArea; const imageSizeEmAfter = configByYaml.imageSizeEmAfter; methods.writeImageScaling(lines, sourceMdFileName, imageArea, imageSizeEmAfter) console.log(methods.getTextLines(sourceMdFileName)); })();} catch (error) { console.error(`Execute Step 1:${error}`);}この処理の流れは、以下になります。
- 引数に貰ったyamlファイルからこの処理に必要なコンフィグ情報を取得する。(
console.log(configByYaml);までの部分) - yamlファイルで取得した更新対象のファイルの全文を取得する。(
console.log(lines);までの部分) - 更新対象のファイルの投稿部分の表示だけ書き換える。(最後らへん)
1. 引数に貰ったyamlファイルからこの処理に必要なコンフィグ情報を取得する。
コンフィグ情報は以下のファイルの中身です。
imageSizeEmAfterでサイズを指定します。emで指定します。そして、この場合だと、README.mdの中に<!--[START IMAGE LIST]-->と<!--[END IMAGE LIST]-->を記載すると、その間に投稿した画像のサイズが更新されます。
configOfImageScaler.yml:
imageSizeEmAfter: 30.2sourceMarkdownFileName: README.mdimageArea: start: <!--[START IMAGE LIST]--> end: <!--[END IMAGE LIST]-->2. yamlファイルで取得した更新対象のファイルの全文を取得する。
ファイルの全文を改行区切りで配列として取得します。
3. 更新対象のファイルの投稿部分の表示だけ書き換える。
<img ...>を検知して画像のサイズを変更します。詳しいソースはこちらにありますので、興味ありましたら見てみてください。
Waiting for api.github.com...
GitHub Actionsで定期更新する
./node_modules/feed-fetcher/bin/runImageScale --config-yaml=../../configOfImageScaler.ymlの部分で投稿した記事の部分を更新しています。
name: Update README for RSS feed
on: workflow_dispatch: schedule: - cron: '0 0 * * *'
jobs: updateFeed: runs-on: ubuntu-latest steps: - name: apt update run: sudo apt update
- name: Checkout uses: actions/checkout@v2
- name: node set up uses: actions/setup-node@v2 with: node-version: '16.13.1'
- name: Confirm version of node and npm run: | node -v npm -v - name: Install feedFetcher run: npm install https://github.com/Landmaster135/feed-fetcher
- name: run feedFetcher run: | chmod 777 ./node_modules/feed-fetcher/bin/* ./node_modules/feed-fetcher/bin/runFeedFetch --config-yaml=../../configOfFeedFetcher.yml ./node_modules/feed-fetcher/bin/runImageScale --config-yaml=../../configOfImageScaler.yml
- name: git setting run: | git config --local user.email "52403447+Landmaster135@users.noreply.github.com" git config --local user.name "Landmaster135"
- name: git commit run: | git log -1 git add README.md git diff --cached --quiet || (git commit -m "Update feed snippet" && git push origin main)おしまい

135ml
とまあ、こんなところだな。

リサちゃん
なるほどなあ〜。あ、昼飯はカツ丼にするか?

135ml
いや、寿司が食いてえ。
以上になります!
記事を共有
この記事が役に立ったなら、ぜひ他の人と共有してください!
【Node.js】Markdown内のimgタグの画像の大きさを変える
https://endorphinbath.com/posts/nodejs-markdown-scale-image/ 【Markdown】mermaid.jsのコードを変えて描画の変化を観察してみた
【Node.js】GitHub ActionsでREADME.mdに投稿した記事のリンクを表示する(FirebaseでCORS対応)
関連記事 スマート
1
【JavaScript】実行中の関数自身の関数名を取得する
Code 実行している関数やメソッド自身の名前を取得する方法を紹介します。この方法は、その関数名を取得する関数を別の関数から呼び出してもらわなければなりません。thisに関数をバインドする必要があるためです。その呼び出し方の種類を掲載しています。
2
【JavaScript】Errorタイプのオブジェクトかどうかを判定する
Code JavaScriptで渡した値がErrorオブジェクトかどうかを判定する関数が見つからなかったので、僕が書いたものを紹介します。
3
【JavaScript】数値を0埋めされた文字列として加工する
Code JavaScriptで、IDなどを採番する時に0埋めした数値が欲しい時があります。その時に利用できるスニペットを紹介します。
4
【P5.js】描画したものの比率が歪んでいるときに対処したこと
Code P5.jsを描画させた時に縦横の比率がおかしくなる現象が起きたので、その回収までの過程を記載します。
5
【Node.js】GitHub ActionsでREADME.mdに投稿した記事のリンクを表示する(FirebaseでCORS対応)
Code Zenn、Qiita、ブログ、noteに投稿した記事のURLをREADM.mdに掲載するアプリを作成しました。このアプリを参考にして自分のGitHubのプロフィールページをカッコよくしてみましょう!GitHub ActionsやFirebaseを題材にしています。
ランダム記事 ランダム