详细说明: - 基于文旅订单班框架复制创建food-order-demo项目 - 修改端口配置为4174避免冲突 - 更新LandingPage为青莳轻食主题(绿色健康风格) - 重新定义7个食品行业专业Agent: * 市场研究专家:轻食市场分析、客群画像 * 营养配方师:营养成分配比、低卡高蛋白设计 * 供应链管理专家:有机食材供应、溯源体系 * 品牌策划师:品牌定位、店铺空间布局 * 财务分析师:投资预算、ROI分析 * 运营管理专家:运营流程、品控标准 * 食品创业导师:中央协调、方案整合 - 创建专用启动脚本start.sh - 验证系统可正常运行在端口4174 - 实现代码复用率90%,符合预期目标 影响文件: web_frontend/food-order-demo/ 技术栈: React 18 + TypeScript + Tailwind CSS + Zustand
7.9 KiB
lowlight
Virtual syntax highlighting for virtual DOMs and non-HTML things, with language auto-detection. Perfect for React, VDOM, and others.
Lowlight is built to work with all syntaxes supported by highlight.js, that’s 191 languages (and all 94 themes).
Want to use Prism instead?
Try refractor!
Contents
Install
npm:
npm install lowlight
Use
Highlight:
var low = require('lowlight')
var tree = low.highlight('js', '"use strict";').value
console.log(tree)
Yields:
[
{
type: 'element',
tagName: 'span',
properties: {className: ['hljs-meta']},
children: [{type: 'text', value: '"use strict"'}]
},
{type: 'text', value: ';'}
]
Or, serialized with rehype-stringify:
var unified = require('unified')
var rehypeStringify = require('rehype-stringify')
var processor = unified().use(rehypeStringify)
var html = processor.stringify({type: 'root', children: tree}).toString()
console.log(html)
Yields:
<span class="hljs-meta">"use strict"</span>;
Tip
: Use
hast-to-hyperscriptto transform to other virtual DOMs, or DIY.
API
low.highlight(language, value[, options])
Parse value (string) according to the language grammar.
options
prefix(string?, default:'hljs-') — Class prefix
Returns
Example
var low = require('lowlight')
console.log(low.highlight('css', 'em { color: red }'))
Yields:
{relevance: 4, language: 'css', value: [Array]}
low.highlightAuto(value[, options])
Parse value by guessing its grammar.
options
prefix(string?, default:'hljs-') — Class prefixsubset(Array.<string>?default: all registered languages) — List of allowed languages
Returns
Result, with a secondBest if found.
Example
var low = require('lowlight')
console.log(low.highlightAuto('"hello, " + name + "!"'))
Yields:
{
relevance: 3,
language: 'applescript',
value: [Array],
secondBest: {relevance: 3, language: 'basic', value: [Array]}
}
Result
Result is a highlighting result object.
Properties
relevance(number) — How sure low is that the given code is in the found languagelanguage(string) — The detectedlanguagevalue(Array.<Node>) — Virtual nodes representing the highlighted given codesecondBest(Result?) — Result of the second-best (based onrelevance) match. Only set byhighlightAuto, but can still benull.
low.registerLanguage(name, syntax)
Register a syntax as name (string).
Useful in the browser or with custom grammars.
Example
var low = require('lowlight/lib/core')
var xml = require('highlight.js/lib/languages/xml')
low.registerLanguage('xml', xml)
console.log(low.highlight('html', '<em>Emphasis</em>'))
Yields:
{relevance: 2, language: 'html', value: [Array]}
low.registerAlias(name[, alias])
Register a new alias for the name language.
Signatures
registerAlias(name, alias|list)registerAlias(aliases)
Parameters
name(string) — Name of a registered languagealias(string) — New alias for the registered languagelist(Array.<alias>) — List of aliasesaliases(Object.<alias|list>) — Map where each key is anameand each value analiasor alist
Example
var low = require('lowlight/lib/core')
var md = require('highlight.js/lib/languages/markdown')
low.registerLanguage('markdown', md)
// low.highlight('mdown', '<em>Emphasis</em>')
// ^ would throw: Error: Unknown language: `mdown` is not registered
low.registerAlias({markdown: ['mdown', 'mkdn', 'mdwn', 'ron']})
low.highlight('mdown', '<em>Emphasis</em>')
// ^ Works!
low.listLanguages()
List all registered languages.
Returns
Array.<string>.
Example
var low = require('lowlight/lib/core')
var md = require('highlight.js/lib/languages/markdown')
console.log(low.listLanguages()) // => []
low.registerLanguage('markdown', md)
console.log(low.listLanguages()) // => ['markdown']
Browser
It is not suggested to use the pre-built files or requiring lowlight in the
browser as that would include 916kB (260kB GZipped) of code.
Instead, require lowlight/lib/core, and include only the used highlighters.
For example:
var low = require('lowlight/lib/core')
var js = require('highlight.js/lib/languages/javascript')
low.registerLanguage('javascript', js)
low.highlight('js', '"use strict";')
// See `Usage` for the results.
…when using browserify and minifying with tinyify this results in 24kB of code (9kB with GZip).
Related
Projects
emphasize— Syntax highlighting in ANSI, for the terminalreact-lowlight— Syntax highlighter for Reactreact-syntax-highlighter— React component for syntax highlightingrehype-highlight— Syntax highlighting in rehyperemark-highlight.js— Syntax highlighting in remarkjstransformer-lowlight— Syntax highlighting for JSTransformers and Pug