最近遇到需求，需要将代码在前端进行展示编辑，但是直接在文本展示会出现代码不整齐情况，格式化就需要嵌入代码编辑器。

老规矩废话不多说，上代码！！！！！！！！！！！

一、使用 vue-prism-editor 插件实现

• 安装

npm i prismjs vue-prism-editor -S
// 或者
cnpm i prismjs vue-prism-editor 
//或者
yarn add prismjs vue-prism-editor

• 代码实现

  
    

       HelloWorld
  





/* required class */
.my-editor {
  background: #2d2d2d;
  color: #ccc;
  font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
  font-size: 14px;
  line-height: 1.5;
  padding: 5px;
}

/* optional */
.prism-editor__textarea:focus {
  outline: none;
}

/* not required: */
.height-300 {
  height: 1000px;
  width: 1000px;
}

• 效果预览

二、使用 vue2-ace-editor 插件实现

• 安装

npm i vue2-ace-editor -S
// 或者
cnpm i vue2-ace-editor -S

• 代码实现

	
		
	

 

 

	.codeEditBox {
		width: 100%;
		height: 200px;
	}

• vue2-ace-editor相比于vue-prism-editor可以实现代码的提示功能
• 效果预览