@calumk/codecup

编码器:一个用于超级网页的微码编辑器.
(原始内容存档于2013-10-12) (中文(简体) ) 代码Flask(中文(简体) )

为什么?

CodeFlask是一个辉煌的项目,但似乎没有得到维护,它需要一些重大更新才能与我正在研究的新项目合作.

厨房下沉示例

cup = new codecup('#cf_holder', { 
    language: "javascript",
    lineNumbers: true ,
    copyButton: true,
    maxLines : 15,
    minLines : 5
});

变动

• 添加最大行号选项
• 从滚动到网络包装
• 已添加示例文件夹
• 禁用e2e测试
• 小型主题曲折 (边界,圆角. )
• 更新了所有 codeflask 引用到 codecup - 第13/11/2023号决议

[大 语言现在被加载了 async (通过棱镜), 这样您就可以加载您想要的任何语言, 而无需全部捆绑它们 。 - 2024年1月),字相会

[注] 所支持的语文有: https://prismjs.com/#被支持的语言

核心更改为 PR

(转入 公关 给CodeFlask,以防它再次被捡起)

• 添加支持以毁灭
• 添加/ 删除行号
• 已添加行数切换
• 添加只读切换

安装

您可以通过 npm 安装代码:

npm i @calumk/codecup

或者通过cdn服务在浏览器中直接使用:

https://cdn.jsdelivr.net/npm/@calumk/codecup

使用量

import codecup from '@calumk/codecup';

const cup = new codecup('#my-selector', { language: 'js' });

您也可以通过 DOM 元素而不是选择器 :

import codecup from 'codecup';

const editorElem = document.getElementById('editor');
const cup = new codecup(editorElem, { language: 'js' });

使用阴影 DOM :

import codecup from 'codecup';
...
const shadowElem = this.shadowRoot.querySelector('#editor');
const cup = new codecup(shadowElem, { language: 'js', styleParent: this.shadowRoot });

正在监听编辑器的更改

cup.onUpdate((code) => {
  // do something with code here.
  // this will trigger whenever the code
  // in the editor changes.
});

程序更新编辑器

// This will also trigger .onUpdate()
cup.updateCode('const my_new_code_here = "Blabla"');

从编辑器获取当前代码

const code = cup.getCode();

复制按钮

现在默认启用了复制按钮,单击后将把代码复制到剪贴板上.

它可以通过路过而被禁用 copyButton: false 在选项中.

const cup = new codecup('#my-selector', {
  language: 'javascript',
  copyButton: false
});

启用行号

import codecup from 'codecup';

const cup = new codecup('#my-selector', {
  language: 'js',
  lineNumbers: true
});

您也可以在编辑器创建后切换行号 :

cup.toggleLineNumbers();

设置最大行和分行

[大 截止 1.90,也可以设置最大行号,(默认为100),而分行号,(默认为1)

[注] 如果你想成为固定的行数,将两者设置为同数.

import codecup from 'codecup';

const cup = new codecup('#my-selector', {
  language: 'js',
  lineNumbers: true,
  maxLines: 10,
  minLines: 10
});

允许只读模式

import codecup from 'codecup';

const cup = new codecup('#my-selector', {
  language: 'javascript',
  readonly: true
});

更改其他语言支持 :

cup.updateLanguage('ruby')
// 
cup.updateLanguage('javascript')
//

将“ Ruby” 动态变化添加到“ javascript” 的示例

import Prism from 'prismjs';
import codecup from 'codecup';

const cup = new codecup('#my-selector', {
  language: 'ruby',
  readonly: true
});

cup.updateLanguage('javascript');