Мертвый простой редактор кода с выделением синтаксиса и номерами строк. 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 ) ;Использование браузера (для Codepen и т. Д.):
< 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 > | Имя | Тип | По умолчанию | Параметры | Описание |
|---|---|---|---|---|
value V-модели | string | "" | - | Текущее значение редактора, т.е. код для отображения |
| выделять | string => string | - | - | Обратный вызов, который получит текст для выделения. Вам нужно будет вернуть HTML -строку с синтаксисом, выделяющим библиотеку, такую как Prismjs. |
| Ридонли | Boolean | false | - | Ридонли |
| Полиночики | Boolean | false | - | Показать номера строк. По умолчанию false |
| AutostyleLinenumbers | Boolean | true | - | Сопоставьте номера строк. Цвет текста с темой. По умолчанию true |
| вкладка | number | 2 | - | Количество символов для вставки при нажатии клавиши вкладки. Например, для 4 космического отступления tabSize будет 4 , а insertSpaces будут true . По умолчанию: 2 |
| Вставки | boolean | true | - | Использовать ли пространства для вдавления. По умолчанию: true . Если вы установите его на false , вы также можете установить tabSize на 1 |
| Игноретабкей | boolean | false | - | Независимо от того, следует ли редактор игнорировать нажатие клавиши вкладки, чтобы пользователи клавиатуры могли вкладить вкладку мимо редактора. Пользователи могут переключать это поведение, используя Ctrl+Shift+M (Mac) / Ctrl+M вручную, когда это false . По умолчанию: false |
| Имя | Параметры | Описание |
|---|---|---|
| вход | (code) | Пожары при изменении кода. |
| Keydown | (event) | Это событие испускается, когда событие Keydown происходит в редакторе |
| ключ | (event) | Это событие испускается, когда событие Keyup происходит в редакторе |
| нажимать | (event) | Это событие испускается при нажатии в любом месте редактора |
| фокус | (event) | Это событие испускается, когда фокус |
| размытие | (event) | Это событие испускается при размытии |
Эта часть взята из редактора React-Simple-Code
Он работает, накладывая синтаксис, выделенный <pre> , на <textarea> . Когда вы вводите, выбираете, копируете текст и т. Д., Вы взаимодействуете с основным <textarea> , чтобы опыт казался нативным. Это очень простой подход по сравнению с другими редакторами, которые переосмысливают поведение.
Синтаксическое выделение может быть сделано любой сторонней библиотекой, если он возвращает HTML и полностью управляется пользователем.
Vanilla <textarea> не поддерживает вставку символов вкладок для вдавления, поэтому мы переосмысливаем его, прослушивая события keydown и программно обновляя текст. Одним из предостережений с программным обновлением текста является то, что мы теряем стек отмены, поэтому нам нужно поддерживать наш собственный стек. В результате мы также можем реализовать улучшенное отмену поведения, такое как уничтожение целых слов, аналогичных редакторам, таким как VSCODE.
Из -за того, как он работает, он имеет определенные ограничения:
<textarea> , изменение всего, что влияет на макет, может свести его в замешательство.-webkit-text-fill-color: transparent , который работает во всех современных браузерах (даже не-Webkit, такие как Firefox и Edge). На IE 10+ мы используем color: transparent , который не скрывает курсор. Текст может выглядеть смелее в неподдерживаемых браузерах. Редакция-код-редактор
Грань
