code input
2.4.0
모든 HTML 형식으로 배치 할 수있는 완전히 사용자 정의 할 수 있고 편집 가능한 구문 하이라이트 텍스토리입니다. [데모보기]
이 데모는 Prism.js 및 Highlight.js의 테마를 사용합니다.
Frontend JavaScript 라이브러리와 함께 :
code-input 사용하면 HTML 사용자 정의 요소를 사용하여 일반적인 JavaScript 구문 하이라이트 테마 및 프로그램을 사용자 정의 가능한 구문 하이라이트 텍스토리로 전환 할 수 있습니다. 바닐라 CSS를 사용하여 pre code 블록에서 textarea 중첩 한 다음 압입, 스크롤 및 JavaScript의 결과 버그를 수정합니다. 이 라이브러리를 사용하는 방법이 아닌 무대 뒤에서 어떻게 작동하는지 보려면 내가 쓴이 CSS- 트릭 기사를 참조하십시오.
다른 프론트 엔드 코드 편집기 프로젝트와 달리 code-input 작동하는 방식의 단순성은 사용자 정의가 가능합니다 . 완전한 편집자가 아니기 때문에 포함하려는 기능을 선택하고 좋아하는 구문 하이라이트 알고리즘 및 테마를 사용할 수 있습니다 .
<code-input> 요소는 <textarea> 와 같이 작동하므로 HTML5 양식으로 작동하며 name , value 및 placeholder 자 속성, onchange 와 같은 이벤트, 양식 재설정, 몇 가지 이름을 지정합니다 ... (데모)를 사용하여 지원합니다.
code-input 또한 오픈 소스 기부금에서 옵션 플러그인의 많은 기능을 축적하여 원하는 기능을 선택할 수 있습니다. 원하는 기능이없는 경우 문제를 열 / 기여하십시오!
code-input 시작 (4 가지 간단한 단계) code-input 도 TypeScript (클릭)도 지원합니다.아래 지침을 따르거나 여기에서 사용할 수있는 스타터 코드를 사용하여 Heights.js와 Prism.js를 위해 여기를 사용할 수 있습니다.
code-input 사용하기 쉽고 사용자 정의 할 수 있도록 설계되었습니다. 구문 하이라이트 텍스토리를 만드는 데 사용하는 방법은 다음과 같습니다.
code-input 가져 오기code-input 의 CSS 및 JS 파일을 가져옵니다. 모음화되지 않은 파일은 개발 중에 사용하는 데 유용합니다. <!--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 " > 다음 단계는 code-input 구문 고사로에 연결하는 template 설정하는 것입니다. Prism.js 또는 Highlight.js를 사용하는 경우 내장 템플릿을 사용할 수 있거나 다른 방식으로 자신의 것을 만들 수 있습니다. 이 예에서는 템플릿을 "syntax-highlighted" 로 등록하고 있지만 일관성이있는 한 템플릿 이름을 사용할 수 있습니다.
하이라이트 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)
) ) ;플러그인을 사용하면 자동 압입 또는 하이라이트를 지원하는 것과 같은 템플릿에 추가 기능을 추가 할 수 있습니다. 그것들을 사용하려면, 그냥 :
code-input 가져온 후 및 템플릿을 등록하기 전에 플러그인 JS 파일을 가져옵니다. < 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이며 가능한 한 빨리 수정 될 것입니다. 도움을주고 시간을 보내려면 환영 받기를 원하지만 관리자의 할 일 목록의 최상위에 있습니다.
플러그인의 전체 목록과 해당 기능을 보려면 플러그인/readme.md를 참조하십시오.
템플릿을 등록 했으므로 HTML에서 사용자 정의 <code-input> 요소를 사용할 수 있습니다. 둘 이상의 템플릿이 등록 된 경우 템플릿 이름을 template 속성으로 추가해야합니다. 요소를 사용하면 language 속성을 사용하면 pre code 블록에 language-{value} 클래스를 추가합니다. 이제 CSS 스타일뿐만 아니라 HTML 속성 및 이벤트를 사용하여 마치 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 >
️ 현재code-input요소의 CSS에padding대신--padding속성을 설정해야합니다. 다른 모든 속성은 정상적으로 작동해야합니다.
code-input 에 플러그인 또는 핵심 기능으로 추가하려는 기능이 있거나 버그를 찾은 경우 문제를 열거나 포크를 제출하고 풀 요청을 제출하십시오! 이 오픈 소스 프로젝트에 대한 모든 기여는 크게 감사 할 것입니다. CONTRIBUTING.md 파일에서 더 많은 정보를 볼 수 있습니다.
| ... 지금까지 풀 요청에 기여했습니다. |
| (출처 : Contrib.Rocks) |
