2 | 
3 |
CodeImg
4 | 5 | 6 | VSCode extension that generate beautiful image for you code and terminal with your favorite font and theme. 7 | 8 | Powered by `Solid.js`. 9 | 10 | ## Why another one? 11 | 12 | The popular existing extensions lack maintenance and have limited customization options. I spent some weekend time creating this extension, hoping to add a more modern UI and additional configuration options. 13 | 14 | ## How it works? 15 | 16 | Call VSCode's built-in command to copy generated HTML text and render the parsed clipboard text content. 17 | - For code, use `editor.action.clipboardCopyWithSyntaxHighlightingAction` 18 | - For terminal, use `workbench.action.terminal.copySelectionAsHtml` 19 | 20 | ### Browser Environment Limitation 21 | 22 | Due to the limitation of `navigator.clipboard.read()` and lack of `document.execCommand("paste")` support in modern browsers, the generate image command and selection listener are not supported. 23 | 24 | ## Features 25 | 26 | - Generate beautiful image of code and terminal 27 | - Copy or save image in `PNG` / `JPG` / `WEBP` format 28 | - **Click line number to highlight lines in 3 styles** 29 | - Click red circle on top left to clear all codes 30 | 31 | ## Showcase 32 | 33 | Code: 34 |  35 | 36 | Terminal: 37 |  38 | 39 | - Font: [Maple Mono](https://github.com/subframe7536/maple-font/tree/variable) 40 | - Theme: [Maple](https://github.com/subframe7536/vscode-theme-maple) 41 | 42 | ## Limitation 43 | 44 | - No effect about `editor.bracketPairColorization` 45 | - "pollute" your clipboard 46 | - Snap on terminal cannot be updated if selection in terminal changed 47 | 48 | ## Configurations 49 | 50 | 51 | 52 | | Key | Description | Type | Default | 53 | | ------------------------------- | ------------------------------------------------------------------------------------------- | --------- | ----------------------------------------------------------------------- | 54 | | `codeimg.background` | The CSS background of the snippet's container. If you don't want to it, set it `none` | `string` | `"linear-gradient(345deg, rgb(180 218 255) 0%, rgb(232 209 255) 100%)"` | 55 | | `codeimg.boxShadow` | The CSS box-shadow for the snippet's container. If you don't want to it, set it `none` | `string` | `"medium"` | 56 | | `codeimg.containerPadding` | The CSS padding for the snippet's container. If you don't want to it, set it `none` | `string` | `"3rem"` | 57 | | `codeimg.border` | Border for the snippet's container. Only in dark theme | `boolean` | `true` | 58 | | `codeimg.debounce` | Whether to update the code snippet with debounce when selection changes | `boolean` | `true` | 59 | | `codeimg.roundedCorners` | The CSS rounded corners for the snippet's container. If you don't want to it, set it `none` | `string` | `"1rem"` | 60 | | `codeimg.scale` | The scale of the screenshot | `number` | `2` | 61 | | `codeimg.format` | The format of the screenshot | `string` | `"png"` | 62 | | `codeimg.terminalLineHeight` | Line height of terminal when generating terminal image | `number` | `1.3` | 63 | | `codeimg.showWindowControls` | Display OS X style window controls | `boolean` | `true` | 64 | | `codeimg.windowControlsColor` | Add color in window controls | `boolean` | `true` | 65 | | `codeimg.showWindowTitle` | Display window title with open folder / file name | `boolean` | `true` | 66 | | `codeimg.showLineNumbers` | Display line numbers | `boolean` | `true` | 67 | | `codeimg.realLineNumber` | The line number begins with the actual line number instead of starting at 1 | `boolean` | `false` | 68 | | `codeimg.trimPrefixWhitespaces` | Trim the prefix whitespaces in every line and keep indent. Also trim empty lines around | `boolean` | `true` | 69 | 70 | 71 | 72 | ## Commands 73 | 74 | 75 | 76 | | Command | Title | 77 | | --------------------------- | ---------------------------------------- | 78 | | `codeimg.open` | CodeImg: open preview panel | 79 | | `codeimg.generate.code` | CodeImg: generate image for code 📷 | 80 | | `codeimg.generate.terminal` | CodeImg: generate image for terminal 🛠️ | 81 | 82 | 83 | 84 | ## credit 85 | 86 | - [CodeSnap-plus](https://github.com/huibizhang/CodeSnap-plus) 87 | - [ray.so](https://ray.so) 88 | - [CodeImage](https://codeimage.dev/) 89 | -------------------------------------------------------------------------------- /config/msg.ts: -------------------------------------------------------------------------------- 1 | import type { ScopedConfigKeyTypeMap } from './generated/meta' 2 | 3 | export interface EditorSettings { 4 | fontLigatures: boolean | string 5 | tabSize: number | string 6 | } 7 | 8 | export interface TerminalSettings { 9 | fontSize: string 10 | fontFamily: string 11 | } 12 | 13 | export type AppConfig = ScopedConfigKeyTypeMap & EditorSettings & { 14 | [K in keyof TerminalSettings as `terminal${Capitalize
24 |
35 |
36 | )
37 | }
38 |
--------------------------------------------------------------------------------
/src/components/ActionPanel.tsx:
--------------------------------------------------------------------------------
1 | import type json from '@iconify-json/lucide/icons.json'
2 | import type { Accessor } from 'solid-js'
3 |
4 | import { createRef } from '@solid-hooks/core'
5 | import { cls } from 'cls-variant'
6 | import { Show } from 'solid-js'
7 |
8 | import { debounce } from '../../extension/debounce'
9 | import { useOperate } from '../state/action'
10 | import { useSettings } from '../state/editorSettings'
11 | import { generateBlob, saveToLocal } from '../utils/image'
12 | import { vscode } from '../utils/vscode'
13 |
14 | function TextWithPrefixIcon(props: { icon: `i-lucide-${keyof typeof json['icons']}`, text: string }) {
15 | return (
16 |
32 |
34 |
17 |
18 | {props.text}
19 |
20 | )
21 | }
22 |
23 | export default function ActionPanel(props: { codeblockRef: Accessor
52 |
62 |
70 |
76 |
85 |
86 | )
87 | }
88 |
--------------------------------------------------------------------------------
/src/components/CodeBlock.tsx:
--------------------------------------------------------------------------------
1 | import { createArray, createRef } from '@solid-hooks/core'
2 | import { useCssVar, usePaste } from '@solid-hooks/core/web'
3 | import { cls } from 'cls-variant'
4 | import { createMemo, For, Show } from 'solid-js'
5 |
6 | import { useOperate } from '../state/action'
7 | import { useSettings } from '../state/editorSettings'
8 | import { vscode } from '../utils/vscode'
9 |
10 | function parseHTML(html: string) {
11 | const template = document.createElement('template')
12 | template.innerHTML = html
13 | return template.content
14 | }
15 |
16 | function trimWhiteSpace40 | if (el.textContent?.trim() === '') { 41 | result.push(document.createElement('br') as unknown as E) 42 | continue 43 | } 44 | if (trim) { 45 | const first = el.firstElementChild 46 | if (first) { 47 | if (i === startIndex) { 48 | if (first?.textContent?.trim() === '') { 49 | indentSize = first.textContent.length 50 | first.textContent = '' 51 | } 52 | } else if (first?.textContent) { 53 | first.textContent = first.textContent.substring(indentSize) 54 | } 55 | } else if (i === startIndex) { 56 | startIndex++ 57 | continue 58 | } 59 | } 60 | // trim suffix whitespace 61 | const lastChild = el.lastElementChild 62 | if (lastChild) { 63 | const textContent = lastChild.textContent 64 | if (textContent) { 65 | lastChild.textContent = textContent.trimEnd() 66 | } 67 | } 68 | result.push(el) 69 | } 70 | return result 71 | } 72 | 73 | type RowType = 0 | 1 | 2 | 3 74 | 75 | const isDesktop = typeof __isDesktop__ !== 'undefined' ? __isDesktop__ : true 76 | export default function CodeBlock() { 77 | const lines = createRef
210 |
211 |
224 | {props.line}
225 |
226 | )
227 | }
228 |
229 | const hasLines = createMemo(() => lines().length > 0)
230 | return (
231 | highlightArray((arr) => {
218 | arr[props.index] = ((arr[props.index] ?? 0) + 1) % 4 as RowType
219 | })}
220 | >
221 | {lineNumber()}
222 |
223 |
232 |
309 |
310 | )
311 | }
312 |
--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
1 | import { createApp } from '@solid-hooks/core'
2 | import { GlobalStateProvider } from '@solid-hooks/state'
3 |
4 | import { App } from './App'
5 |
6 | import '@unocss/reset/normalize.css'
7 | import 'uno.css'
8 |
9 | createApp(App)
10 | .use(GlobalStateProvider)
11 | .mount('#app')
12 |
--------------------------------------------------------------------------------
/src/state/action.ts:
--------------------------------------------------------------------------------
1 | import { generateClipboardItem, useCopy } from '@solid-hooks/core/web'
2 | import { defineState } from '@solid-hooks/state'
3 |
4 | import { debounce } from '../../extension/debounce'
5 |
6 | export const useOperate = defineState('action', {
7 | init: {
8 | flashing: false,
9 | title: '',
10 | },
11 | getters: () => {
12 | const { isCopied } = useCopy()
13 | return { isCopied }
14 | },
15 | actions: (setState, state) => {
16 | const { copy, isCopied } = useCopy()
17 | const debounceOffFlashing = debounce(() => setState('flashing', false), 750)
18 | return {
19 | showFlashing: () => {
20 | setState('flashing', true)
21 | debounceOffFlashing()
22 | },
23 | copy: async (data: string | (() => Promise
233 |
308 |
240 |
241 |
253 |
260 |
275 |
279 |
299 | )}
300 | >
301 | lines([])}
249 | >
250 |
251 |
252 |
261 | {
262 | settings.targetShowWindowTitle()
263 | ? isTerminal()
264 | ? (
265 | <>
266 |
267 | {operate().title}
268 |
269 | )
270 | : operate().title
271 | : ' '
272 | }
273 |
274 |
280 | Copy Code and Paste Here}
283 | >
284 | Change Selection in Text Editor
285 |
286 |
287 | or
288 |
298 |
302 |
303 | {(line, idx) =>
305 |
306 |
307 |