구문 강조 표시를 즉시 수행할 수 있는 텍스트 영역?

구문 강조 표시를 즉시 수행할 수 있는 텍스트 영역?

유지보수가 용이하기 때문에 다수의 HTML 블록을 CMS 내부에 저장하고 있습니다.은 들음음음음음음음음음음 they they they they they they they로 대표된다.<textarea>s.

"JavaScript Widget" 내에서 할 수 있는 사람이 ?HTML 에에에에에에에에에 에에에 。textarea일반 텍스트 에디터(WYSIWYG 또는 고급 기능 없음)를 유지하면서도 비슷한 기능을 사용할 수 있습니까?

수 textarea.

그래도 괜찮으시다면 CodeMirror, Ace 또는 모나코(MS VSCode에서 사용)를 사용해 보십시오.

중복 스레드 - 필수 위키백과 링크: JavaScript 기반 소스 코드 편집기 비교

다음은 프로그래머에 대한 유사한 질문(온라인 코드 편집기)에 대한 답변입니다.

먼저 다음 기사를 보실 수 있습니다.
Wikipedia - JavaScript 기반 소스 코드 편집기 비교.

상세한 것에 대하여는, 고객의 요구에 적합한 툴의 일부를 소개합니다.

• Edit Area - Yii 확장자인 File Editor로 데모 - (Apache 소프트웨어 라이센스, BSD, LGPL)

  소스 코드용 무료 Javascript 에디터 EditArea입니다.행 번호부여, 탭 지원, 검색 및 치환(regexp 사용), 실시간 구문 강조 표시(맞춤 가능)를 사용하여 적절한 형식의 소스 코드를 쓸 수 있습니다.

• Code Press - Joomla 데모! CodePress Plugin - (LGPL) - Chrome에서는 동작하지 않으며 개발이 중단된 것 같습니다.

  CodePress는 웹 기반 소스 코드 에디터로, 구문을 강조 표시하여 브라우저에 입력하는 동안 텍스트를 실시간으로 색칠합니다.

• CodeMirror - 여러 데모 중 하나 - (MIT 스타일 라이센스 + 상용 옵션 지원)

  CodeMirror는 컴퓨터 프로그램, HTML 마크업 등 코드와 유사한 콘텐츠를 위한 비교적 쾌적한 편집기 인터페이스를 만드는 데 사용할 수 있는 JavaScript 라이브러리입니다.편집 중인 언어에 대해 모드가 작성된 경우 코드가 색칠되며 편집자가 선택적으로 들여쓰기를 도와줍니다.

• Ace Ajax.org Cloud9 Editor - 데모 - (Mozilla tri-tri-time (MPL/GPL/LGPL))

  Ace는 JavaScript로 작성된 스탠드아론 코드 에디터입니다.당사의 목표는 TextMate, Vim, Eclipse 등의 기존 네이티브 에디터와 기능, 사용성 및 성능을 일치시키고 확장하는 웹 기반 코드 에디터를 만드는 것입니다.모든 웹 페이지 및 JavaScript 응용 프로그램에 쉽게 내장할 수 있습니다.Ace는 Cloud9 IDE의 프라이머리 에디터이자 Mozilla Skywriter(Bespin) Project의 후계자로 개발되었습니다.

EditArea와 마찬가지로 CodePress가 이를 수행합니다.둘 다 오픈 소스입니다.

구문 하이라이트 텍스트 영역의 라이브 편집에는 Edit Area를 권장합니다.

텍스트를 강조 표시할 수 있습니다.<textarea>, 사용방법<div>그 뒤에 조심스럽게 배치되어 있다.

텍스트 영역 내 텍스트 강조 표시를 확인하십시오.

업데이트: Bespin이 ACE가 되었습니다.이것에 대해서는, 최고 등급의 회답에 기재되어 있습니다.대신 ACE를 사용합니다.

베스핀 by Mozilla와 함께 해야 합니다.HTML5 기능을 사용하여 구축되어 있습니다(그래서 빠르고 빠릅니다만, 레거시 브라우저는 지원하지 않습니다).사용하는 것은 확실히 놀라워요.아마 Mozilla의 지원으로 Firefox가 개발되고 있기 때문에.jQuery 플러그인은 jQuery와 함께 사용하기 쉽도록 확장자를 포함하고 있습니다.

텍스트 영역 내에서는 실제로 마크업을 렌더링할 수 없습니다.

그러나 텍스트 영역 뒤에 조심스럽게 div를 배치하고 거기에 하이라이트 마크업을 추가함으로써 위조할 수 있습니다.

JavaScript는 콘텐츠와 스크롤 위치를 동기화합니다.

var $container = $('.container');
var $backdrop = $('.backdrop');
var $highlights = $('.highlights');
var $textarea = $('textarea');
var $toggle = $('button');


