code input
2.4.0
Полностью настраиваемые редактируемые синтаксисные текстовые моменты, которые могут быть размещены в любой форме HTML. [Посмотреть демо]
Эта демонстрация использует темы из Prism.js и hight.js, двух программ, зажигающих синтаксис, которые хорошо работают и имеют совместимость встроенными с входом кода.
Библиотека JavaScript Frontend, с:
code-input позволяет превратить любую обычную тему с синтаксисом JavaScript, и программировать настраиваемую синтаксис-защепленную TextAreeas с использованием пользовательского элемента HTML. Он использует ванильные CSS, чтобы наложить textarea на pre code блоке, а затем обрабатывает отступление, прокрутка и исправляет любые полученные ошибки с помощью JavaScript. Чтобы увидеть, как это работает за кулисами (не как использовать эту библиотеку), см. В этой статье CSS-Tricks, которую я написал.
В отличие от других фронтальных проектов редактора кода, простота того, как работает code-input означает, что он очень настраивается . Поскольку это не полнофункциональный редактор, вы можете выбрать, какие функции вы хотите включить, и использовать ваши любимые алгоритмы и темы, зажигающие синтаксис, и темы .
Элемент <code-input> работает как <textarea> и, следовательно, работает в формах HTML5 и поддерживает атрибуты name , value и placeholder , такие события, как onchange , сброс формы, и назвать несколько ... (демонстрация)
code-input также накопил множество функций в дополнительных плагинах из вкладов с открытым исходным кодом, что позволило вам выбрать любые функции, которые вы хотите. Если вам нужна функция, пожалуйста, откройте проблему / внесите ее!
code-input (в 4 простых шагах) code-input также поддерживает TypeScript (нажмите)Вы можете следовать приведенным ниже инструкциям или использовать приведенный здесь код стартера для hight.js и здесь для Prism.js.
code-input предназначен для простых в использовании, так и настраиваемой . Вот как использовать его для создания синтаксиса, зажигаемого Textareas:
code-inputcode-input из загруженного релиза или CDN. Необразованные файлы полезны для использования во время разработки. <!--In the <head>-->
< script src =" path/to/code-input.min.js " > </ script >
< link rel =" stylesheet " href =" path/to/code-input.min.css " > <!--In the <head>-->
< script src =" https://cdn.jsdelivr.net/gh/WebCoder49/[email protected]/code-input.min.js " > </ script >
< link rel =" stylesheet " href =" https://cdn.jsdelivr.net/gh/WebCoder49/[email protected]/code-input.min.css " > Следующим шагом является настроение template для связи code-input с вашим синтаксисом. Если вы используете prism.js или hight.js, вы можете использовать встроенный шаблон или вы можете создать свой собственный. В этих примерах я регистрирую шаблон как "syntax-highlighted" , но вы можете использовать любое имя шаблона, если вы согласованы.
Hight.js:
codeInput . registerTemplate ( "syntax-highlighted" , codeInput . templates . hljs ( hljs , [ ] /* Array of plugins (see below) */ ) ) ;Prism.js:
codeInput . registerTemplate ( "syntax-highlighted" , codeInput . templates . prism ( Prism , [ ] /* Array of plugins (see below) */ ) ) ;Обычай:
codeInput . registerTemplate ( "syntax-highlighted" , new codeInput . Template (
function ( result_element ) { /* Highlight function - with `pre code` code element */
/* Highlight code in result_element - code is already escaped so it doesn't become HTML */
} ,
true , /* Optional - Is the `pre` element styled as well as the `code` element?
* Changing this to false uses the code element as the scrollable one rather
* than the pre element */
true , /* Optional - This is used for editing code - setting this to true sets the `code`
* element's class to `language-<the code-input's lang attribute>` */
false /* Optional - Setting this to true passes the `<code-input>` element as a second
* argument to the highlight function to be used for getting data- attribute values
* and using the DOM for the code-input */ ,
[ ] // Array of plugins (see below)
) ) ;Плагины позволяют добавлять дополнительные функции в шаблон, такие как автоматическое отступление или поддержку для автонеметирования языка hight.js. Чтобы использовать их, просто:
code-input и перед регистрацией шаблона. < script src =" code-input.js " > </ script >
<!--...-->
< script src =" plugins/autodetect.js " > </ script >
< script src =" plugins/indent.js " > </ script >
<!--...-->
< script >
codeInput . registerTemplate ( "syntax-highlighted" ,
codeInput . templates . hljs (
hljs ,
[
new codeInput . plugins . Autodetect ( ) ,
new codeInput . plugins . Indent ( true , 2 ) // 2 spaces indentation
]
)
) ;
</ script >
️ К сожалению, размещение нескольких плагинов одного и того же типа в шаблоне в настоящее время может вызвать ошибки и неопределенное поведение, даже если такая конфигурация имеет логический смысл. Это проблема № 118 и будет исправлена как можно скорее - если вы хотите помочь и у вас есть время, но он также находится на вершине списка дел -боевиков.
Чтобы увидеть полный список плагинов и их функций, см. Plugins/readme.md.
Теперь, когда вы зарегистрировали шаблон, вы можете использовать пользовательский элемент <code-input> в HTML. Если у вас зарегистрирован более одного шаблона, вам нужно добавить имя шаблона в качестве атрибута template . С элементом использование language атрибута добавит класс language-{value} в pre code блок. Теперь вы можете использовать атрибуты и события HTML, а также стили CSS, чтобы сделать ваш элемент таким простым или интерактивным, как вам нравится, как если бы это был элемент textarea !
< code-input language =" HTML " > </ code-input >или
< code-input language =" HTML " placeholder =" Type code here " template =" syntax-highlighted " onchange =" console.log('Your code is', this.value) " > < href='https://github.com/WebCoder49/code-input' > code-input</a > </ code-input >
️ На данный момент вам необходимо установить свойство--padding, а неpaddingдля CSS элементаcode-input. Все остальные свойства должны работать как обычно.
Если у вас есть какие-либо функции, которые вы хотели бы добавить в code-input в качестве плагинов или основной функциональности, или вы нашли какие-либо ошибки, откройте проблему или вилку и отправьте запрос на вытяжку! Весь вклад в этот проект с открытым исходным кодом будет высоко оценен. Вы можете увидеть больше информации в нашем файле CONTRIBUTING.md .
| ... до сих пор внесли запросы. |
| (Источник: Contrib.rocks) |
