Syntax Highlighting 및 Line Number가있는 Dead Simple Code 편집기. 3KB/Z
편집자는 VUE 2.X 및 VUE 3.X 모두에서 작동하며 현재 VUE 2.X를 지원하는 지점에 있습니다. VUE 3.X 호환 버전을 보려면 여기로 이동하십시오
prism-editor.netlify.com
ACE, Codemirror, Monaco 등과 같은 여러 브라우저 기반 코드 편집기는 웹 페이지에 전체 기능을 갖춘 코드 편집기를 포함시킬 수있는 기능을 제공합니다. 그러나 추가 기능이없는 구문 강조 표시가있는 간단한 편집기가 필요한 경우 일반적으로 작은 번들 크기의 풋 프린트가 없기 때문에 과잉이 될 수 있습니다. 이 라이브러리는 추가 기능이없는 구문 강조 지원이있는 간단한 코드 편집기를 제공하는 것을 목표로합니다. 간단한 임베드 및 사용자가 코드를 제출할 수있는 양식에 적합합니다.
npm install vue-prism-editor또는
yarn add vue-prism-editor구문 강조 표시를 제공하는 타사 라이브러리와 함께 편집기를 사용해야합니다. 예를 들어, Prismjs를 따르는 것처럼 보입니다.
구성 요소를 로컬로 등록하고 사용하십시오 (권장)
< template >
< prism-editor class =" my-editor " v-model =" code " :highlight =" highlighter " line-numbers > </ prism-editor >
</ template >
< script >
// import Prism Editor
import { PrismEditor } from 'vue-prism-editor' ;
import 'vue-prism-editor/dist/prismeditor.min.css' ; // import the styles somewhere
// import highlighting library (you can use any library you want just return html string)
import { highlight , languages } from 'prismjs/components/prism-core' ;
import 'prismjs/components/prism-clike' ;
import 'prismjs/components/prism-javascript' ;
import 'prismjs/themes/prism-tomorrow.css' ; // import syntax highlighting styles
export default {
components : {
PrismEditor ,
} ,
data : ( ) => ( { code : 'console.log("Hello World")' } ) ,
methods : {
highlighter ( code ) {
return highlight ( code , languages . js ) ; // languages.<insert language> to return html with markup
} ,
} ,
} ;
</ script >
< style >
/* required class */
.my-editor {
/* we dont use `language-` classes anymore so thats why we need to add background and text color manually */
background: #2d2d2d;
color: #ccc;
/* you must provide font-family font-size line-height. Example: */
font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
font-size: 14px;
line-height: 1.5;
padding: 5px;
}
/* optional class for removing the outline */
.prism-editor__textarea:focus {
outline: none;
}
</ style >구문 형광펜에 따라 구문 강조 표시에 대한 추가 CSS를 포함해야 할 수도 있습니다.
또는 전역으로 구성 요소를 등록하십시오
import { PrismEditor } from 'vue-prism-editor' ;
import 'vue-prism-editor/dist/prismeditor.min.css' ; // import the styles
Vue . component ( 'PrismEditor' , PrismEditor ) ;브라우저 사용량 (코드펜 등) :
< script src =" https://unpkg.com/[email protected].* " > </ script >
<!-- Prism Editor -->
< script src =" https://unpkg.com/vue-prism-editor " > </ script >
< link rel =" stylesheet " href =" https://unpkg.com/vue-prism-editor/dist/prismeditor.min.css " />
<!-- custom highlighter: -->
< script src =" https://unpkg.com/prismjs/prism.js " > </ script >
< link rel =" stylesheet " href =" https://unpkg.com/prismjs/themes/prism-tomorrow.css " />
< style >
.height-200{
height: 200px
}
.my-editor {
/* we dont use `language-` classes anymore so thats why we need to add background and text color manually */
background: #2d2d2d;
color: #ccc;
/* you must provide font-family font-size line-height. Example:*/
font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
font-size: 14px;
line-height: 1.5;
padding: 5px;
}
/* optional class for removing the outline */
.prism-editor__textarea:focus {
outline: none;
}
</ style >
< div id =" app " >
< prism-editor class =" my-editor height-200 " v-model =" code " :highlight =" highlighter " line-numbers > </ prism-editor >
</ div >
< script >
new Vue ( {
el : "#app" ,
data : ( ) => ( {
code : "console.log('hello world')"
} ) ,
methods : {
highlighter ( code ) {
// js highlight example
return Prism . highlight ( code , Prism . languages . js , "js" ) ;
}
} ,
} )
</ script > | 이름 | 유형 | 기본 | 옵션 | 설명 |
|---|---|---|---|---|
V- 모델 value | string | "" | - | 편집기의 현재 값, 즉 표시 할 코드 |
| 가장 밝은 부분 | string => string | - | - | 강조 할 텍스트를받는 콜백. Prismjs와 같은 라이브러리를 사용하여 구문 강조 표시가있는 HTML 문자열을 반환해야합니다. |
| 준비 적 | Boolean | false | - | 준비 적 |
| 리네 넘버 | Boolean | false | - | 줄 번호를 표시할지 여부. 기본 false |
| autostylelinenumbers | Boolean | true | - | 라인 번호 텍스트 색상을 테마에 일치시킵니다. true |
| 탭 크기 | number | 2 | - | 탭 키를 누를 때 삽입 할 문자 수입니다. 예를 들어, 4 개의 Space Intentation의 경우 tabSize 는 4 이고 insertSpaces true 입니다. 기본값 : 2 |
| 인서트 스페이스 | boolean | true | - | 들여 쓰기에 공간을 사용할지 여부. 기본값 : true . false 로 설정하면 tabSize 1 로 설정할 수도 있습니다. |
| 무시합니다 | boolean | false | - | 키보드 사용자가 편집기를 지나서 탭 할 수 있도록 편집기가 탭 키 프레스를 무시 해야하는지 여부. 사용자는 Ctrl+Shift+M ( false ) / Ctrl+M 사용 하여이 동작을 전환 할 수 있습니다. 기본값 : false |
| 이름 | 매개 변수 | 설명 |
|---|---|---|
| 입력 | (code) | 코드가 변경되면 발생합니다. |
| 키 다운 | (event) | 이 이벤트는 키 다운 이벤트가 편집자에서 발생하면 방출됩니다. |
| 키 업 | (event) | 이 이벤트는 키업 이벤트가 편집자에서 발생하면 방출됩니다. |
| 딸깍 하는 소리 | (event) | 이 이벤트는 편집자의 어느 곳에서나 클릭 할 때 방출됩니다. |
| 집중하다 | (event) | 이 이벤트는 초점을 맞출 때 방출됩니다 |
| 흐림 | (event) | 이 이벤트는 블러가 발생할 때 방출됩니다 |
이 부분은 React-Simple-Code-Editor에서 가져옵니다
<textarea> 통해 <pre> 블록 강조 표시된 구문을 오버레이하여 작동합니다. 입력하고 선택하고 텍스트를 복사하면 기본 <textarea> 와 상호 작용하므로 경험이 기본적으로 느껴집니다. 이것은 행동을 재 구현하는 다른 편집자에 비해 매우 간단한 접근법입니다.
구문 강조 표시는 HTML을 반환하는 한 모든 타사 라이브러리에서 수행 할 수 있으며 사용자가 완전히 제어 할 수 있습니다.
바닐라 <textarea> 들여 쓰기를 위해 탭 문자 삽입을 지원하지 않으므로 keydown 이벤트를 듣고 프로그래밍 방식으로 텍스트를 업데이트하여 다시 구현합니다. 프로그래밍 방식으로 텍스트를 업데이트 한 한 가지주의 사항은 실행 취소 스택을 잃어 버리므로 자신의 실행 취소 스택을 유지해야한다는 것입니다. 결과적으로 VSCODE와 같은 편집자와 유사한 전체 단어를 취소하는 것과 같은 개선 된 실행 취소 동작을 구현할 수도 있습니다.
작동 방식으로 인해 특정 제한 사항이 있습니다.
<textarea> 에 강조 표시된 코드를 정렬하여 작동하므로 레이아웃에 영향을 미치는 것을 변경하면이를 잘못 정렬 할 수 있습니다.-webkit-text-fill-color: transparent 사용하여 TextRea에서 텍스트를 숨 깁니다. IE 10+에서는 color: transparent . 텍스트는 지원되지 않는 브라우저에서 더 대담하게 보일 수 있습니다. 반응 단순 코드 편집기
MIT
