빠른 자습서 CSS 팁: 소스 코드를 쉽게 표시하는 방법

데모 HTML 문서를 작성하고 그 안에 스크립트의 소스 코드를 표시하려는 경우가 있습니다. 문제는 스크립트를 문서에 하드 코딩할 때 종종 스크립트와 표시 내용이 동기화되지 않는다는 것입니다.

한 가지 방법은 fetch()를 통해 스크립트를 로드하고 표시하는 것이며 이를 수행하는 수많은 패키지가 있습니다.

동일한 작업을 수행하는 매우 간단한 방법은 문서 본문 내부에 스크립트를 포함하는 것입니다. 일단 그렇게 하면 CSS를 사용하여 display를 block로, white-space를 pre로 설정할 수 있습니다.

script {
  display: block;
  white-space: pre;
  padding: 0 1em 1em 1em;
  color: #fff;
  background: #000;
}

하지만 기억해야 할 두 가지 사항: 스크립트는 길 수 있으며 이 기본 CSS는 src 속성이 있는 파일을 가리키는 콘텐츠 없이 스크립트 블록도 표시합니다.
not() 선택기를 사용하여 height 및 overflow:scroll를 설정하여 문제를 해결할 수 있습니다.

script:not([src]) {
  display: block;
  white-space: pre;
  padding: 0 1em 1em 1em;
  color: #fff;
  background: #000;
  overflow: scroll;
  height: 5em;
}

script 요소의 표시를 relative로 설정하고 position의 fixed로 생성된 콘텐츠를 사용하여 여기에서 무슨 일이 일어나고 있는지 독자에게 알릴 수도 있습니다. 상자 위에 표시하기 위해 약간의 여백과 여백을 지정하면 눈에 띄게 됩니다.

script:not([src]) {
  display: block;
  white-space: pre;
  padding: 0 1em 1em 1em;
  color: #fff;
  background: #000;
  overflow: scroll;
  height: 15em;
  position: relative;
}
script:not([src])::before {
  content: "Source code (JavaScript):";
  background: orchid;
  width: auto;
  display: block;
  position: fixed;
  padding: 2px 5px;
  margin: -1em 0 0 -0.5em;
}

좋습니다. 하지만 CSS 소스 코드는 어떻습니까?

스타일 블록을 본문에 넣으면 스타일링도 할 수 있습니다. 이것은 있어야 할 곳이 아니지만 자습서에서는 왜 안됩니까? style 선택기에 script를 추가하기만 하면 됩니다.

script:not([src]),style {
  display: block;
  white-space: pre;
  padding: 0 1em 1em 1em;
  color: #fff;
  background: #000;
  overflow: scroll;
  height: 5em;
  position: relative;
}

스타일 블록이 문서의 첫 번째 요소인 경우 약간의 여백이 필요합니다. 동일한 텍스트를 사용하여 표시하지 않으려면 다른 설정을 추가하는 것이 좋습니다.

style {
  margin: 2em 0 1em 0;
}
style::before {
  content: "Source code (CSS):";
  background: orchid;
  width: auto;
  display: block;
  position: fixed;
  padding: 2px 5px;
  margin: -1em 0 0 -0.5em;
}

여기 용이 있습니다: 편집 가능하게 만들기

좋아, 여기가 거칠어지는 곳이다. 스타일 블록에 contenteditable="true" 속성을 추가하면 독자가 실시간으로 설정을 변경하고 이를 가지고 놀도록 허용할 수도 있습니다.



이것은 멋지고 모든 것이지만, 편집 가능한 블록을 통해 공격자가 자격 증명을 훔치고 서버의 다른 스크립트를 재정의하기 위해 JavaScript를 포함할 수 있기 때문에 필터링 서버 측 스크립트 없이 야생에 내보내는 것은 좋은 생각이 아닙니다. 나는 과거에 내 서버가 해킹당한 결과로 HTML 슬라이드데크에서 이것을 사용했습니다. 그래서, 그런 식으로 가지 않는 것이 좋습니다…

여기에 표시된 데모 페이지에 대해 더 알고 싶다면 GitHub의 내 스크립트CanvasShift.js의 일부이며 자세한 내용blog post이 있습니다.