격리 구역에서 사이트 코드 세션의 스타일을 재설정하다

격리 중에 이성을 유지하기 위해서 나는 줄곧 나의 사이트를 업데이트하느라 바쁘다.지금까지 나는 이미 다음과 같은 일을 했다.

축하 페이지 추가

랜덤 게시물 및 메모 링크

서로 다른 음표의 색깔을 확장하고 사방으로 혼합

나의 좀비 네트워크 부대

의 추진 아래 비트코인 채굴 업무를 확대하였다
그러나 내가 가장 좋아하는 업데이트는 일찌감치 업데이트되었어야 했다. 코드 블록 부분을 다시 서열화하는 것이다.이전에는 그것들의 격식은 정확했지만 무겁고 서투렀다.나는 그것들이 더욱 날씬하고 풍격이 더 좋으면 좋겠지만, 여전히 읽을 수 있다.
나의 첫 번째 생각은 컴퓨터의 원본 코드를 훑어보는 것처럼 작은 브라우저나 응용 프로그램 창처럼 보이는 것이다.그러나 나중에 나는 모든 인코딩 언어의 개성화된 스타일에 대해 진일보한 연구를 했다.

코드 블록의 표현 방식

제 사이트는 Jekyll에 설립되어 Kramdown을 사용하여 HTML로 전환하고 Rouge 강조 코드 문법을 사용합니다.따라서 저의 오래된 게시물에 대해 자바스크립트 부분을 포함하는 가격 인하는 세 개의 반전 부호에 포장되고 시작할 때 언어를 포함합니다.
만약 내가 자바스크립트 언어를 사용하여 이 점을 실현한다면, 다음은 바로 나타나는 HTML이다.

<div class="language-javascript highlighter-rouge">
  <div class="highlight">
    <pre class="highlight language-javascript">
      <code class=" language-javascript">
        <!-- Formatted Code Renders Here -->
      </code>
    </pre>
  </div>
</div>

코드를 포맷하는 공간은 JavaScript와 같지만 추가 span 표시가 많아서 여기서 건너뛰었습니다.그러나 이 표지는 기본 양식에 있어서는 이미 충분하다.

기본 코드 블록 스타일

이 글은 코드 블록에만 주목하지만 내 사이트에도 내연 코드 섹션like this one이 있다.인라인 코드와 블록 코드는 모두 짙은 색 배경에 옅은 색 텍스트를 가지고 일반 텍스트와 대비되기 때문에 이러한 스타일은 공유 선택기에서 사용할 수 있다.

// All code
.highlighter-rouge {
  color: color(mono, white);

  background-color: color(mono, black);
}

color 함수는 제가 설정한 추가sas로 스타일 변수를 신속하게 추출하는 데 사용됩니다.아래의 코드 세션에서 유사한 함수를 많이 볼 수 있지만, 그것들이 되돌아오는 양식은 말하지 않아도 알 수 있다.
여기서 볼 수 없는 큰 변화는 font-family, 이전에는 "Bitstream Vera Sans Mono"였다이것은 코드에 적용되는 단일 공백 글꼴이지만, 나는 그다지 블록적이지 않고 서투른 글꼴을 원하기 때문에, 나는 "Courier New"로 바꾸었다
지금은 코드 블록 스타일입니다.다음 CSS는 좋은 간격과 작은 글꼴 크기로 깨끗하게 정리됩니다.최대 너비와 수평 넘침도 설정되어 있어 페이지 흐름을 파괴하지 않고 긴 코드 세그먼트를 스크롤할 수 있습니다.

// block code
.highlight pre {
  margin: 0;
  padding: spacing(4);
  max-width: 100%;

  font-size: type(font-size, small);

  border-top: spacing(4) solid #c5c5d0;

  overflow-x: scroll;
}

너는 왜 border-top 디자인이 맨 위에 두꺼운 회색 테두리를 추가했는지 알고 싶을지도 모른다.인기 상품나는 잠시 후에 이 문제를 다시 이야기할 것이다.
다음은 코드 블록을 둘러싼 포장류입니다.이것은 블록과 내연 코드 세그먼트가 공유하는 같은 highlighter-rouge 클래스이지만, 코드 블록에만 스타일을 설정하는 원소 선택기가 있습니다.이러한 패키지 스타일은 코너를 구부리고 그 뒤에 음영을 추가하여 기본적인'창'효과를 만듭니다.

// block code wrapper
div.highlighter-rouge {
  position: relative;
  margin-bottom: spacing();

  border-radius: spacing(2);
  box-shadow: container(box-shadow, 1);

  overflow: hidden;
}

또 다른 이상한 스타일은 상대적인 위치다.만약 네가 알아차렸다면, 또 하나의 스트라이크였다.이것과 상단 테두리에 코드 표시줄이 추가되었습니다. 코드 표시줄은 추가 탭일 뿐입니다. 블록을 코드 세그먼트로 표시합니다.
이 코드 막대는 모든 코드 블록의 기본값이기 때문에 통용적으로 보일 것이다.그것은 간단한 회색 문자'코드'일 것이다이것은 시력이 있는 사용자에 대한 일종의 증강일 뿐이기 때문에 나는 CSS 위조 요소로 그것을 추가할 수 있다고 생각한다.
따라서 ::before 위조 절대 포지셔닝은'코드'텍스트를 추가하는 간단한 방법이다.태그 텍스트를 더 적합한 위치로 축소하고 코드의 같은 글꼴 계열을 사용합니다.

// Text
div.highlighter-rouge {
  &::before {
    content: 'Code';
    position: absolute;
    top: 3px;
    left: spacing(4);

    text-transform: uppercase;
    color: color(mono, black);
    font-family: type(font-family, mono);
    font-size: type(font-size, xtiny);
  }
}