var ua = window.navigator.userAgent.toLowerCase();
var isIE = !!ua.match(/msie|trident\/7|edge/);
var isWinPhone = ua.indexOf('windows phone') !== -1;
var isIOS = !isWinPhone && !!ua.match(/ipad|iphone|ipod/);

function applyHighlights(text) {
  text = text
    .replace(/\n$/g, '\n\n')
    .replace(/[A-Z].*?\b/g, '<mark>$&</mark>');

  if (isIE) {
    // IE wraps whitespace differently in a div vs textarea, this fixes it
    text = text.replace(/ /g, ' <wbr>');
  }

  return text;
}

function handleInput() {
  var text = $textarea.val();
  var highlightedText = applyHighlights(text);
  $highlights.html(highlightedText);
}

function handleScroll() {
  var scrollTop = $textarea.scrollTop();
  $backdrop.scrollTop(scrollTop);

  var scrollLeft = $textarea.scrollLeft();
  $backdrop.scrollLeft(scrollLeft);
}

function fixIOS() {
  $highlights.css({
    'padding-left': '+=3px',
    'padding-right': '+=3px'
  });
}

function bindEvents() {
  $textarea.on({
    'input': handleInput,
    'scroll': handleScroll
  });
}

if (isIOS) {
  fixIOS();
}

bindEvents();
handleInput();

@import url(https://fonts.googleapis.com/css?family=Open+Sans);
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 30px;
  background-color: #fff;
  caret-color: #000;
}

.container,
.backdrop,
textarea {
  width: 460px;
  height: 180px;
}

.highlights,
textarea {
  padding: 10px;
  font: 20px/28px 'Open Sans', sans-serif;
  letter-spacing: 1px;
}

.container {
  display: block;
  margin: 0 auto;
  transform: translateZ(0);
  -webkit-text-size-adjust: none;
}

.backdrop {
  position: absolute;
  z-index: 1;
  border: 2px solid #685972;
  background-color: #fff;
  overflow: auto;
  pointer-events: none;
  transition: transform 1s;
}

.highlights {
  white-space: pre-wrap;
  word-wrap: break-word;
  color: #000;
}

textarea {
  display: block;
  position: absolute;
  z-index: 2;
  margin: 0;
  border: 2px solid #74637f;
  border-radius: 0;
  color: transparent;
  background-color: transparent;
  overflow: auto;
  resize: none;
  transition: transform 1s;
}

mark {
  border-radius: 3px;
  color: red;
  background-color: transparent;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="backdrop">
    <div class="highlights"></div>
  </div>
  <textarea>All capitalized Words will be highlighted. Try Typing to see how it Works</textarea>
</div>

오리지널 펜 : https://codepen.io/lonekorean/pen/gaLEMR

요약하면 다음과 같습니다.

• 하이라이트.js
• Prism.js &
• 마이크로라이트.js
• 구글 프리티프린트
• Pygments.org
• Hilite.me
• 마이크로라이트.js
• 또는 경량 커스텀을 시험할 수 있습니다.https://css-tricks.com/creating-an-editable-textarea-that-supports-syntax-highlighted-code/

시간과 에너지를 절약하기 위해 이러한 범위 내에서 더 자세히 조사하는 것이 좋습니다.

구문 강조 표시와 텍스트 영역으로의 폴백 기능이 있는 에디터는 Mozilla Bespin뿐입니다.Bespin을 삽입하기 위해 구글을 검색하여 에디터를 삽입하는 방법을 확인합니다.현재 이 기능을 사용하고 있는 사이트는 (Jetpack 제출 페이지에 있는) Mozilla Jetpack Gallery뿐입니다.이 갤러리가 어떻게 포함되어 있는지 확인하실 수 있습니다.

또한 Bespin 편집기를 내장하고 재사용하는 방법에 대한 블로그 게시물도 있습니다.

왜 문자영역으로 표현하는 거죠?이건 내가 제일 좋아하는 거야

http://alexgorbatchev.com/wiki/SyntaxHighlighter

그러나 CMS를 사용하고 있다면 더 나은 플러그인이 있을 것입니다.예를 들어 워드프레스에는 다음과 같은 진화 버전이 있습니다.

http://www.viper007bond.com/wordpress-plugins/syntaxhighlighter/

은 오버레이를 할 수 .code텍스트 영역 앞에 블록하고 이를 사용하여 다른 텍스트 영역 앞에 있는 구문 강조 표시를 적용합니다.

그러나 처리해야 할 몇 가지 가장자리 케이스가 있습니다.상세한 것에 대하여는, https://css-tricks.com/creating-an-editable-textarea-that-supports-syntax-highlighted-code 를 참조해 주세요.

다행히 작성자가 커스텀 요소로 작성했습니다.https://github.com/WebCoder49/code-input

사용 예: https://codepen.io/WebCoder49/pen/jOypJOx

언급URL : https://stackoverflow.com/questions/1619167/textarea-that-can-do-syntax-highlighting-on-the-fly