SVeditor公众号排版编辑器优化:优化色彩和背景主题、新增字体大小、支持47+种编程语言26+款代码块主题
前言:SVeditor公众号排版编辑器此次优化了更多功能。方格背景和横线笔记背景主题的线条优化、侧边栏主题面板新增正文字号的设置栏目、本地编辑模式的布局优化、支持47+种编程语言26+款代码块主题,丰富编辑体验。
更新1:方格背景和横线笔记背景的线条颜色调整的更浅一点,提高阅读体验
以往的方格背景主题和横线线条笔记很容易让文本编辑视觉很不好看,所以此次淡化了这两个主题的线条深度


更新2:一键更改整体字体大小
对于文案较为密集的文章,可以选择不同的正文字号进行优化排版

更新3:更新本地本地模式布局

更新4:支持47+种编程语言26+款代码块主题
-
当前编辑器支持 Python、Java、Go、Rust、PHP、Ruby、Kotlin、C、C++、C#、Swift、Objective-C、JavaScript、TypeScript、JSX、TSX、HTML、CSS、SCSS、JSON、YAML、Markdown、Dockerfile、Makefile、SQL、GraphQL、Svelte、Astro、Angular HTML、Angular TypeScript、PowerShell、Dart、Elixir、Lua、R、Scala、Zig、TOML、XML、Diff、Mermaid、Solidity、WebAssembly、Regex、Shell、Plain Text、Vue 等语言与格式的代码高亮支持。
-
当前编辑器支持 Dracula、Tokyo Night、Dark Plus、Light Plus、Monokai、Night Owl、Night Owl Light、Catppuccin Latte、Catppuccin Mocha、Vitesse Light、Vitesse Dark、GitHub Light、GitHub Dark、GitHub Dark Dimmed、GitHub Dark High Contrast、GitHub Light High Contrast、Solarized Dark、Solarized Light、Rose Pine、Rose Pine Dawn、Rose Pine Moon、Gruvbox Dark Medium、Gruvbox Light Medium、One Light、One Dark Pro、Nord 等代码主题切换。
部分主题截图如下:
GitHub Light
import * as React from "react";type PossibleRef<T> = React.Ref<T> | undefined;/** * Set a given ref to a given value * This utility takes care of different types of refs: callback refs and RefObject(s) */function setRef<T>(ref: PossibleRef<T>, value: T) { if (typeof ref === "function") { return ref(value); } if (ref !== null && ref !== undefined) { (ref as React.MutableRefObject<T>).current = value; }}
GitHub Dark
import * as React from "react";type PossibleRef<T> = React.Ref<T> | undefined;/** * Set a given ref to a given value * This utility takes care of different types of refs: callback refs and RefObject(s) */function setRef<T>(ref: PossibleRef<T>, value: T) { if (typeof ref === "function") { return ref(value); } if (ref !== null && ref !== undefined) { (ref as React.MutableRefObject<T>).current = value; }}
One Light
import * as React from "react";type PossibleRef<T> = React.Ref<T> | undefined;/** * Set a given ref to a given value * This utility takes care of different types of refs: callback refs and RefObject(s) */function setRef<T>(ref: PossibleRef<T>, value: T) { if (typeof ref === "function") { return ref(value); } if (ref !== null && ref !== undefined) { (ref as React.MutableRefObject<T>).current = value; }}
One Dark Pro
import * as React from "react";type PossibleRef<T> = React.Ref<T> | undefined;/** * Set a given ref to a given value * This utility takes care of different types of refs: callback refs and RefObject(s) */function setRef<T>(ref: PossibleRef<T>, value: T) { if (typeof ref === "function") { return ref(value); } if (ref !== null && ref !== undefined) { (ref as React.MutableRefObject<T>).current = value; }}
Nord
import * as React from "react";type PossibleRef<T> = React.Ref<T> | undefined;/** * Set a given ref to a given value * This utility takes care of different types of refs: callback refs and RefObject(s) */function setRef<T>(ref: PossibleRef<T>, value: T) { if (typeof ref === "function") { return ref(value); } if (ref !== null && ref !== undefined) { (ref as React.MutableRefObject<T>).current = value; }}
Dracula
import * as React from "react";type PossibleRef<T> = React.Ref<T> | undefined;/** * Set a given ref to a given value * This utility takes care of different types of refs: callback refs and RefObject(s) */function setRef<T>(ref: PossibleRef<T>, value: T) { if (typeof ref === "function") { return ref(value); } if (ref !== null && ref !== undefined) { (ref as React.MutableRefObject<T>).current = value; }}
Tokyo Night
import * as React from "react";type PossibleRef<T> = React.Ref<T> | undefined;/** * Set a given ref to a given value * This utility takes care of different types of refs: callback refs and RefObject(s) */function setRef<T>(ref: PossibleRef<T>, value: T) { if (typeof ref === "function") { return ref(value); } if (ref !== null && ref !== undefined) { (ref as React.MutableRefObject<T>).current = value; }}
Dark Plus
import * as React from "react";type PossibleRef<T> = React.Ref<T> | undefined;/** * Set a given ref to a given value * This utility takes care of different types of refs: callback refs and RefObject(s) */function setRef<T>(ref: PossibleRef<T>, value: T) { if (typeof ref === "function") { return ref(value); } if (ref !== null && ref !== undefined) { (ref as React.MutableRefObject<T>).current = value; }}
Light Plus
import * as React from "react";type PossibleRef<T> = React.Ref<T> | undefined;/** * Set a given ref to a given value * This utility takes care of different types of refs: callback refs and RefObject(s) */function setRef<T>(ref: PossibleRef<T>, value: T) { if (typeof ref === "function") { return ref(value); } if (ref !== null && ref !== undefined) { (ref as React.MutableRefObject<T>).current = value; }}
……
夜雨聆风