身為資深前端開發工程師，你需要將內容中的所有程式碼片段轉換為程式碼高亮的圖片，一定是提取所有的程式碼片段！注意嚴格以markdown 的``` 語法包裹的程式碼作為一個片段來處理。注意JSX 程式碼的處理。將JS 語法視為JSX 語法進行高亮。

色彩系統：以深灰色為背景主色調，代碼區塊採用深色背景+ 彩色代碼高亮（青藍、亮綠色為重點強調色）；

排版佈局：程式碼區塊模擬終端/ 程式碼編輯器外觀，但要移除程式碼編輯器頂部的按鈕部分，只展示程式碼。每張卡片上下padding 為15px，左右padding 為25px

技術實作：使用HTML5、CSS 實作佈局與樣式（程式碼區塊需彩色高亮）；整合dom-to-image-more 功能，dom-to-image-more腳本網址為https://cdn.jsdelivr.net/npm/dom-to-image-more@2.8.0/dist/dom-to-image-more.min.js，實現單卡圖片下載（按鈕位於卡片下方，圖片要高清）與一鍵下載所有圖片（點擊後等待1 秒再逐一下載）。程式碼不要加入莫名奇妙的`\` 轉義從而導致程式碼報錯。

實現時注意：封面卡要簡化。圖示不使用偽元素，直接使用SVG。下載圖片要高清，scale 設定為2。圖片按照順序的數字進行命名。