xiaoqi/n8n_Demo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
ab20a4b2315cf53a3d0579f66b4500bc4347a0c1
n8n_Demo/web_frontend/food-order-demo/node_modules/refractor
History
Yep_Q c3eb7125cc feat: 创建食品订单班演示系统基础框架 
详细说明:
- 基于文旅订单班框架复制创建food-order-demo项目
- 修改端口配置为4174避免冲突
- 更新LandingPage为青莳轻食主题（绿色健康风格）
- 重新定义7个食品行业专业Agent：
  * 市场研究专家：轻食市场分析、客群画像
  * 营养配方师：营养成分配比、低卡高蛋白设计
  * 供应链管理专家：有机食材供应、溯源体系
  * 品牌策划师：品牌定位、店铺空间布局
  * 财务分析师：投资预算、ROI分析
  * 运营管理专家：运营流程、品控标准
  * 食品创业导师：中央协调、方案整合
- 创建专用启动脚本start.sh
- 验证系统可正常运行在端口4174
- 实现代码复用率90%，符合预期目标

影响文件: web_frontend/food-order-demo/
技术栈: React 18 + TypeScript + Tailwind CSS + Zustand
2025-09-28 10:32:44 +08:00
..
lang
feat: 创建食品订单班演示系统基础框架
2025-09-28 10:32:44 +08:00
node_modules
feat: 创建食品订单班演示系统基础框架
2025-09-28 10:32:44 +08:00
core.js
feat: 创建食品订单班演示系统基础框架
2025-09-28 10:32:44 +08:00
index.js
feat: 创建食品订单班演示系统基础框架
2025-09-28 10:32:44 +08:00
license
feat: 创建食品订单班演示系统基础框架
2025-09-28 10:32:44 +08:00
package.json
feat: 创建食品订单班演示系统基础框架
2025-09-28 10:32:44 +08:00
readme.md
feat: 创建食品订单班演示系统基础框架
2025-09-28 10:32:44 +08:00

readme.md

refractor

Build Coverage Downloads Size

Lightweight, robust, elegant virtual syntax highlighting using Prism. Useful for virtual DOMs and non-HTML things. Perfect for React, VDOM, and others.

refractor is built to work with all syntaxes supported by Prism, that’s 277 languages (as of prism@1.27.0) and all themes.

Want to use highlight.js instead? Try lowlight!

Contents

Install

npm:

npm install refractor

Use in the browser »

Use

var refractor = require('refractor')

var nodes = refractor.highlight('"use strict";', 'js')

console.log(nodes)

Yields:

[
  {
    type: 'element',
    tagName: 'span',
    properties: {className: ['token', 'string']},
    children: [{type: 'text', value: '"use strict"'}]
  },
  {
    type: 'element',
    tagName: 'span',
    properties: {className: ['token', 'punctuation']},
    children: [{type: 'text', value: ';'}]
  }
]

Which serialized with rehype or hast-util-to-html yields (you may have to wrap it into a fragment like so: {type: 'root', children: nodes}):

<span class="token string">"use strict"</span><span class="token punctuation">;</span>

Tip

: Use hast-to-hyperscript to transform to other virtual DOMs, or DIY.

API

refractor.register(syntax)

Register a syntax. Needed if you’re using refractor/core.

Example
var refractor = require('refractor/core')
var markdown = require('refractor/lang/markdown')

refractor.register(markdown)

console.log(refractor.highlight('*Emphasis*', 'markdown'))

Yields:

[
  {
    type: 'element',
    tagName: 'span',
    properties: {className: [Array]},
    children: [[Object], [Object], [Object]]
  }
]

refractor.alias(name[, alias])

Register a new alias for the name language.

Signatures
  • alias(name, alias|list)
  • alias(aliases)
Parameters
  • name (string) — Name of a registered language
  • alias (string) — New alias for the registered language
  • list (Array.<alias>) — List of aliases
  • aliases (Object.<alias|list>) — Map where each key is a name and each value an alias or a list
Example
var refractor = require('refractor/core')
var markdown = require('refractor/lang/markdown')

refractor.register(markdown)

// refractor.highlight('*Emphasis*', 'mdown')
// ^ would throw: Error: Unknown language: `mdown` is not registered

refractor.alias({markdown: ['mdown', 'mkdn', 'mdwn', 'ron']})
refractor.highlight('*Emphasis*', 'mdown')
// ^ Works!

refractor.highlight(value, language)

Parse value (string) according to the language (name or alias) syntax.

Returns

Virtual nodes representing the highlighted value (Array.<Node>).

Example
var refractor = require('refractor/core')

console.log(refractor.highlight('em { color: red }', 'css'))

Yields:

[
  {
    type: 'element',
    tagName: 'span',
    properties: {className: [Array]},
    children: [[Object]]
  },
  {type: 'text', value: ' '},
  // …
  {type: 'text', value: ' red '},
  {
    type: 'element',
    tagName: 'span',
    properties: {className: [Array]},
    children: [[Object]]
  }
]

refractor.registered(language)

Check if a language (name or alias) is registered.

Example
var refractor = require('refractor/core')
var markdown = require('refractor/lang/markdown')

console.log(refractor.registered('markdown'))

refractor.register(markdown)

console.log(refractor.registered('markdown'))

Yields:

false
true

refractor.listLanguages()

List all registered languages (names and aliases).

Returns

Array.<string>.

Example
var refractor = require('refractor/core')
var markdown = require('refractor/lang/markdown')

console.log(refractor.listLanguages())

refractor.register(markdown)

console.log(refractor.listLanguages())

Yields:

[
  'markup',
  'html',
  // …
  'javascript',
  'js'
]
[
  'markup',
  'html',
  // …
  'javascript',
  'js',
  'markdown',
  'md'
]

Browser

I do not suggest using the pre-bundled files or requiring refractor itself in the browser as that would include a 376kb (139kb GZipped) of code.

Instead require refractor/core and include only the needed syntaxes. For example:

var refractor = require('refractor/core')

refractor.register(require('refractor/lang/jsx'))

console.log(refractor.highlight('<Dropdown primary />', 'jsx'))

Yields:

[
  {
    type: 'element',
    tagName: 'span',
    properties: {className: ['token', 'tag']},
    children: [
      {type: 'element', tagName: 'span', properties: {className: [Array]}, children: [[Object], [Object]]},
      {type: 'text', value: ' '},
      {type: 'element', tagName: 'span', properties: {className: [Array]}, children: [[Object]]},
      {type: 'text', value: ' '},
      {type: 'element', tagName: 'span', properties: {className: [Array]}, children: [[Object]]}
    ]
  }
]

…When using browserify and minifying with tinyify this results in just 65kb of code (23kb with GZip).

Plugins

refractor does not support Prism plugins:

  1. Prism plugins often deal with the DOM, not Prism tokens
  2. Prism is made using global variables instead of a module format, so all syntaxes below are custom built to work so you can require just what you need

Syntaxes

All syntaxes are included if you require('refractor'). If you’re using refractor/core, checked syntaxes are always included, but unchecked syntaxes are not and must be required and registered.

Unlike in Prism, cssExtras and phpExtras are camel-cased instead of dash-cased.

Only these custom built syntaxes will work with refractor because Prism’s own syntaxes are made to work with global variables and are not requirable.

Related

Projects

License

MIT © Titus Wormer