From 733e7f9cba6cffe4a79d4b835b8e98865d7cc260 Mon Sep 17 00:00:00 2001
From: dufan1032 <18518213665@163.com>
Date: Wed, 7 Oct 2026 13:32:06 +0800
Subject: [PATCH] =?UTF-8?q?Update=20plugin=20Markdown=20=E7=AC=94=E8=AE=B0?=
 =?UTF-8?q?=20v0.1.2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- feat: 发布 Markdown 笔记 v0.1.0
- feat: UI优化和导入导出功能
- release: publish Markdown Notes v0.1.1
- release: publish Markdown Notes v0.1.1
- fix: 修复发布脚本 PR 地址
- feat: 增强文本高亮与媒体编辑体验
- release: publish Markdown Notes v0.1.2
- fix: 调整更新日志版本标题格式
- fix: 补充插件作者信息
---
 plugins/ztools-markdown-notes/CHANGELOG.md    |  13 +-
 plugins/ztools-markdown-notes/package.json    |   2 +-
 plugins/ztools-markdown-notes/plugin.json     |   3 +-
 .../ztools-markdown-notes/public/plugin.json  |   3 +-
 .../scripts/publish-update.ps1                |   2 +-
 plugins/ztools-markdown-notes/src/App.vue     |  31 +-
 .../src/components/MarkdownEditor.vue         | 546 ++++++++++++++++--
 .../src/imageSizeMetadata.ts                  | 193 +++++++
 plugins/ztools-markdown-notes/src/styles.css  |  47 +-
 .../src/workspaceSession.ts                   |  34 +-
 .../tests/imageSizeMetadata.test.cjs          | 101 ++++
 .../tests/workspace.test.cjs                  |  10 +-
 12 files changed, 927 insertions(+), 58 deletions(-)
 create mode 100644 plugins/ztools-markdown-notes/src/imageSizeMetadata.ts
 create mode 100644 plugins/ztools-markdown-notes/tests/imageSizeMetadata.test.cjs

diff --git a/plugins/ztools-markdown-notes/CHANGELOG.md b/plugins/ztools-markdown-notes/CHANGELOG.md
index 515be4210..72380af25 100644
--- a/plugins/ztools-markdown-notes/CHANGELOG.md
+++ b/plugins/ztools-markdown-notes/CHANGELOG.md
@@ -1,13 +1,20 @@
-# Changelog
+# 更新日志
 
+## 0.1.2 - 2026-09-26
 
-## 0.1.1 - 2026-09-03
+- 新增文本高亮，以及高亮颜色和透明度设置。
+- 新增代码块语言选择、过滤和一键复制。
+- 新增图片右键调整大小、恢复自动大小和删除功能。
+- 优化编辑器正文间距，以及代码块和图片的聚焦体验。
+- 修复高亮文本边界连续退格可能破坏 Markdown 标记的问题。
+
+## 0.1.1
 
 - 新增 Markdown 导入、Markdown 导出和 HTML 导出。
 - 优化编辑器工具栏、更多操作菜单和内容区域布局。
 - 修正生产包清单，移除开发服务器入口。
 
-## 0.1.0 - 2026-09-02
+## 0.1.0
 
 - 支持真实 Markdown 文件与多工作区管理。
 - 支持 Vditor 即时渲染和源码编辑，编辑内容自动保存。
