코드 블록 $ 접두사

저는 Linux(Nginx, MySQL, 방화벽 등)에서 다양한 항목을 설정하는 방법의 예를 위해 DigitalOcean 커뮤니티 자습서를 많이 사용하고 모든 사람에게 이를 사용하도록 조언합니다.

약 3주 전에 나는 실제로 그들의 코드 블록에 대해 뭔가를 발견했습니다. 그 중 일부(터미널 명령 포함)는 $ 로 시작했는데 이상한 점은 없었나요?
사실 복사할 수 없기 때문에 $ 접두사 뒤에 오는 코드만 복사합니다. 이에 대한 예는 here 에서 찾을 수 있습니다.

이것은 내 관심을 끌었습니다. 전에는 이것을 눈치채지 못했고 이것이 어떻게 수행되었는지 좋은 예를 찾을 수 없었습니다. 그래서 나는 페이지 소스 코드를 파헤치고 이 작은 예술 작품에 대한 마법 같은 소스 코드를 찾았습니다.

이것은 실제로 약간의 CSS 마법과 결합된 오래된 HTML의 조합입니다. 나는 다른 부분을 설명하려고 노력할 것이고 마지막에 작동하는 JSFiddle 예제를 보여줄 것입니다.

HTML
HTML 부분은 실제로 매우 간단합니다. 순서가 지정되지 않은 목록이 있는 일반 코드 블록 구문입니다. 이 예제는 여러 줄의 코드 블록을 보여주지만 물론 한 줄의 코드 블록만 원할 경우 하나의 목록 항목으로 동일한 작업을 수행할 수 있습니다( <li> ).

<pre>
    <code>
        <ul class="prefixed">
            <li class="line">sudo apt-get update</li>
            <li class="line">sudo apt-get install apache2</li>
            <li class="line">sudo apache2ctl configtest</li>
        </ul>
    </code>
</pre>

CSS
이 부분을 더 작은 섹션으로 나눕니다.

이 첫 번째 부분은 각 목록 항목 사이의 간격을 줄이는 데만 사용됩니다. 그것에 대해 특별한 것은 없습니다.

pre .prefixed {
    white-space: normal;
    margin: 0;
}

자, 이제 첫 번째 중요한 부분에 도달했습니다. list-style-type는 기본 목록 항목 스타일을 제거하는 데 사용됩니다. •

pre .line {
    list-style-type: none!important;
}

이 마지막 부분은 실제로 코드 블록 앞에 $ 접두사를 추가하는 데 사용됩니다. 첫 번째 부분은 사용자가 복사할 수 없도록 하는 것입니다. 여백은 접두사 주위에 약간의 간격을 추가하는 데 사용되며 물론 원하는 대로 조정할 수 있습니다.
가장 중요한 부분은 content: "$"; 이며 위의 모든 줄에 원하는 접두사를 추가합니다.

pre .line::before {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    content: "$";
    margin-right: 10px;
    margin-left: 5px;
}

보너스
나는 이것을 약간의 보너스로 추가하고 싶었다.
각각 다른 CSS 스타일을 만들 필요 없이 각 줄에 다른 접두사를 추가하는 것도 가능합니다.
원하는 값으로 prefix 속성을 추가합니다.

<li class="line" prefix="$">sudo apt-get install apache2</li>

마지막 CSS 블록에서 content: "$";를 이것으로 바꿉니다. 속성 값을 가져와서 대신 접두사로 사용합니다.

content: attr(prefix);

코딩 튜토리얼은 처음 해보는거라 마음에 드셨으면 좋겠습니다. 물론 어떤 피드백이든 환영합니다.