CodeMirror

 <!DOCTYPE html>
<html>
  <head>
    <title>CodeMirror</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.3/codemirror.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.3/theme/monokai.min.css">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.3/codemirror.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.3/mode/javascript/javascript.min.js"></script>
  </head>
  <body>
    <div id="code"></div>
    <script>
      CodeMirror(document.querySelector('#code'), {
        lineNumbers: true,
        tabSize: 2,
        matchBrackets: true,
        value: 'console.log("Hello, World");',
        mode: 'javascript',
        theme: 'monokai'
      });
    </script>
  </body>
</html>

xxxxxxxxxx
 
console.log("Hello, World");

https://codemirror.net/

https://playcode.io/javascript

PlayCode - Javascript Playground

playcode.io

https://ansan-survivor.tistory.com/896

[Tistory] 티스토리 코드 블록 테마 변경하기 (못생긴 코드블럭 수정)

1. 아래 링크에서 사용하기 원하는 테마 확인하기 https://highlightjs.org/static/demo/ highlight.js demo highlightjs.org 2. 티스토리 html편집기 들어간다. 3. 와 사이 아무대나 아래 줄을 추가한다. 그리..

ansan-survivor.tistory.com

https://mijey.tistory.com/entry/%ED%8B%B0%EC%8A%A4%ED%86%A0%EB%A6%AC-%EC%BD%94%EB%93%9C-%ED%95%98%EC%9D%B4%EB%9D%BC%EC%9D%B4%ED%8C%85highlightjs-line-number-%ED%8F%B0%ED%8A%B8-%EC%A0%81%EC%9A%A9%ED%95%98%EA%B8%B0

티스토리 코드 하이라이트(highlight.js, line number, 폰트 적용하기)

티스토리 에디터에 코드 블럭을 사용하면 태그가 자동으로 삽입됩니다. 그리고 티스토리 플러그인을 사용하면 기본적인 코드 하이라이팅 기능이 제공됩니다. 하지만 테마가 몇개 없고, 그다지

mijey.tistory.com

https://toproot.tistory.com/29

[T-Story] 코드블럭 테마, 스크롤, 라인넘버 추가하기(오디세이 테마)

🧑🏻‍💻 티스토리의 밋밋한 코드블럭을 뜯어고쳐보자! 기존의 티스토리 코드블럭은 회색의 밋밋한 블럭이었기에.. 프로 개발자 같은 코드블럭을 만들어보겠습니다. 주의! 시작하기전에 플

toproot.tistory.com

저작자표시 비영리 변경금지

'♥' 카테고리의 다른 글

불법 소프트웨어 사용 시, 입을 수 있는 손해 (0)	2023.09.25
티스토리 코드블럭 highlight.js 테마, line number, 스크롤, 폰트 적용하기 (0)	2022.07.20
위도, 경도 변환 (0)	2022.05.13
DATA 데이터분석기술평가 (0)	2021.11.05
화이트닝 (1)	2020.08.07

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

Developer🤖

CodeMirror

'♥' 카테고리의 다른 글

티스토리툴바

개인정보

단축키

내 블로그

블로그 게시글

모든 영역

	<!DOCTYPE html>
	<html>
	<head>
	<title>CodeMirror</title>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.3/codemirror.min.css">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.3/theme/monokai.min.css">
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.3/codemirror.min.js"></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.3/mode/javascript/javascript.min.js"></script>
	</head>
	<body>
	<div id="code"></div>
	<script>
	CodeMirror(document.querySelector('#code'), {
	lineNumbers: true,
	tabSize: 2,
	matchBrackets: true,
	value: 'console.log("Hello, World");',
	mode: 'javascript',
	theme: 'monokai'
	});
	</script>
	</body>
	</html>

CodeMirror

'♥' 카테고리의 다른 글

'♥' Related Articles

티스토리툴바

개인정보

단축키

내 블로그

블로그 게시글

모든 영역