diff --git a/plugins/ztools-markdown-notes/package.json b/plugins/ztools-markdown-notes/package.json
index 11ff721df..ad975f075 100644
--- a/plugins/ztools-markdown-notes/package.json
+++ b/plugins/ztools-markdown-notes/package.json
@@ -1,7 +1,7 @@
 {
   "name": "ztools-markdown-notes",
   "private": true,
-  "version": "0.1.1",
+  "version": "0.1.2",
   "type": "module",
   "scripts": {
     "dev": "vite",
diff --git a/plugins/ztools-markdown-notes/plugin.json b/plugins/ztools-markdown-notes/plugin.json
index 721e577f6..ecf5e53c4 100644
--- a/plugins/ztools-markdown-notes/plugin.json
+++ b/plugins/ztools-markdown-notes/plugin.json
@@ -2,7 +2,8 @@
   "name": "ztools-markdown-notes",
   "title": "Markdown 笔记",
   "description": "基于真实本地 Markdown 文件的轻量笔记插件",
-  "version": "0.1.1",
+  "author": "dufan1032",
+  "version": "0.1.2",
   "main": "index.html",
   "development": {
     "main": "http://localhost:5173"
diff --git a/plugins/ztools-markdown-notes/public/plugin.json b/plugins/ztools-markdown-notes/public/plugin.json
index 721e577f6..ecf5e53c4 100644
--- a/plugins/ztools-markdown-notes/public/plugin.json
+++ b/plugins/ztools-markdown-notes/public/plugin.json
@@ -2,7 +2,8 @@
   "name": "ztools-markdown-notes",
   "title": "Markdown 笔记",
   "description": "基于真实本地 Markdown 文件的轻量笔记插件",
-  "version": "0.1.1",
+  "author": "dufan1032",
+  "version": "0.1.2",
   "main": "index.html",
   "development": {
     "main": "http://localhost:5173"
diff --git a/plugins/ztools-markdown-notes/scripts/publish-update.ps1 b/plugins/ztools-markdown-notes/scripts/publish-update.ps1
index 2d116578f..13709c2a8 100644
--- a/plugins/ztools-markdown-notes/scripts/publish-update.ps1
+++ b/plugins/ztools-markdown-notes/scripts/publish-update.ps1
@@ -158,7 +158,7 @@ if (-not $forkChanges) {
 Invoke-Git -Repository $forkPath -Arguments @('commit', '-m', "Update plugin Markdown Notes v$version")
 Invoke-Git -Repository $forkPath -Arguments @('push', '-u', 'origin', $branch)
 
-$pullRequestUrl = "https://github.com/dufan1032/ZTools-plugins/compare/main...$branch?expand=1"
+$pullRequestUrl = "https://github.com/ZToolsCenter/ZTools-plugins/compare/main...dufan1032:${branch}?expand=1"
 Write-Host ''
 Write-Host 'Release branch pushed. Create the pull request:' -ForegroundColor Green
 Write-Host $pullRequestUrl
diff --git a/plugins/ztools-markdown-notes/src/App.vue b/plugins/ztools-markdown-notes/src/App.vue
index 799d0d64e..4d12795a8 100644
--- a/plugins/ztools-markdown-notes/src/App.vue
+++ b/plugins/ztools-markdown-notes/src/App.vue
@@ -8,7 +8,7 @@ import TrashPanel from './components/TrashPanel.vue'
 import WorkspaceTree from './components/WorkspaceTree.vue'
 import { extractOutline } from './outline'
 import { endWorkspaceDrag, getWorkspaceDragPath } from './workspaceDrag'
-import { clearNoteDraft, clearNoteDraftPath, defaultEditorSettings, loadEditorMode, loadEditorSettings, loadGlobalNoteSearchEnabled, loadGlobalWorkspaceSearchEnabled, loadHiddenGlobalNotePaths, loadLastWorkspacePath, loadNoteDraft, loadPinnedNotePaths, loadRegisteredWorkspaces, loadTrashRetentionDays, replaceNoteDraftPath, saveEditorMode, saveEditorSettings, saveGlobalNoteSearchEnabled, saveGlobalWorkspaceSearchEnabled, saveHiddenGlobalNotePaths, saveLastWorkspacePath, saveNoteDraft, savePinnedNotePaths, saveRegisteredWorkspaces, saveTrashRetentionDays, type NoteDraft, type RegisteredWorkspace } from './workspaceSession'
+import { clearNoteDraft, clearNoteDraftPath, defaultEditorSettings, loadEditorMode, loadEditorSettings, loadGlobalNoteSearchEnabled, loadGlobalWorkspaceSearchEnabled, loadHiddenGlobalNotePaths, loadLastWorkspacePath, loadNoteDraft, loadPinnedNotePaths, loadRegisteredWorkspaces, loadTrashRetentionDays, normalizeHexColor, replaceNoteDraftPath, saveEditorMode, saveEditorSettings, saveGlobalNoteSearchEnabled, saveGlobalWorkspaceSearchEnabled, saveHiddenGlobalNotePaths, saveLastWorkspacePath, saveNoteDraft, savePinnedNotePaths, saveRegisteredWorkspaces, saveTrashRetentionDays, type NoteDraft, type RegisteredWorkspace } from './workspaceSession'
 
 const workspace = ref<WorkspaceScan | null>(null)
 const previousWorkspace = ref<WorkspaceScan | null>(null)
@@ -144,6 +144,8 @@ const editorStyle = computed(() => ({
   '--editor-font-size': `${editorSettings.value.fontSize}px`,
   '--editor-line-height': String(editorSettings.value.lineHeight),
   '--find-highlight-color': editorSettings.value.findHighlightColor,
+  '--text-highlight-color': editorSettings.value.textHighlightColor,
+  '--text-highlight-opacity': `${editorSettings.value.textHighlightOpacity}%`,
 }))
 const pinnedNotes = computed(() => {
   const notes = new Map(flattenNoteEntries(workspace.value?.entries ?? []).map((note) => [note.relativePath, note]))
@@ -428,10 +430,15 @@ function dropIntoRoot(event: DragEvent) {
   if (allowed) void moveEntry(sourcePath, '')
 }
 
-function showOperationError(message: string) {
+function showOperationError(message: string, autoDismiss = false) {
   window.clearTimeout(operationTimer)
   operationTone.value = 'error'
   operationMessage.value = message
+  if (autoDismiss) {
+    operationTimer = window.setTimeout(() => {
+      operationMessage.value = ''
+    }, 2200)
+  }
 }
 
 function showOperationSuccess(message: string) {
@@ -477,6 +484,20 @@ function updateEditorSettings() {
   saveEditorSettings(editorSettings.value)
 }
 
+function updateHighlightColor(setting: 'findHighlightColor' | 'textHighlightColor', event: Event) {
+  const input = event.target as HTMLInputElement
+  const color = normalizeHexColor(input.value)
+  if (!color) return
+  editorSettings.value[setting] = color
+  input.value = color
+  updateEditorSettings()
+}
+
+function restoreHighlightColor(setting: 'findHighlightColor' | 'textHighlightColor', event: Event) {
+  const input = event.target as HTMLInputElement
+  input.value = editorSettings.value[setting]
+}
+
 function resetDefaultSettings() {
   editorSettings.value = { ...defaultEditorSettings }
   saveEditorSettings(editorSettings.value)
@@ -2237,10 +2258,12 @@ watch(activeNotePath, () => {
             </div>
           </section>
           <section class="settings-group">
-            <header class="settings-group-title"><h3>编辑器</h3><small>调整正文显示和当前笔记查找效果。</small></header>
+            <header class="settings-group-title"><h3>编辑器</h3><small>调整正文显示、文本高亮和当前笔记查找效果。</small></header>
             <label>正文字号 <input v-model.number="editorSettings.fontSize" type="range" min="12" max="24" step="1" @input="updateEditorSettings" /><span>{{ editorSettings.fontSize }} px</span></label>
             <label>正文行高 <input v-model.number="editorSettings.lineHeight" type="range" min="1.2" max="2.4" step="0.1" @input="updateEditorSettings" /><span>{{ editorSettings.lineHeight.toFixed(1) }}</span></label>
-            <label>查找匹配颜色 <input v-model="editorSettings.findHighlightColor" type="color" @input="updateEditorSettings" /></label>
+            <label>文本高亮颜色 <span class="color-setting-control"><input v-model="editorSettings.textHighlightColor" type="color" @input="updateHighlightColor('textHighlightColor', $event)" /><input :value="editorSettings.textHighlightColor" type="text" size="8" maxlength="7" inputmode="text" aria-label="文本高亮颜色，支持十六进制" title="支持 #RRGGBB 或 RRGGBB" @input="updateHighlightColor('textHighlightColor', $event)" @change="restoreHighlightColor('textHighlightColor', $event)" /></span></label>
+            <label>文本高亮透明度 <input v-model.number="editorSettings.textHighlightOpacity" type="range" min="0" max="100" step="1" @input="updateEditorSettings" /><span>{{ editorSettings.textHighlightOpacity }}%</span></label>
+            <label>查找匹配颜色 <span class="color-setting-control"><input v-model="editorSettings.findHighlightColor" type="color" @input="updateHighlightColor('findHighlightColor', $event)" /><input :value="editorSettings.findHighlightColor" type="text" size="8" maxlength="7" inputmode="text" aria-label="查找匹配颜色，支持十六进制" title="支持 #RRGGBB 或 RRGGBB" @input="updateHighlightColor('findHighlightColor', $event)" @change="restoreHighlightColor('findHighlightColor', $event)" /></span></label>
           </section>
           <section class="settings-group">
             <header class="settings-group-title"><h3>zTools 集成</h3><small>控制哪些内容可以从 zTools 主搜索中直接打开。</small></header>
diff --git a/plugins/ztools-markdown-notes/src/components/MarkdownEditor.vue b/plugins/ztools-markdown-notes/src/components/MarkdownEditor.vue
index b64877f16..62b95173f 100644
--- a/plugins/ztools-markdown-notes/src/components/MarkdownEditor.vue
+++ b/plugins/ztools-markdown-notes/src/components/MarkdownEditor.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import { nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import Vditor from 'vditor'
 import 'vditor/dist/index.css'
+import { clearMarkdownImageWidth, getMarkdownImages, IMAGE_WIDTH_MAX, removeMarkdownImage, setMarkdownImageWidth } from '../imageSizeMetadata'
 
 const props = defineProps<{
   modelValue: string
@@ -19,10 +20,11 @@ const emit = defineEmits<{
   toggleOutline: []
   openLink: [href: string]
   requestTable: []
-  operationError: [message: string]
+  operationError: [message: string, autoDismiss?: boolean]
 }>()
 
 const host = ref<HTMLElement | null>(null)
+const shell = ref<HTMLElement | null>(null)
 const isFullscreen = ref(false)
 let editor: Vditor | null = null
 const darkThemeQuery = window.matchMedia('(prefers-color-scheme: dark)')
@@ -30,8 +32,17 @@ let applyingExternalValue = false
 const editorReady = ref(false)
 let selectedImageNode: HTMLElement | null = null
 let selectedTableNode: HTMLElement | null = null
-let imageClickTimer: number | undefined
 let fullscreenObserver: MutationObserver | null = null
+let imageMarkerObserver: MutationObserver | null = null
+const activeCodeBlockIndex = ref(-1)
+const activeCodeLanguage = ref('')
+const codeToolsStyle = ref<Record<string, string>>({})
+const codeCopyLabel = ref('复制')
+const isCodeLanguageListOpen = ref(false)
+const imageMenu = ref<{ x: number; y: number; index: number; naturalWidth: number } | null>(null)
+const imageSizeDialog = ref<{ index: number; width: number; naturalWidth: number } | null>(null)
+const highlightMenu = ref<{ x: number; y: number } | null>(null)
+let selectedHighlightNode: HTMLElement | null = null
 let findQuery = ''
 let findRanges: Range[] = []
 let findIndex = -1
@@ -79,17 +90,26 @@ async function importFiles(files: File[]) {
 
 function handleEditorKeydown(event: KeyboardEvent) {
   if (props.mode !== 'ir' || (event.key !== 'Delete' && event.key !== 'Backspace') || !editor) {
-    selectedImageNode = null
+    setSelectedImageNode(null)
     return
   }
+  if (handleHighlightBoundaryDelete(event)) return
 
   let imageNode = selectedImageNode?.isConnected ? selectedImageNode : null
 
   const selection = window.getSelection()
-  if (!selection || selection.rangeCount === 0) return
-  const range = selection.getRangeAt(0)
+  const range = selection?.rangeCount ? selection.getRangeAt(0) : null
 
-  if (!imageNode && range.startContainer === range.endContainer && range.endOffset === range.startOffset + 1) {
+  const selectionElement = selection?.anchorNode instanceof HTMLElement
+    ? selection.anchorNode
+    : selection?.anchorNode?.parentElement
+  const selectionNode = selectionElement?.closest<HTMLElement>('.vditor-ir__node')
+  if (!imageNode && selectionNode?.querySelector('img')) imageNode = selectionNode
+  if (!imageNode && selectionNode?.dataset.type === 'html-inline' && selectionNode.textContent?.includes('znotes:image-width')) {
+    const previous = selectionNode.previousElementSibling
+    if (previous instanceof HTMLElement && previous.querySelector('img')) imageNode = previous
+  }
+  if (!imageNode && range && range.startContainer === range.endContainer && range.endOffset === range.startOffset + 1) {
     const selectedNode = range.startContainer.childNodes[range.startOffset]
     if (selectedNode instanceof HTMLElement && selectedNode.classList.contains('vditor-ir__marker--link')) {
       imageNode = selectedNode.closest<HTMLElement>('.vditor-ir__node')
@@ -99,15 +119,71 @@ function handleEditorKeydown(event: KeyboardEvent) {
 
   event.preventDefault()
   event.stopPropagation()
-  selectedImageNode = null
-  range.selectNode(imageNode)
+  const rendered = Array.from(getEditorContent()?.querySelectorAll<HTMLImageElement>('img') ?? [])
+  const imageIndex = rendered.indexOf(imageNode.querySelector('img') as HTMLImageElement)
+  setSelectedImageNode(null)
+  if (imageIndex < 0) return
+  try {
+    updateImageMarkdown(removeMarkdownImage(editor.getValue(), imageIndex), imageIndex)
+  } catch (error) {
+    emit('operationError', error instanceof Error ? error.message : '删除图片失败')
+  }
+}
+
+function handleHighlightBoundaryDelete(event: KeyboardEvent) {
+  if (!editor) return false
+  const selection = window.getSelection()
+  if (!selection?.isCollapsed || !selection.anchorNode) return false
+  const anchorElement = selection.anchorNode instanceof HTMLElement
+    ? selection.anchorNode
+    : selection.anchorNode.parentElement
+  const marker = anchorElement?.closest<HTMLElement>('.vditor-ir__marker')
+  let markNode = marker?.closest<HTMLElement>('[data-type="mark"]') ?? null
+  let removeLast = false
+  let removeFirst = false
+  if (!markNode) {
+    const anchor = selection.anchorNode
+    let adjacent: Node | null = null
+    if (anchor instanceof HTMLElement) {
+      adjacent = event.key === 'Backspace'
+        ? anchor.childNodes[selection.anchorOffset - 1] ?? null
+        : anchor.childNodes[selection.anchorOffset] ?? null
+    } else if (anchor instanceof Text) {
+      if (event.key === 'Backspace' && selection.anchorOffset === 0) adjacent = anchor.previousSibling
+      if (event.key === 'Delete' && selection.anchorOffset === anchor.data.length) adjacent = anchor.nextSibling
+    }
+    if (adjacent instanceof HTMLElement && adjacent.dataset.type === 'mark') {
+      markNode = adjacent
+      removeLast = event.key === 'Backspace'
+      removeFirst = event.key === 'Delete'
+    }
+  }
+  if (!markNode) return false
+  const markers = Array.from(markNode.children).filter((child): child is HTMLElement => (
+    child instanceof HTMLElement && child.classList.contains('vditor-ir__marker')
+  ))
+  removeLast ||= event.key === 'Backspace' && marker === markers.at(-1)
+  removeFirst ||= event.key === 'Delete' && marker === markers[0]
+  if (!removeLast && !removeFirst) return false
+
+  event.preventDefault()
+  event.stopPropagation()
+  const text = markNode.querySelector('mark')?.textContent ?? ''
+  const remaining = removeLast ? text.slice(0, -1) : text.slice(1)
+  const range = document.createRange()
+  range.selectNode(markNode)
   selection.removeAllRanges()
   selection.addRange(range)
-  editor.deleteValue()
+  editor.updateValue(remaining ? `==${remaining}==` : '')
+  return true
 }
 
 function handleEditorClick(event: MouseEvent) {
+  imageMenu.value = null
+  highlightMenu.value = null
+  selectedHighlightNode = null
   const target = event.target instanceof HTMLElement ? event.target : null
+  if (!target?.closest('[data-type="code-block"]')) activeCodeBlockIndex.value = -1
   const link = target instanceof HTMLImageElement
     ? null
     : target?.closest<HTMLElement>('[data-type="a"]') || target?.closest<HTMLAnchorElement>('a')
@@ -127,40 +203,358 @@ function handleEditorClick(event: MouseEvent) {
 
   selectedTableNode = target?.closest<HTMLElement>('[data-type="table"], table') ?? null
 
-  if (props.mode !== 'ir' || !(target instanceof HTMLImageElement)) {
-    window.clearTimeout(imageClickTimer)
-    imageClickTimer = undefined
-    selectedImageNode = null
+  const imageNode = target?.closest<HTMLElement>('.vditor-ir__node')
+  const image = target instanceof HTMLImageElement ? target : imageNode?.querySelector<HTMLImageElement>('img')
+  if (props.mode !== 'ir' || !image || !imageNode) {
+    setSelectedImageNode(null)
+    scheduleImageWidths()
     return
   }
 
   event.preventDefault()
   event.stopPropagation()
-  const image = target
-  const imageNode = image.closest<HTMLElement>('.vditor-ir__node')
-  if (!imageNode) return
-
-  window.clearTimeout(imageClickTimer)
-  imageClickTimer = undefined
   if (event.detail >= 2) {
-    selectedImageNode = null
+    setSelectedImageNode(null)
     emit('previewImage', { src: image.currentSrc || image.src, alt: image.alt })
     return
   }
 
-  imageClickTimer = window.setTimeout(() => {
-    imageClickTimer = undefined
-    if (!imageNode.isConnected) return
-    selectedImageNode = imageNode
-    const linkMarker = imageNode.querySelector<HTMLElement>('.vditor-ir__marker--link')
-    if (!linkMarker) return
+  setSelectedImageNode(imageNode)
+}
+
+function setSelectedImageNode(node: HTMLElement | null) {
+  selectedImageNode?.classList.remove('znotes-image-selected')
+  selectedImageNode = node
+  selectedImageNode?.classList.add('znotes-image-selected')
+}
+
+function handleEditorMouseDown(event: MouseEvent) {
+  if (props.mode !== 'ir' || !(event.target instanceof HTMLElement)) return
+  const imageNode = event.target.closest<HTMLElement>('.vditor-ir__node')
+  if (!imageNode?.querySelector('img')) return
+  event.preventDefault()
+  event.stopPropagation()
+}
+
+function applyImageWidths() {
+  if (props.mode !== 'ir' || !editor) return
+  const images = getMarkdownImages(editor.getValue())
+  const rendered = getEditorContent()?.querySelectorAll<HTMLImageElement>('img') ?? []
+  rendered.forEach((image, index) => {
+    const width = images[index]?.width
+    if (width) image.style.width = `${width}px`
+    else image.style.removeProperty('width')
+  })
+  collapseImageMarkers()
+}
+
+function collapseImageMarkers() {
+  const content = getEditorContent()
+  if (!content || props.mode !== 'ir') return
+  content.querySelectorAll<HTMLElement>('[data-type="img"].vditor-ir__node--expand').forEach((node) => {
+    node.classList.remove('vditor-ir__node--expand')
+  })
+  content.querySelectorAll<HTMLElement>('[data-type="html-inline"].vditor-ir__node--expand').forEach((node) => {
+    if (node.textContent?.includes('znotes:image-width')) node.classList.remove('vditor-ir__node--expand')
+  })
+}
+
+function scheduleImageWidths() {
+  nextTick(() => {
+    window.setTimeout(applyImageWidths)
+    window.setTimeout(applyImageWidths, 100)
+  })
+}
+
+function handleEditorContextMenu(event: MouseEvent) {
+  if (props.mode !== 'ir' || props.disabled || !(event.target instanceof HTMLElement)) return
+  const markNode = event.target.closest<HTMLElement>('[data-type="mark"]')
+  if (markNode) {
+    event.preventDefault()
+    event.stopPropagation()
+    imageMenu.value = null
+    selectedHighlightNode = markNode
+    highlightMenu.value = {
+      x: Math.min(event.clientX, window.innerWidth - 150),
+      y: Math.min(event.clientY, window.innerHeight - 50),
+    }
+    return
+  }
+  const imageNode = event.target.closest<HTMLElement>('.vditor-ir__node')
+  const image = event.target instanceof HTMLImageElement ? event.target : imageNode?.querySelector<HTMLImageElement>('img')
+  if (!image) return
+  highlightMenu.value = null
+  selectedHighlightNode = null
+  const rendered = Array.from(getEditorContent()?.querySelectorAll<HTMLImageElement>('img') ?? [])
+  const index = rendered.indexOf(image)
+  if (index < 0 || !getMarkdownImages(editor?.getValue() ?? '')[index]) return
+  event.preventDefault()
+  event.stopPropagation()
+  imageMenu.value = {
+    x: Math.min(event.clientX, window.innerWidth - 150),
+    y: Math.min(event.clientY, window.innerHeight - 90),
+    index,
+    naturalWidth: image.naturalWidth,
+  }
+}
+
+function openImageSizeDialog() {
+  if (!editor || !imageMenu.value) return
+  const selected = getMarkdownImages(editor.getValue())[imageMenu.value.index]
+  if (!selected) return
+  imageSizeDialog.value = {
+    index: imageMenu.value.index,
+    width: selected.width ?? imageMenu.value.naturalWidth,
+    naturalWidth: imageMenu.value.naturalWidth,
+  }
+  imageMenu.value = null
+}
+
+function getImageBlockIndex(imageIndex: number) {
+  const content = getEditorContent()
+  const image = content?.querySelectorAll<HTMLImageElement>('img')[imageIndex]
+  if (!content || !image) return null
+  let block: HTMLElement | null = image
+  while (block?.parentElement && block.parentElement !== content) block = block.parentElement
+  return block?.parentElement === content ? Array.from(content.children).indexOf(block) : null
+}
+
+function restoreCaretNearBlock(blockIndex: number) {
+  const content = getEditorContent()
+  if (!content || content.children.length === 0) return
+  const hasFollowingBlock = blockIndex < content.children.length
+  const target = content.children[Math.min(blockIndex, content.children.length - 1)]
+  if (!(target instanceof HTMLElement)) return
+  const codeEditor = !hasFollowingBlock && target.dataset.type === 'code-block'
+    ? target.querySelector<HTMLElement>('.vditor-ir__marker--pre code')
+    : null
+  if (codeEditor) target.classList.add('vditor-ir__node--expand')
+  const range = document.createRange()
+  range.selectNodeContents(codeEditor ?? target)
+  range.collapse(codeEditor ? false : hasFollowingBlock)
+  const selection = window.getSelection()
+  selection?.removeAllRanges()
+  selection?.addRange(range)
+  content.focus()
+}
+
+function updateImageMarkdown(nextValue: string, imageIndex?: number) {
+  if (!editor) return
+  const blockIndex = imageIndex === undefined ? null : getImageBlockIndex(imageIndex)
+  editor.setValue(nextValue)
+  emit('update:modelValue', nextValue)
+  scheduleImageWidths()
+  if (blockIndex !== null) nextTick(() => window.setTimeout(() => restoreCaretNearBlock(blockIndex)))
+}
+
+function saveImageSize() {
+  if (!editor || !imageSizeDialog.value) return
+  try {
+    updateImageMarkdown(setMarkdownImageWidth(editor.getValue(), imageSizeDialog.value.index, imageSizeDialog.value.width), imageSizeDialog.value.index)
+    imageSizeDialog.value = null
+  } catch (error) {
+    emit('operationError', error instanceof Error ? error.message : '图片尺寸设置失败')
+  }
+}
+
+function setImageScale(percent: number) {
+  if (!imageSizeDialog.value || !imageSizeDialog.value.naturalWidth) return
+  imageSizeDialog.value.width = Math.min(IMAGE_WIDTH_MAX, Math.max(1, Math.round(imageSizeDialog.value.naturalWidth * percent / 100)))
+}
+
+function restoreImageAutoSize() {
+  if (!editor || !imageMenu.value) return
+  try {
+    updateImageMarkdown(clearMarkdownImageWidth(editor.getValue(), imageMenu.value.index), imageMenu.value.index)
+  } catch (error) {
+    emit('operationError', error instanceof Error ? error.message : '恢复图片尺寸失败')
+  } finally {
+    imageMenu.value = null
+  }
+}
+
+function deleteImageFromMenu() {
+  if (!editor || !imageMenu.value) return
+  try {
+    updateImageMarkdown(removeMarkdownImage(editor.getValue(), imageMenu.value.index), imageMenu.value.index)
+  } catch (error) {
+    emit('operationError', error instanceof Error ? error.message : '删除图片失败')
+  } finally {
+    imageMenu.value = null
+    setSelectedImageNode(null)
+  }
+}
+
+function removeSelectedHighlight() {
+  if (!editor || !selectedHighlightNode?.isConnected) return
+  const selection = window.getSelection()
+  const range = document.createRange()
+  range.selectNode(selectedHighlightNode)
+  selection?.removeAllRanges()
+  selection?.addRange(range)
+  editor.updateValue(selectedHighlightNode.querySelector('mark')?.textContent ?? '')
+  highlightMenu.value = null
+  selectedHighlightNode = null
+}
+
+const codeLanguages = [
+  { value: '', label: '纯文本', aliases: ['text', 'plain', 'txt'] },
+  { value: 'javascript', label: 'JavaScript', aliases: ['js', 'node'] },
+  { value: 'typescript', label: 'TypeScript', aliases: ['ts'] },
+  { value: 'html', label: 'HTML', aliases: ['htm'] },
+  { value: 'css', label: 'CSS', aliases: [] },
+  { value: 'vue', label: 'Vue', aliases: [] },
+  { value: 'jsx', label: 'JSX', aliases: ['react'] },
+  { value: 'tsx', label: 'TSX', aliases: ['react'] },
+  { value: 'json', label: 'JSON', aliases: [] },
+  { value: 'markdown', label: 'Markdown', aliases: ['md'] },
+  { value: 'bash', label: 'Bash', aliases: ['sh', 'shell', 'zsh'] },
+  { value: 'python', label: 'Python', aliases: ['py'] },
+  { value: 'java', label: 'Java', aliases: [] },
+  { value: 'c', label: 'C', aliases: [] },
+  { value: 'cpp', label: 'C++', aliases: ['c++'] },
+  { value: 'csharp', label: 'C#', aliases: ['cs', 'c#'] },
+  { value: 'go', label: 'Go', aliases: ['golang'] },
+  { value: 'rust', label: 'Rust', aliases: ['rs'] },
+  { value: 'kotlin', label: 'Kotlin', aliases: ['kt'] },
+  { value: 'swift', label: 'Swift', aliases: [] },
+  { value: 'php', label: 'PHP', aliases: [] },
+  { value: 'ruby', label: 'Ruby', aliases: ['rb'] },
+  { value: 'sql', label: 'SQL', aliases: [] },
+  { value: 'yaml', label: 'YAML', aliases: ['yml'] },
+  { value: 'xml', label: 'XML', aliases: [] },
+  { value: 'toml', label: 'TOML', aliases: [] },
+  { value: 'diff', label: 'Diff', aliases: ['patch'] },
+]
+
+const filteredCodeLanguages = computed(() => {
+  const query = activeCodeLanguage.value.trim().toLocaleLowerCase('en-US')
+  if (!query) return codeLanguages
+  return codeLanguages.filter((language) => (
+    language.value.includes(query) ||
+    language.label.toLocaleLowerCase('en-US').includes(query) ||
+    language.aliases.some((alias) => alias.includes(query))
+  ))
+})
+
+function chooseCodeLanguage(language: string) {
+  activeCodeLanguage.value = language
+  isCodeLanguageListOpen.value = false
+  changeCodeLanguage()
+}
+
+function finishCodeLanguageEditing() {
+  changeCodeLanguage()
+  window.setTimeout(() => {
+    isCodeLanguageListOpen.value = false
+  }, 120)
+}
+
+function codeBlockRanges(markdown: string) {
+  const lines = markdown.match(/.*(?:\r?\n|$)/g) ?? []
+  const ranges: Array<{ infoStart: number; infoEnd: number; language: string }> = []
+  let offset = 0
+  for (let index = 0; index < lines.length; index += 1) {
+    const line = lines[index]
+    const opening = line.match(/^(\s*)(`{3,}|~{3,})([^\r\n]*)/)
+    if (!opening) {
+      offset += line.length
+      continue
+    }
+    const fence = opening[2]
+    const infoStart = offset + opening[1].length + fence.length
+    const infoEnd = offset + line.replace(/\r?\n$/, '').length
+    ranges.push({ infoStart, infoEnd, language: opening[3].trim() })
+    offset += line.length
+    const closingPattern = new RegExp(`^\\s*${fence[0] === '`' ? '`' : '~'}{${fence.length},}\\s*(?:\\r?\\n)?$`)
+    while (index + 1 < lines.length) {
+      index += 1
+      const candidate = lines[index]
+      offset += candidate.length
+      if (closingPattern.test(candidate)) break
+    }
+  }
+  return ranges
+}
+
+function updateCodeTools(block: HTMLElement) {
+  const content = getEditorContent()
+  const editorShell = shell.value
+  if (!content || !editorShell) return
+  const blocks = Array.from(content.querySelectorAll<HTMLElement>('[data-type="code-block"]'))
+  const index = blocks.indexOf(block)
+  if (index < 0) return
+  const blockRect = block.getBoundingClientRect()
+  const shellRect = editorShell.getBoundingClientRect()
+  activeCodeBlockIndex.value = index
+  if (!(document.activeElement instanceof HTMLElement && document.activeElement.classList.contains('code-language-input'))) {
+    activeCodeLanguage.value = codeBlockRanges(editor?.getValue() ?? '')[index]?.language ?? ''
+  }
+  codeToolsStyle.value = {
+    top: `${blockRect.top - shellRect.top + 6}px`,
+    right: `${Math.max(8, shellRect.right - blockRect.right + 8)}px`,
+  }
+  codeCopyLabel.value = '复制'
+}
+
+function handleEditorPointerOver(event: PointerEvent) {
+  if (props.mode !== 'ir') return
+  const target = event.target instanceof HTMLElement ? event.target : null
+  const block = target?.closest<HTMLElement>('[data-type="code-block"]')
+  if (block) updateCodeTools(block)
+}
+
+function changeCodeLanguage() {
+  if (!editor || activeCodeBlockIndex.value < 0) return
+  const markdown = editor.getValue()
+  const range = codeBlockRanges(markdown)[activeCodeBlockIndex.value]
+  if (!range) return
+  const language = activeCodeLanguage.value.trim().replace(/\s+/g, '')
+  const nextValue = `${markdown.slice(0, range.infoStart)}${language}${markdown.slice(range.infoEnd)}`
+  editor.setValue(nextValue)
+  emit('update:modelValue', nextValue)
+  nextTick(() => {
+    const block = getEditorContent()?.querySelectorAll<HTMLElement>('[data-type="code-block"]')[activeCodeBlockIndex.value]
+    if (block) updateCodeTools(block)
+  })
+}
+
+async function copyActiveCode() {
+  const block = getEditorContent()?.querySelectorAll<HTMLElement>('[data-type="code-block"]')[activeCodeBlockIndex.value]
+  const code = block?.querySelector<HTMLElement>('.vditor-ir__preview code, .vditor-ir__marker--pre code')?.innerText
+  if (code === undefined) return
+  try {
+    await navigator.clipboard.writeText(code.replace(/\n$/, ''))
+    codeCopyLabel.value = '已复制'
+  } catch {
+    emit('operationError', '复制代码失败')
+  }
+}
+
+function insertHighlight() {
+  if (!editor || props.disabled) return
+  const selected = editor.getSelection()
+  if (!selected) {
+    emit('operationError', '请先选择要高亮的文本', true)
+    return
+  }
+  if (selected.startsWith('==') && selected.endsWith('==') && selected.length > 4) {
+    editor.updateValue(selected.slice(2, -2))
+    return
+  }
+  const selection = window.getSelection()
+  const startElement = selection?.anchorNode instanceof HTMLElement ? selection.anchorNode : selection?.anchorNode?.parentElement
+  const endElement = selection?.focusNode instanceof HTMLElement ? selection.focusNode : selection?.focusNode?.parentElement
+  const startMark = startElement?.closest<HTMLElement>('[data-type="mark"]')
+  if (startMark && startMark === endElement?.closest('[data-type="mark"]')) {
     const range = document.createRange()
-    range.selectNode(linkMarker)
-    const selection = window.getSelection()
+    range.selectNode(startMark)
     selection?.removeAllRanges()
     selection?.addRange(range)
-    imageNode.classList.add('vditor-ir__node--expand')
-  }, 500)
+    editor.updateValue(startMark.querySelector('mark')?.textContent ?? selected)
+    return
+  }
+  editor.updateValue(`==${selected}==`)
 }
 
 function findSourceLinkHref(label: string) {
@@ -196,6 +590,7 @@ function createEditor() {
         codeBlockPreview: true,
         mathBlockPreview: true,
         linkBase: props.baseUrl,
+        mark: true,
       },
     },
     image: {
@@ -207,7 +602,13 @@ function createEditor() {
       handler: importFiles,
     },
     toolbar: [
-      'headings', 'bold', 'italic', 'strike', '|',
+      'headings', 'bold', 'italic', 'strike',
+      {
+        name: 'highlight',
+        tip: '高亮选中文本',
+        icon: '<svg viewBox="0 0 24 24"><path d="M5 19h14M8 15l7-7 3 3-7 7H8v-3zM14 6l2-2 4 4-2 2z"/></svg>',
+        click: insertHighlight,
+      }, '|',
       'list', 'ordered-list', 'check', '|',
       'quote', 'line', 'code', 'inline-code', '|',
       'link', 'upload',
@@ -228,10 +629,14 @@ function createEditor() {
       '|', 'undo', 'redo', 'fullscreen',
     ],
     input(value) {
-      if (editorReady.value && !applyingExternalValue) emit('update:modelValue', value)
+      if (editorReady.value && !applyingExternalValue) {
+        emit('update:modelValue', value)
+        scheduleImageWidths()
+      }
     },
     after() {
       editorReady.value = true
+      scheduleImageWidths()
       if (props.disabled) editor?.disabled()
       const editorElement = host.value
       if (editorElement) {
@@ -246,6 +651,12 @@ function createEditor() {
         fullscreenObserver.observe(editorElement, { attributes: true, attributeFilter: ['class'] })
         updateFullscreen()
       }
+      imageMarkerObserver?.disconnect()
+      const irContent = editor?.vditor.ir.element
+      if (irContent) {
+        imageMarkerObserver = new MutationObserver(collapseImageMarkers)
+        imageMarkerObserver.observe(irContent, { attributes: true, attributeFilter: ['class'], subtree: true })
+      }
     },
   })
 }
@@ -408,6 +819,7 @@ watch(() => props.modelValue, (value) => {
   applyingExternalValue = true
   editor.setValue(value, true)
   applyingExternalValue = false
+  scheduleImageWidths()
 })
 
 watch(() => props.disabled, (disabled) => {
@@ -416,11 +828,11 @@ watch(() => props.disabled, (disabled) => {
 })
 
 watch([() => props.mode, () => props.baseUrl], async () => {
-  window.clearTimeout(imageClickTimer)
-  imageClickTimer = undefined
-  selectedImageNode = null
+  setSelectedImageNode(null)
   fullscreenObserver?.disconnect()
   fullscreenObserver = null
+  imageMarkerObserver?.disconnect()
+  imageMarkerObserver = null
   isFullscreen.value = false
   editorReady.value = false
   editor?.destroy()
@@ -430,17 +842,17 @@ watch([() => props.mode, () => props.baseUrl], async () => {
 })
 
 onBeforeUnmount(() => {
-  window.clearTimeout(imageClickTimer)
   clearFindHighlight()
   window.removeEventListener('keydown', handleFullscreenShortcut, true)
   darkThemeQuery.removeEventListener('change', updateEditorTheme)
   fullscreenObserver?.disconnect()
+  imageMarkerObserver?.disconnect()
   editor?.destroy()
 })
 </script>
 
 <template>
-  <div class="markdown-editor-shell">
+  <div ref="shell" class="markdown-editor-shell">
     <div v-if="!editorReady" class="editor-loading" role="status">
       <span class="editor-loading-spinner" aria-hidden="true" />
       <span>编辑器正在加载…</span>
@@ -449,9 +861,67 @@ onBeforeUnmount(() => {
       ref="host"
       class="markdown-editor"
       @click.capture="handleEditorClick"
+      @contextmenu.capture="handleEditorContextMenu"
       @keydown.capture="handleEditorKeydown"
+      @mousedown.capture="handleEditorMouseDown"
+      @pointerover.capture="handleEditorPointerOver"
     />
+    <div v-if="activeCodeBlockIndex >= 0 && editorReady && mode === 'ir'" class="code-block-tools" :style="codeToolsStyle">
+      <input
+        class="code-language-input"
+        v-model="activeCodeLanguage"
+        aria-label="代码语言"
+        title="代码语言"
+        placeholder="纯文本"
+        autocomplete="off"
+        @focus="isCodeLanguageListOpen = true"
+        @input="isCodeLanguageListOpen = true"
+        @blur="finishCodeLanguageEditing"
+        @keydown.enter.prevent="changeCodeLanguage(); isCodeLanguageListOpen = false"
+        @keydown.escape.prevent="isCodeLanguageListOpen = false"
+      />
+      <div v-if="isCodeLanguageListOpen" class="code-language-options">
+        <button
+          v-for="language in filteredCodeLanguages"
+          :key="language.value"
+          type="button"
+          @mousedown.prevent="chooseCodeLanguage(language.value)"
+        >
+          <span>{{ language.label }}</span>
+          <small v-if="language.aliases.length">{{ language.aliases.join(' · ') }}</small>
+        </button>
+        <p v-if="filteredCodeLanguages.length === 0">按当前输入作为语言标记</p>
+      </div>
+      <button type="button" @click="copyActiveCode">{{ codeCopyLabel }}</button>
+    </div>
     <Teleport to="body">
+      <div v-if="imageMenu" class="image-context-menu" :style="{ left: `${imageMenu.x}px`, top: `${imageMenu.y}px` }" @click.stop>
+        <button type="button" @click="openImageSizeDialog">调整大小…</button>
+        <button type="button" @click="restoreImageAutoSize">恢复自动大小</button>
+        <button type="button" class="danger-menu-item" @click="deleteImageFromMenu">删除图片</button>
+      </div>
+      <div v-if="highlightMenu" class="image-context-menu" :style="{ left: `${highlightMenu.x}px`, top: `${highlightMenu.y}px` }" @click.stop>
+        <button type="button" @click="removeSelectedHighlight">取消高亮</button>
+      </div>
+      <div v-if="imageSizeDialog" class="modal-backdrop" @click.self="imageSizeDialog = null">
+        <section class="image-size-dialog" role="dialog" aria-modal="true" aria-labelledby="image-size-title">
+          <h2 id="image-size-title">调整图片大小</h2>
+          <p>只设置宽度，高度会按原始比例自动调整。</p>
+          <label>
+            宽度
+            <span><input v-model.number="imageSizeDialog.width" type="number" min="1" :max="IMAGE_WIDTH_MAX" step="1" autofocus /> px</span>
+          </label>
+          <div class="image-size-presets" aria-label="常用图片比例">
+            <span>常用比例</span>
+            <button v-for="percent in [50, 70, 100, 120, 150]" :key="percent" type="button" @click="setImageScale(percent)">{{ percent }}%</button>
+          </div>
+          <small v-if="imageSizeDialog.naturalWidth">原始宽度：{{ imageSizeDialog.naturalWidth }} px</small>
+          <footer>
+            <button type="button" class="secondary" @click="imageSizeDialog = null">取消</button>
+            <button type="button" :disabled="!Number.isInteger(imageSizeDialog.width) || imageSizeDialog.width < 1 || imageSizeDialog.width > IMAGE_WIDTH_MAX" @click="saveImageSize">确定</button>
+          </footer>
+        </section>
+      </div>
       <header v-if="isFullscreen" class="fullscreen-header">
         <strong>{{ notePath }}</strong>
         <div>
diff --git a/plugins/ztools-markdown-notes/src/imageSizeMetadata.ts b/plugins/ztools-markdown-notes/src/imageSizeMetadata.ts
new file mode 100644
index 000000000..9c3055ca0
--- /dev/null
+++ b/plugins/ztools-markdown-notes/src/imageSizeMetadata.ts
@@ -0,0 +1,193 @@
+/**
+ * zNotes keeps image dimensions beside otherwise standard Markdown images:
+ *
+ * ![Alt text](./image.png)<!-- znotes:image-width=640 -->
+ *
+ * Other Markdown readers continue to render the image and ignore the comment.
+ */
+export const IMAGE_WIDTH_MAX = 10_000
+
+export type MarkdownImageMatch = {
+  index: number
+  start: number
+  end: number
+  markdown: string
+  alt: string
+  src: string
+  width: number | null
+}
+
+type WidthComment = {
+  start: number
+  end: number
+  width: number | null
+}
+
+function isEscaped(value: string, offset: number) {
+  let slashes = 0
+  for (let index = offset - 1; index >= 0 && value[index] === '\\'; index -= 1) slashes += 1
+  return slashes % 2 === 1
+}
+
+function findClosing(value: string, start: number, open: string, close: string, end: number) {
+  let depth = 1
+  for (let index = start + 1; index < end; index += 1) {
+    if (isEscaped(value, index)) continue
+    if (value[index] === open) depth += 1
+    if (value[index] !== close) continue
+    depth -= 1
+    if (depth === 0) return index
+  }
+  return -1
+}
+
+function unescapeMarkdownText(value: string) {
+  return value.replace(/\\([!"#$%&'()*+,\-./:;<=>?@[\\\]^_`{|}~])/g, '$1')
+}
+
+function parseImageSource(value: string) {
+  const trimmed = value.trim()
+  if (!trimmed) return null
+  if (trimmed.startsWith('<')) {
+    const closing = trimmed.indexOf('>')
+    return closing === -1 ? null : trimmed.slice(1, closing)
+  }
+  const source = trimmed.match(/^([^\s]+)/)?.[1]
+  return source ? unescapeMarkdownText(source) : null
+}
+
+function parseWidth(value: string) {
+  if (!/^\d+$/.test(value)) return null
+  const width = Number(value)
+  return Number.isSafeInteger(width) && width >= 1 && width <= IMAGE_WIDTH_MAX ? width : null
+}
+
+function getAdjacentWidthComment(markdown: string, imageEnd: number): WidthComment | null {
+  const match = /[ \t]*<!--\s*znotes:image-width=([^>\r\n]*)-->/y
+  match.lastIndex = imageEnd
+  const result = match.exec(markdown)
+  if (!result) return null
+  return {
+    start: imageEnd,
+    end: imageEnd + result[0].length,
+    width: parseWidth(result[1].trim()),
+  }
+}
+
+function parseImageAt(markdown: string, start: number, lineEnd: number) {
+  if (markdown.slice(start, start + 2) !== '![' || isEscaped(markdown, start)) return null
+  const altEnd = findClosing(markdown, start + 1, '[', ']', lineEnd)
+  if (altEnd === -1 || markdown[altEnd + 1] !== '(') return null
+  const imageEnd = findClosing(markdown, altEnd + 1, '(', ')', lineEnd)
+  if (imageEnd === -1) return null
+  const src = parseImageSource(markdown.slice(altEnd + 2, imageEnd))
+  if (!src) return null
+  return {
+    start,
+    end: imageEnd + 1,
+    markdown: markdown.slice(start, imageEnd + 1),
+    alt: unescapeMarkdownText(markdown.slice(start + 2, altEnd)),
+    src,
+  }
+}
+
+function fenceMarker(line: string) {
+  const match = line.match(/^ {0,3}(`{3,}|~{3,})/)
+  return match ? match[1] : null
+}
+
+/** Returns images in document order, excluding images written inside code fences or inline code. */
+export function getMarkdownImages(markdown: string): MarkdownImageMatch[] {
+  const images: MarkdownImageMatch[] = []
+  let offset = 0
+  let activeFence: string | null = null
+
+  for (const lineWithEnding of markdown.matchAll(/.*(?:\r\n|\r|\n|$)/g)) {
+    const line = lineWithEnding[0].replace(/\r?\n$/, '').replace(/\r$/, '')
+    if (!lineWithEnding[0]) break
+    const marker = fenceMarker(line)
+    if (activeFence) {
+      if (marker && marker[0] === activeFence[0] && marker.length >= activeFence.length) activeFence = null
+      offset += lineWithEnding[0].length
+      continue
+    }
+    if (marker) {
+      activeFence = marker
+      offset += lineWithEnding[0].length
+      continue
+    }
+
+    const lineEnd = offset + line.length
+    let index = offset
+    while (index < lineEnd) {
+      if (markdown[index] === '`' && !isEscaped(markdown, index)) {
+        const run = markdown.slice(index, lineEnd).match(/^`+/)?.[0] ?? '`'
+        const closing = markdown.indexOf(run, index + run.length)
+        index = closing === -1 || closing >= lineEnd ? lineEnd : closing + run.length
+        continue
+      }
+      const image = parseImageAt(markdown, index, lineEnd)
+      if (image) {
+        const comment = getAdjacentWidthComment(markdown, image.end)
+        images.push({ ...image, index: images.length, width: comment?.width ?? null })
+        index = image.end
+        continue
+      }
+      index += 1
+    }
+    offset += lineWithEnding[0].length
+  }
+  return images
+}
+
+function getImageOrThrow(markdown: string, imageIndex: number) {
+  if (!Number.isInteger(imageIndex) || imageIndex < 0) throw new RangeError('图片索引无效')
+  const image = getMarkdownImages(markdown)[imageIndex]
+  if (!image) throw new RangeError('未找到对应图片')
+  return image
+}
+
+function assertWidth(width: number) {
+  if (!Number.isSafeInteger(width) || width < 1 || width > IMAGE_WIDTH_MAX) {
+    throw new RangeError(`图片宽度必须是 1 到 ${IMAGE_WIDTH_MAX} 之间的整数像素`)
+  }
+}
+
+/** Adds or replaces the selected image's adjacent zNotes width comment. */
+export function setMarkdownImageWidth(markdown: string, imageIndex: number, width: number) {
+  assertWidth(width)
+  const image = getImageOrThrow(markdown, imageIndex)
+  const comment = getAdjacentWidthComment(markdown, image.end)
+  const replacement = `<!-- znotes:image-width=${width} -->`
+  if (!comment) return `${markdown.slice(0, image.end)}${replacement}${markdown.slice(image.end)}`
+  return `${markdown.slice(0, comment.start)}${replacement}${markdown.slice(comment.end)}`
+}
+
+/** Removes only the selected image's immediately adjacent zNotes width comment. */
+export function clearMarkdownImageWidth(markdown: string, imageIndex: number) {
+  const image = getImageOrThrow(markdown, imageIndex)
+  const comment = getAdjacentWidthComment(markdown, image.end)
+  return comment ? `${markdown.slice(0, comment.start)}${markdown.slice(comment.end)}` : markdown
+}
+
+/** Removes the selected image and its adjacent zNotes width comment, when present. */
+export function removeMarkdownImage(markdown: string, imageIndex: number) {
+  const image = getImageOrThrow(markdown, imageIndex)
+  const comment = getAdjacentWidthComment(markdown, image.end)
+  return `${markdown.slice(0, image.start)}${markdown.slice(comment?.end ?? image.end)}`
+}
+
+/**
+ * Resolves an image index from raw Markdown attributes when a DOM source position is unavailable.
+ * Prefer the image's document-order index when handling a rendered-image context menu.
+ */
+export function findMarkdownImageIndex(markdown: string, criteria: { src?: string; alt?: string; occurrence?: number }) {
+  const { src, alt, occurrence = 0 } = criteria
+  if (src === undefined && alt === undefined) return null
+  if (!Number.isInteger(occurrence) || occurrence < 0) return null
+  const matching = getMarkdownImages(markdown).filter((image) => (
+    (src === undefined || image.src === src) &&
+    (alt === undefined || image.alt === alt)
+  ))
+  return matching[occurrence]?.index ?? null
+}
diff --git a/plugins/ztools-markdown-notes/src/styles.css b/plugins/ztools-markdown-notes/src/styles.css
index 228def242..0478aed00 100644
--- a/plugins/ztools-markdown-notes/src/styles.css
+++ b/plugins/ztools-markdown-notes/src/styles.css
@@ -132,8 +132,35 @@ input { min-width: 0; padding: 10px 12px; border: 1px solid #cbd5e1; border-radi
 .markdown-editor.vditor { width: 100% !important; max-width: none !important; height: 100% !important; border: 0; border-radius: 0; }
 .markdown-editor .vditor-toolbar { padding-right: 5px !important; padding-left: 5px !important; border-top: 0; border-right: 0; border-left: 0; }
 .markdown-editor .vditor-content { min-height: 0; overflow: hidden; }
-.markdown-editor .vditor-ir, .markdown-editor .vditor-sv { min-height: 0; overflow-y: auto !important; padding-right: 35px !important; padding-left: 35px !important; }
+.markdown-editor .vditor-ir, .markdown-editor .vditor-sv { min-height: 0; overflow-y: auto !important; padding-right: 16px !important; padding-left: 28px !important; }
 .markdown-editor .vditor-reset { font-size: var(--editor-font-size, 16px); line-height: var(--editor-line-height, 1.7); }
+.markdown-editor mark { color: inherit; background: color-mix(in srgb, var(--text-highlight-color, #facc15) var(--text-highlight-opacity, 45%), transparent); }
+.markdown-editor .vditor-ir__node--expand[data-type="code-block"] > .vditor-ir__preview { display: none; }
+.code-block-tools { position: absolute; z-index: 3; display: flex; align-items: center; gap: 4px; padding: 3px; border: 1px solid #d6deea; border-radius: 6px; background: rgb(255 255 255 / 94%); box-shadow: 0 2px 8px rgb(15 23 42 / 10%); }
+.code-block-tools input { width: 112px; height: 26px; padding: 2px 7px; border: 0; border-radius: 4px; color: #334155; background-color: transparent; font-size: 12px; }
+.code-block-tools button { height: 26px; padding: 3px 7px; color: #475569; background: #eef2f7; font-size: 12px; }
+.code-language-options { position: absolute; z-index: 4; top: calc(100% + 3px); left: 0; display: grid; width: 190px; max-height: 230px; overflow-y: auto; padding: 4px; border: 1px solid #d6deea; border-radius: 7px; background: #fff; box-shadow: 0 8px 24px rgb(15 23 42 / 16%); }
+.code-language-options button { display: flex; width: 100%; height: auto; min-height: 30px; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 7px; background: transparent; text-align: left; }
+.code-language-options button:hover { background: #eef2f7; }
+.code-language-options small { overflow: hidden; color: #94a3b8; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
+.code-language-options p { margin: 0; padding: 7px; color: #64748b; font-size: 12px; }
+.markdown-editor [data-type="code-block-info"] { display: none !important; }
+.markdown-editor .znotes-image-selected img { outline: 2px solid #3b82f6; outline-offset: 2px; }
+.image-context-menu { position: fixed; z-index: 70; display: grid; min-width: 142px; padding: 5px; border: 1px solid #dce4f0; border-radius: 8px; background: #fff; box-shadow: 0 10px 30px rgb(15 23 42 / 18%); }
+.image-context-menu button { padding: 7px 10px; color: #334155; background: transparent; text-align: left; }
+.image-context-menu button:hover { background: #eef2f7; }
+.image-context-menu .danger-menu-item { color: #b91c1c; }
+.image-size-dialog { display: grid; width: min(380px, 100%); gap: 14px; padding: 22px; border-radius: 14px; background: #fff; box-shadow: 0 24px 70px rgb(15 23 42 / 28%); }
+.image-size-dialog h2, .image-size-dialog p { margin: 0; }
+.image-size-dialog p, .image-size-dialog small { color: #64748b; }
+.image-size-dialog label, .image-size-dialog label span, .image-size-dialog footer { display: flex; align-items: center; }
+.image-size-dialog label { justify-content: space-between; gap: 16px; }
+.image-size-dialog label span { gap: 6px; }
+.image-size-dialog input { width: 110px; }
+.image-size-presets { display: flex; align-items: center; gap: 6px; }
+.image-size-presets > span { margin-right: auto; color: #64748b; font-size: 13px; }
+.image-size-presets button { padding: 5px 7px; color: #475569; background: #eef2f7; font-size: 12px; }
+.image-size-dialog footer { justify-content: flex-end; gap: 8px; }
 .settings-dialog { display: grid; width: min(560px, 100%); max-height: calc(100vh - 32px); grid-template-rows: auto minmax(0, 1fr) auto; gap: 0; overflow: hidden; padding: 20px; border: 1px solid #dce4f0; border-radius: 12px; background: #fff; box-shadow: 0 18px 60px rgb(15 23 42 / 24%); }
 .settings-dialog > header, .settings-dialog > footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
 .settings-dialog > header { margin: 0 -20px; padding: 0 20px 14px; border-bottom: 1px solid #e2e8f0; }
@@ -149,6 +176,8 @@ input { min-width: 0; padding: 10px 12px; border: 1px solid #cbd5e1; border-radi
 .settings-dialog label { display: grid; grid-template-columns: 110px 1fr auto; align-items: center; gap: 10px; margin: 0; }
 .settings-dialog input[type="range"] { padding: 0; }
 .settings-dialog input[type="color"] { width: 52px; height: 34px; padding: 3px; }
+.settings-dialog .color-setting-control { display: flex; min-width: 0; align-items: center; gap: 8px; }
+.settings-dialog .color-setting-control input[type="text"] { width: 92px; padding: 7px 9px; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; text-transform: uppercase; }
 .settings-dialog > footer { justify-content: flex-end; }
 .settings-action-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-top: 12px; border-top: 1px solid #e2e8f0; }
 .settings-group-title + .settings-action-row { padding-top: 0; border-top: 0; }
@@ -223,6 +252,9 @@ input { min-width: 0; padding: 10px 12px; border: 1px solid #cbd5e1; border-radi
 .attachment-scan-list > div { display: flex; justify-content: space-between; gap: 16px; padding: 9px 11px; border-bottom: 1px solid #edf2f7; }
 .attachment-scan-list > div:last-child { border-bottom: 0; }
 .attachment-scan-list span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+@media (max-width: 720px) {
+  .markdown-editor .vditor-ir, .markdown-editor .vditor-sv { padding-right: 12px !important; padding-left: 18px !important; }
+}
 .attachment-scan-list small { flex: 0 0 auto; color: #64748b; }
 .attachment-scan-list > p { padding: 24px; color: #64748b; text-align: center; }
 .note-link-dialog { display: grid; width: min(480px, 100%); max-height: min(560px, calc(100vh - 48px)); grid-template-rows: auto auto minmax(0, 1fr); gap: 12px; padding: 18px; border-radius: 14px; background: #fff; box-shadow: 0 24px 70px rgb(15 23 42 / 28%); }
@@ -285,8 +317,8 @@ input { min-width: 0; padding: 10px 12px; border: 1px solid #cbd5e1; border-radi
 @media (prefers-color-scheme: dark) {
   :root { color: #fff; background: #111827; color-scheme: dark; }
   .app-title { color: #fff; font-weight: 700; }
-  .workspace-view, .panel, .settings-dialog, .confirm-dialog, .save-conflict-dialog, .attachment-scan-dialog, .note-link-dialog, .table-dialog, .trash-panel, .outline-panel { color: #fff; }
-  .panel, .topbar, .workspace-view > aside, .editor-panel, .create-menu-popover, .entry-menu-popover, .editor-more-popover, .confirm-dialog, .save-conflict-dialog, .attachment-scan-dialog, .note-link-dialog, .table-dialog, .trash-panel, .search-results { border-color: #2b3a50; background: #182235; }
+  .workspace-view, .panel, .settings-dialog, .confirm-dialog, .save-conflict-dialog, .attachment-scan-dialog, .note-link-dialog, .table-dialog, .image-size-dialog, .trash-panel, .outline-panel { color: #fff; }
+  .panel, .topbar, .workspace-view > aside, .editor-panel, .create-menu-popover, .entry-menu-popover, .editor-more-popover, .image-context-menu, .confirm-dialog, .save-conflict-dialog, .attachment-scan-dialog, .note-link-dialog, .table-dialog, .image-size-dialog, .trash-panel, .search-results { border-color: #2b3a50; background: #182235; }
   .settings-dialog > header, .settings-dialog > footer, .settings-group, .settings-action-row, .workspace-settings, .workspace-settings-row, .attachment-scan-list, .attachment-scan-list > div { border-color: #2b3a50; }
   .muted, .search-results span, .search-results small, .search-state, .create-target, .pinned-notes h2, .note-find-count, .settings-group-title small, .settings-action-row small, .workspace-settings-header small, .workspace-settings-row small, .trash-retention-setting em, .confirm-dialog p, .workspace-migration-paths dt, .save-conflict-dialog p, .attachment-scan-dialog header p, .attachment-scan-list small, .attachment-scan-list > p, .note-link-list span, .note-link-list p, .table-size-fields span, .table-dialog > p, .trash-header span, .trash-item-info span, .trash-item-info small, .trash-empty span, .outline-empty { color: #d7e0ec; }
   .confirm-dialog .workspace-migration-error { color: #fca5a5; }
@@ -320,6 +352,15 @@ input { min-width: 0; padding: 10px 12px; border: 1px solid #cbd5e1; border-radi
   }
   .markdown-editor.vditor--dark .vditor-reset { color: #edf4ff; }
   .note-find-bar button:hover:not(:disabled) { background: #26354c; }
+  .code-block-tools { border-color: #475569; background: rgb(24 34 53 / 94%); }
+  .code-language-options { border-color: #475569; background: #182235; }
+  .code-language-options small, .code-language-options p { color: #94a3b8; }
+  .code-block-tools input, .code-block-tools button, .image-context-menu button { color: #e5edf8; background-color: transparent; }
+  .code-block-tools button:hover, .image-context-menu button:hover, .image-size-presets button:hover { background: #27364d; }
+  .image-size-presets > span { color: #d7e0ec; }
+  .image-size-presets button { color: #e5edf8; background: #334155; }
+  .image-context-menu .danger-menu-item { color: #fca5a5; }
+  .image-size-dialog p, .image-size-dialog small { color: #d7e0ec; }
   ::highlight(note-find-current) { color: #111827; background: var(--find-highlight-color, #fbbf24); }
   .settings-dialog { border-color: #2b3a50; background: #182235; }
   .settings-switch { color: #d7e0ec; }
diff --git a/plugins/ztools-markdown-notes/src/workspaceSession.ts b/plugins/ztools-markdown-notes/src/workspaceSession.ts
index 8bbd9e26b..dbc660296 100644
--- a/plugins/ztools-markdown-notes/src/workspaceSession.ts
+++ b/plugins/ztools-markdown-notes/src/workspaceSession.ts
@@ -9,9 +9,21 @@ const GLOBAL_NOTE_SEARCH_KEY = 'global-note-search-enabled'
 const GLOBAL_WORKSPACE_SEARCH_KEY = 'global-workspace-search-enabled'
 const HIDDEN_GLOBAL_NOTES_KEY = 'hidden-global-notes'
 
-export type EditorSettings = { fontSize: number; lineHeight: number; findHighlightColor: string }
+export type EditorSettings = {
+  fontSize: number
+  lineHeight: number
+  findHighlightColor: string
+  textHighlightColor: string
+  textHighlightOpacity: number
+}
 export type RegisteredWorkspace = { id: string; name: string; path: string }
-export const defaultEditorSettings: EditorSettings = { fontSize: 16, lineHeight: 1.4, findHighlightColor: '#facc15' }
+export const defaultEditorSettings: EditorSettings = {
+  fontSize: 16,
+  lineHeight: 1.4,
+  findHighlightColor: '#FACC15',
+  textHighlightColor: '#FACC15',
+  textHighlightOpacity: 45,
+}
 export type NoteDraft = {
   workspaceId: string
   relativePath: string
@@ -101,7 +113,9 @@ export function loadEditorSettings(): EditorSettings {
   return {
     fontSize: typeof value?.fontSize === 'number' && value.fontSize >= 12 && value.fontSize <= 24 ? value.fontSize : defaultEditorSettings.fontSize,
     lineHeight: typeof value?.lineHeight === 'number' && value.lineHeight >= 1.2 && value.lineHeight <= 2.4 ? value.lineHeight : defaultEditorSettings.lineHeight,
-    findHighlightColor: typeof value?.findHighlightColor === 'string' && /^#[0-9a-f]{6}$/i.test(value.findHighlightColor) ? value.findHighlightColor : defaultEditorSettings.findHighlightColor,
+    findHighlightColor: normalizeHexColor(value?.findHighlightColor) ?? defaultEditorSettings.findHighlightColor,
+    textHighlightColor: normalizeHexColor(value?.textHighlightColor) ?? defaultEditorSettings.textHighlightColor,
+    textHighlightOpacity: isHighlightOpacity(value?.textHighlightOpacity) ? value.textHighlightOpacity : defaultEditorSettings.textHighlightOpacity,
   }
 }
 
@@ -109,10 +123,22 @@ export function saveEditorSettings(settings: EditorSettings) {
   window.ztools.dbStorage.setItem(EDITOR_SETTINGS_KEY, {
     fontSize: settings.fontSize,
     lineHeight: settings.lineHeight,
-    findHighlightColor: settings.findHighlightColor,
+    findHighlightColor: normalizeHexColor(settings.findHighlightColor) ?? defaultEditorSettings.findHighlightColor,
+    textHighlightColor: normalizeHexColor(settings.textHighlightColor) ?? defaultEditorSettings.textHighlightColor,
+    textHighlightOpacity: isHighlightOpacity(settings.textHighlightOpacity) ? settings.textHighlightOpacity : defaultEditorSettings.textHighlightOpacity,
   })
 }
 
+export function normalizeHexColor(value: unknown): string | null {
+  if (typeof value !== 'string') return null
+  const match = value.trim().match(/^#?([0-9a-f]{6})$/i)
+  return match ? `#${match[1].toUpperCase()}` : null
+}
+
+function isHighlightOpacity(value: unknown): value is number {
+  return typeof value === 'number' && Number.isInteger(value) && value >= 0 && value <= 100
+}
+
 export function loadTrashRetentionDays(): number | null {
   const value = window.ztools.dbStorage.getItem(TRASH_RETENTION_KEY)
   if (value === 'never') return null
diff --git a/plugins/ztools-markdown-notes/tests/imageSizeMetadata.test.cjs b/plugins/ztools-markdown-notes/tests/imageSizeMetadata.test.cjs
new file mode 100644
index 000000000..813e31cf0
--- /dev/null
+++ b/plugins/ztools-markdown-notes/tests/imageSizeMetadata.test.cjs
@@ -0,0 +1,101 @@
+const assert = require('node:assert/strict')
+const fs = require('node:fs')
+const path = require('node:path')
+const test = require('node:test')
+const ts = require('typescript')
+
+function loadImageSizeMetadata() {
+  const filename = path.join(__dirname, '..', 'src', 'imageSizeMetadata.ts')
+  const source = fs.readFileSync(filename, 'utf8')
+  const compiled = ts.transpileModule(source, {
+    compilerOptions: { module: ts.ModuleKind.CommonJS, target: ts.ScriptTarget.ES2022 },
+    fileName: filename,
+  }).outputText
+  const module = { exports: {} }
+  new Function('exports', 'require', 'module', '__filename', '__dirname', compiled)(
+    module.exports,
+    require,
+    module,
+    filename,
+    path.dirname(filename),
+  )
+  return module.exports
+}
+
+const {
+  IMAGE_WIDTH_MAX,
+  clearMarkdownImageWidth,
+  findMarkdownImageIndex,
+  getMarkdownImages,
+  removeMarkdownImage,
+  setMarkdownImageWidth,
+} = loadImageSizeMetadata()
+
+test('adds, replaces, and removes adjacent image-width metadata without changing standard Markdown', () => {
+  const markdown = '![说明](relative/path.png?version=1#preview)'
+  const added = setMarkdownImageWidth(markdown, 0, 640)
+  assert.equal(added, '![说明](relative/path.png?version=1#preview)<!-- znotes:image-width=640 -->')
+  assert.equal(getMarkdownImages(added)[0].width, 640)
+
+  const updated = setMarkdownImageWidth(added, 0, 480)
+  assert.equal(updated, '![说明](relative/path.png?version=1#preview)<!-- znotes:image-width=480 -->')
+  assert.equal(clearMarkdownImageWidth(updated, 0), markdown)
+})
+
+test('updates only the selected image when a note has multiple images', () => {
+  const markdown = [
+    '![第一](one.png)<!-- znotes:image-width=200 -->',
+    '',
+    '![第二](two.png)',
+  ].join('\n')
+  const changed = setMarkdownImageWidth(markdown, 1, 300)
+  assert.equal(changed, [
+    '![第一](one.png)<!-- znotes:image-width=200 -->',
+    '',
+    '![第二](two.png)<!-- znotes:image-width=300 -->',
+  ].join('\n'))
+  assert.equal(clearMarkdownImageWidth(changed, 0), [
+    '![第一](one.png)',
+    '',
+    '![第二](two.png)<!-- znotes:image-width=300 -->',
+  ].join('\n'))
+})
+
+test('ignores malformed width values but can replace or clear their adjacent zNotes comment', () => {
+  const markdown = '![图](a.png)<!-- znotes:image-width=wide -->'
+  assert.equal(getMarkdownImages(markdown)[0].width, null)
+  assert.equal(setMarkdownImageWidth(markdown, 0, 320), '![图](a.png)<!-- znotes:image-width=320 -->')
+  assert.equal(clearMarkdownImageWidth(markdown, 0), '![图](a.png)')
+})
+
+test('does not treat regular links or image-looking code as editable images', () => {
+  const markdown = [
+    '[普通链接](photo.png)',
+    '`![行内](inline.png)`',
+    '```md',
+    '![代码块](fenced.png)',
+    '```',
+    '![真实图片](real.png)',
+  ].join('\n')
+  assert.deepEqual(getMarkdownImages(markdown).map(({ alt, src }) => ({ alt, src })), [{ alt: '真实图片', src: 'real.png' }])
+})
+
+test('finds image indexes by source and alt, including duplicate sources', () => {
+  const markdown = '![a](same.png)\n![b](same.png)\n![c](other.png)'
+  assert.equal(findMarkdownImageIndex(markdown, { src: 'same.png', alt: 'b' }), 1)
+  assert.equal(findMarkdownImageIndex(markdown, { src: 'same.png', occurrence: 1 }), 1)
+  assert.equal(findMarkdownImageIndex(markdown, { src: 'missing.png' }), null)
+})
+
+test('rejects unsafe width and image index values', () => {
+  const markdown = '![图](a.png)'
+  assert.throws(() => setMarkdownImageWidth(markdown, 0, 0), RangeError)
+  assert.throws(() => setMarkdownImageWidth(markdown, 0, IMAGE_WIDTH_MAX + 1), RangeError)
+  assert.throws(() => setMarkdownImageWidth(markdown, 1, 100), RangeError)
+})
+
+test('removes an image and its adjacent width metadata in one operation', () => {
+  const markdown = '前文 ![图](a.png)<!-- znotes:image-width=320 --> 后文'
+  assert.equal(removeMarkdownImage(markdown, 0), '前文  后文')
+  assert.equal(removeMarkdownImage('![图](a.png)\n下一行', 0), '\n下一行')
+})
diff --git a/plugins/ztools-markdown-notes/tests/workspace.test.cjs b/plugins/ztools-markdown-notes/tests/workspace.test.cjs
index 6627d4731..a69c8d962 100644
--- a/plugins/ztools-markdown-notes/tests/workspace.test.cjs
+++ b/plugins/ztools-markdown-notes/tests/workspace.test.cjs
@@ -359,10 +359,16 @@ test('moves notes into directories and preserves their relative link targets', a
     await workspace.createDirectory(directory, '', '目标')
     await workspace.createNote(directory, '', '笔记')
     await fs.writeFile(path.join(directory, '资料.txt'), 'data')
-    await fs.writeFile(path.join(directory, '笔记.md'), '[资料](资料.txt)')
+    await fs.writeFile(path.join(directory, '笔记.md'), [
+      '[资料](资料.txt)',
+      '![图片](资料.txt?version=1#预览)<!-- znotes:image-width=640 -->',
+    ].join('\n'))
 
     assert.equal(await workspace.moveEntry(directory, '笔记.md', '目标'), '目标/笔记.md')
-    assert.equal(await fs.readFile(path.join(directory, '目标', '笔记.md'), 'utf8'), '[资料](../%E8%B5%84%E6%96%99.txt)')
+    assert.equal(await fs.readFile(path.join(directory, '目标', '笔记.md'), 'utf8'), [
+      '[资料](../%E8%B5%84%E6%96%99.txt)',
+      '![图片](../%E8%B5%84%E6%96%99.txt?version=1#预览)<!-- znotes:image-width=640 -->',
+    ].join('\n'))
     await assert.rejects(() => workspace.moveEntry(directory, '目标', '目标'), { code: 'INVALID_MOVE_TARGET' })
   })
 })