Svelte 웹 사이트의 삽입식 편집기를 자신의 취향으로 사용자 정의해 보십시오

개요

제목에서 보듯이, 나는 자신의 취향에 따라 https://svelte.dev/ 삽입식 편집기를 맞춤형으로 만들어 보았다.
왜?
Svelte의 Repl은 매우 편리해서 Svelte 코드를 공유할 때 매우 자주 사용하는 것 같다.다만 저는 개인적으로 평소에 검은색 편집기를 사용하기 때문에 렌즈 편집기에 도무지 적응이 안 돼서 바꿔봤어요.

Before

After

방법을 바꾸다

브라우저의 CSS 변경 내용

이거 다들 잘 아시지 않을까 싶어요Stylish Chome 확장을 사용했어요.

컨텐트 수정

Svelte의 Repl은 내부적으로CodeMirror라고 불리는 프로그램 라이브러리를 사용한다.

Svelte/Repl의 Codemirror 사용 위치: https://github.com/sveltejs/sites/blob/9dca3c11a6/packages/repl/src/lib/CodeMirror.svelte

그리고 https://github.com/sveltejs/sites/blob/9dca3c11a6/packages/repl/src/lib/theme.css 주제를 썼기 때문에 Stylish로 이것을 아래의 모양으로 고쳤다.

.cm-s-svelte.CodeMirror {
	--base: #999FAA;
	--comment: #5B6470;
	--keyword: #AA69BE;
	--tags: #E06B74;
	--string: #99C379;
	--number: #D29966;
	background: #151515;
	color: var(--base);
}

.cm-s-svelte .CodeMirror-selected {
	background: #1E2F3E;
}

.cm-s-svelte.CodeMirror-focused .CodeMirror-selected {
	background: #1E2F3E;
}

.cm-s-svelte .CodeMirror-gutters {
	padding: 0 16px 0 8px;
	background: #151515;
	border: none;
}

.cm-s-svelte .CodeMirror-guttermarker-subtle {
	color: #E6E6E6;
}

.cm-s-svelte .CodeMirror-linenumber {
	color: #E6E6E6;
	opacity: 0.6;
}

.cm-s-svelte .CodeMirror-cursor {
	border-left: 2px solid #E6E6E6;
}

.cm-s-svelte span.cm-comment {
	color: var(--comment);
}

.cm-s-svelte span.cm-atom {
	color: var(--keyword);
}

.cm-s-svelte span.cm-number {
	color: var(--number);
}

.cm-s-svelte span.cm-attribute,
.cm-s-svelte span.cm-keyword {
	color: var(--keyword);
}

.cm-s-svelte span.cm-string,
.cm-s-svelte span.cm-string-2 {
	color: var(--string);
}

.cm-s-svelte span.cm-variable,
.cm-s-svelte span.cm-variable-2,
.cm-s-svelte span.cm-variable-3,
.cm-s-svelte span.cm-tag,
.cm-s-svelte span.cm-bracket {
	color: var(--tags);
}

.cm-s-svelte span.cm-link {
	color: #999999;
}

.cm-s-svelte span.cm-error,
.cm-s-svelte span.cm-invalidchar {
	color: #ff008c;
}

.cm-s-svelte .CodeMirror-foldgutter {
	width: 0.7em;
}

.cm-s-svelte .CodeMirror-foldgutter-open,
.cm-s-svelte .CodeMirror-foldgutter-folded {
	cursor: pointer;
}

.cm-s-svelte .CodeMirror-foldgutter-open:after,
.cm-s-svelte .CodeMirror-foldgutter-folded:after {
	content: '>';
	font-size: 0.8em;
	opacity: 0.8;
	transition: transform 0.2s;
	display: inline-block;
	top: -0.1em;
	position: relative;
	transform: rotate(90deg);
}

.cm-s-svelte .CodeMirror-foldgutter-folded:after {
	transform: none;
}