diff --git a/src/components/CodemirrorEditor/EditorHeader/index.vue b/src/components/CodemirrorEditor/EditorHeader/index.vue
index 3a90d23..28d106f 100644
--- a/src/components/CodemirrorEditor/EditorHeader/index.vue
+++ b/src/components/CodemirrorEditor/EditorHeader/index.vue
@@ -379,6 +379,31 @@ function customStyle() {
+
自定义 CSS 面板
diff --git a/src/stores/index.ts b/src/stores/index.ts
index 9982dba..fa3688b 100644
--- a/src/stores/index.ts
+++ b/src/stores/index.ts
@@ -28,6 +28,10 @@ export const useStore = defineStore(`store`, () => {
const isCiteStatus = useStorage(`isCiteStatus`, false)
const toggleCiteStatus = useToggle(isCiteStatus)
+ // 是否开启段落首行缩进
+ const isUseIndent = useStorage(addPrefix(`use_indent`), true)
+ const toggleUseIndent = useToggle(isUseIndent)
+
const output = ref(``)
// 文本字体
@@ -133,12 +137,13 @@ export const useStore = defineStore(`store`, () => {
theme: customCssWithTemplate(css2json(getCurrentTab().content), primaryColor.value, customizeTheme(themeMap[theme.value], { fontSize: fontSizeNumber.value, color: primaryColor.value })),
fonts: fontFamily.value,
size: fontSize.value,
+ isUseIndent: isUseIndent.value,
})
// 更新编辑器
const editorRefresh = () => {
codeThemeChange()
- renderer.reset({ status: isCiteStatus.value, legend: legend.value })
+ renderer.reset({ status: isCiteStatus.value, legend: legend.value, isUseIndent: isUseIndent.value })
let outputTemp = marked.parse(editor.value!.getValue()) as string
// 去除第一行的 margin-top
@@ -318,6 +323,10 @@ export const useStore = defineStore(`store`, () => {
toggleCiteStatus()
})
+ const useIndentChanged = withAfterRefresh(() => {
+ toggleUseIndent()
+ })
+
// 导出编辑器内容为 HTML,并且下载到本地
const exportEditorContent2HTML = () => {
exportHTML()
@@ -389,6 +398,8 @@ export const useStore = defineStore(`store`, () => {
isMacCodeBlock,
isCiteStatus,
citeStatusChanged,
+ isUseIndent,
+ useIndentChanged,
output,
editor,
diff --git a/src/types/index.ts b/src/types/index.ts
index fe9372b..c71a060 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -20,6 +20,7 @@ export interface IOpts {
theme: Theme
fonts: string
size: string
+ isUseIndent: boolean
legend?: string
status?: boolean
}
diff --git a/src/utils/renderer.ts b/src/utils/renderer.ts
index 0d25d15..b1c18c1 100644
--- a/src/utils/renderer.ts
+++ b/src/utils/renderer.ts
@@ -1,7 +1,7 @@
import type { ExtendedProperties, IOpts, ThemeStyles } from '@/types'
import type { PropertiesHyphen } from 'csstype'
import type { Renderer, RendererObject, Tokens } from 'marked'
-import { toMerged } from 'es-toolkit'
+import { cloneDeep, toMerged } from 'es-toolkit'
import hljs from 'highlight.js'
import { marked } from 'marked'
@@ -10,12 +10,20 @@ import { MDKatex } from './MDKatex'
marked.use(MDKatex({ nonStandard: true }))
-function buildTheme({ theme, fonts, size }: IOpts): ThemeStyles {
+function buildTheme({ theme: _theme, fonts, size, isUseIndent }: IOpts): ThemeStyles {
+ const theme = cloneDeep(_theme)
const base = toMerged(theme.base, {
'font-family': fonts,
'font-size': size,
})
+ if (isUseIndent) {
+ theme.block.p = {
+ 'text-indent': `2em`,
+ ...theme.block.p,
+ }
+ }
+
const mergeStyles = (styles: Record): Record =>
Object.fromEntries(
Object.entries(styles).map(([ele, style]) => [ele, toMerged(base, style)]),