vim设置行号语法高亮_简陋的简单代码编辑器，带有语法突出显示和行号

vim设置行号语法高亮

Vue Prism编辑器 (Vue Prism Editor)

A dead simple code editor with syntax highlighting and line numbers. 7kb/gz

简陋的简单代码编辑器，带有语法突出显示和行号。 7kb /克

View demo 查看演示 Codesandbox demo Codesandbox演示 Codepen demo Codepen演示

特征 (Features)

• Code Editing ^^

  代码编辑^^

• Syntax highlighting

  语法高亮

• Undo / Redo

  撤销重做

• Copy / Paste

  复制粘贴

• The spaces/tabs of the previous line is preserved when a new line is added

  添加新行时，保留前一行的空格/制表符

• Works on mobile (thanks to contenteditable)

  可在移动设备上使用(感谢contenteditable)

• Resize to parent width and height ^new

  调整为^新的父级宽度和高度

• Support for line numbers ^new

  支持行号^新

• Support for autosizing the editor ^new

  支持自动编辑编辑器^new

• Autostyling the linenumbers(optional) ^new

  自动设置行号(可选) ^新

用例 (Use Case)

The goal of this project is to have a simple code editor. You can use to make small changes of some content or you just need a textarea with syntax highlighting. That's what it's good for. If you need an advanced code editor use Codemirror or Monaco Editor.

该项目的目标是拥有一个简单的代码编辑器。 您可以用来对某些内容进行少量更改，或者只需要带有语法高亮显示的文本区域。 这就是它的好处。 如果需要高级代码编辑器，请使用Codemirror或Monaco Editor。

安装 (Install)

npm install vue-prism-editor

or

要么

yarn add vue-prism-editor

用法 (Usage)

Register the component locally and use it (recommended)

在本地注册组件并使用(推荐)

<template>
  <prism-editor :code="code" language="js"></prism-editor>
</template>

<script>
import PrismEditor from 'vue-prism-editor'
export default {
  components: {
    PrismEditor
  }
}
</script>

Or register the component globally in main.js

或在main.js全局注册组件

import VuePrismEditor from "vue-prism-editor";
import "vue-prism-editor/dist/VuePrismEditor.css"; // import the styles
Vue.component("prism-editor", VuePrismEditor);

Browser usage:

浏览器用法：

<!-- vue-prism-editor JavaScript -->
<script src="https://unpkg.com/vue-prism-editor"></script>

<!-- vue-prism-editor CSS -->
<link rel="stylesheet" href="https://unpkg.com/vue-prism-editor/dist/VuePrismEditor.css">

<!-- use -->
<script>
Vue.component('vue-prism-editor', VuePrismEditor)
new Vue({
    el: '#app'
})
</script>

棱镜 (Prismjs)

This package won't install Prismjs. If you use Prismjs already skip this step. If not you need to load Prismjs somewhere in your app:

该软件包不会安装Prismjs。 如果您使用Prismjs，则已经跳过此步骤。 如果不是，则需要在应用程序中的某个位置加载Prismjs：

// yarn add prismjs
import "prismjs";
import "prismjs/themes/prism.css";

OR:

要么：

<link rel="stylesheet" href="https://unpkg.com/prismjs/themes/prism.css" />
<script src="https://unpkg.com/prismjs"></script>

道具 (Props)

Name	Type	Default	Options	Description
v-model	string	-	-	for the code prop below
code	string	""	-	the code
language	String	"js"	vue,html,md,ts + Prismjs Languages	language of the code
lineNumbers	Boolean	false	-	Whether to show line numbers or not
readonly	Boolean	false	-	Indicates if the editor is read only or not.
emitEvents	Boolean	false	-	Indicates if the editor should emit events.
autoStyleLineNumbers	Boolean	true	-	Allow the line number to be styled by this component.

名称	类型	默认	选件	描述
模型	string	--	--	对于下面的code道具
码	string	""	--	代码
语言	String	"js"	vue,html,md,ts + Prismjs语言	代码语言
lineNumbers	Boolean	false	--	是否显示行号
只读	Boolean	false	--	指示编辑器是否为只读。
发出事件	Boolean	false	--	指示编辑器是否应该发出事件。
autoStyleLineNumbers	Boolean	true	--	允许该组件设置行号。

大事记 (Events)

Name	Parameters	Description
change	(code)	Fires when the code is changed.

名称	参量	描述
更改	(code)	更改代码时触发。

The events below won't be fired unless you set the emitEvents prop to true.

除非您将emitEvents设置为true否则不会触发以下事件。

Name	Parameters	Description
keydown	(event)	This event is emitted when a keydown event happens in editor
keyup	(event)	This event is emitted when a keyup event happens in editor
editor-click	(event)	This event is emitted when clicking anywhere in the contenteditable editor

名称	参量	描述
按键	(event)	当编辑器中发生keydown事件时，将发出此事件
键控	(event)	当编辑器中发生键入事件时，将发出此事件
单击编辑器	(event)	在contenteditable编辑器中的任何位置单击时都会发出此事件

翻译自: https://vuejsexamples.com/a-dead-simple-code-editor-with-syntax-highlighting-and-line-numbers/

vim设置行号语法高亮