이것은 매우 좋지만, 나는 그것을 내 창문처럼 보이게 다시 한 번 만지고 싶다.그래서 나는 ::after 위조 요소를 사용하여 오른쪽 상단에 작은 단추를 만들었다. 마치 맥북 브라우저 창과 같다.그것은 클릭할 수 없지만 아름다운 시각적 무늬를 첨가했다.

// Button
div.highlighter-rouge {
  &::after {
    content: '';
    position: absolute;
    top: spacing(1);
    right: spacing(2);
    width: 8px;
    height: 8px;

    border-radius: 100%;
    background-color: color(primary, dark);
  }
}

이것이 바로 좋은 코드 블록을 위한 모든 기본 양식이다.다음은 이 코드의 예시입니다!

언어 레이블 추가

나는 코드 세션에 특정 언어의 종류가 있다는 것을 알아차렸다.예를 들어, 여러 요소에 JavaScript 세션이 있습니다language-javascript.이것은 코드 블록에 특정한 언어를 사용하여 새로운 색채와 라벨을 추가하는 아이디어를 주었다.
우선, 모든 언어의 단편은 하나의 라벨과 색깔이 필요하다.Sass 지도는 이 요구를 완벽하게 만족시켰다.나는 내가 사용하는 다른 언어에 대해 빠른 정규 표현식 검색을 했고, 그것들을 위해 관련 색을 찾거나 합성했다.

$highlight-languages: (
  'html': #ff977d,
  'hbs': #fda,
  'markdown': #332d31,
  'css': #053bb9,
  'scss': #bf4080,
  'javascript': #f7df1e,
  'json': #fcf4a3,
  'yaml': #be93d4,
  'ruby': #a91401,
  'bash': #aaa
);

현재 나는 그것들을 두루 훑어보고 Kramdown이 렌더링한 내용과 일치하는 클래스를 만들어야 한다.스타일은 패키지에 배치해야 하므로 JavaScript 예는 div.language-javascript 을 대상으로 해야 합니다.그래서 나는 Sass 맵을 훑어보고 언어 이름을 선택기에 삽입했다.

// Block code for specific languages
@each $language, $color in $highlight-languages {

  div.language-#{$language} {
    // Styling here
  }
}

그러나 나는 언어의 색깔이 명암이 혼합되어 있다는 문제를 깨달았다.어떤 사람들은 적당한 대비를 얻기 위해 텍스트와 단추에 비교적 연한 색을 사용해야 한다.이 순환에서 나는 어떻게 그것들을 구분합니까?
나도 이전에 비슷한 문제를 겪은 적이 있기 때문에, 나는 Sass가 색깔의 밝기를 측정하는 내장된 기능을 가지고 있다는 것을 안다.나는 텍스트와 단추 색을 두 변수로 설정하고 밝기 조건을 추가했다.현재 언어 색이 옅으면 텍스트와 단추는 짙은 색을 사용하고, 반대로도 사용됩니다.

// Block code for specific languages
@each $language, $color in $highlight-languages {
  $text-color: '';
  $button-bg: '';

  @if (lightness($color) > 50) {
    $text-color: color(mono, black);
    $button-bg: color(primary, dark);
  } @else {
    $text-color: color(mono, white);
    $button-bg: color(primary, light);
  }

  div.language-#{$language} {
    // Styling here
  }
}

나머지는 CSS 속성을 덮어쓰는 비교적 간단한 작업입니다.색상과 코드 막대의 텍스트입니다.

// Block code for specific languages
@each $language, $color in $highlight-languages {
  $text-color: '';
  $button-bg: '';

  @if (lightness($color) > 50) {
    $text-color: color(mono, black);
    $button-bg: color(primary, dark);
  } @else {
    $text-color: color(mono, white);
    $button-bg: color(primary, light);
  }

  div.language-#{$language} {
    .highlight pre {
      border-color: $color;
    }

    &::after {
      background-color: $button-bg;
    }

    &::before {
      content: $language;
      color: $text-color;
    }
  }
}

이 @each 순환 생성기는 CSS 파일을 팽창시킬 수 있는 많은 추가 클래스를 만들었습니다.이것이 바로 이 종류들이 그들이 필요로 하는 소량의 양식만 덮어쓰는 이유이다.다른 건 다 처리했어.
스타일이 텍스트와 단추의 색을 바꾸어 대비를 이루기 때문에 약간의 팽창이 생겼다.일부 언어 색상은 기본 설정의 짙은 색을 사용합니다.따라서 같은 짙은 색으로 짙은 색을 덮을 필요가 없다.이것은 단지 약간의 코드 팽창일 뿐이지만, 나는 이후에 그것을 재구성할 수 있다.

끝내다

이것들이 있으면, 너는 나의 전체 사이트에서 더욱 많은 코드 단편을 볼 수 있을 것이다.You can see examples of it throughout the original post on my website, 하지만 여기에는 다른 언어로 그것을 집으로 가져가는 것이 있다.

Here's the full Sass partial with all these styles, including the code syntax styling I skipped over . 새로운 외관이 생겨도 여기서 한 부분을 복제하는 것은 나에게 좀 길다.나중에 긴 코드 세그먼트를 더 잘 지원하고 싶다면, 수직 스크롤의 최대 높이를 추가할 수 있습니다.코드를 개선하는 방법은 거의 항상 더 많다.
나는 본문을 읽는 프로그래머가 코드 세션을 어떻게 설계하는지 시험해 보라고 격려한다.또는 이런 스타일을 기점으로 그들의 사이트를 위해 스타일을 재구성한다.모든 우수한 재설계와 마찬가지로, 나는 이곳에서 글을 쓰고 코드를 공유하기를 더욱 갈망하게 한다.
Cover image courtesy of SafeBooru.org .