윙크에서 코드표현하기

윙크에서 코드를 멋지게 보이도록 작업하고 싶나요?

컴퓨터 관련 전자책을 만드시는 분들에게는 이 코드 표현이 정말 중요합니다.

먼저 두 가지 코드를 사용하는데 

맨앞에 <pre>

맨 뒤에</pre>

를 적어줍니다.

그리고 각각의 코드 라인에 맞추어서 <code>  </code>

이렇게 적어주지요. 그 다음 CSS부분에 아래의 CSS표현식을 적어줍니다. 그러면 끝~

pre code {
  counter-increment: line;
}

pre code:before {
  content: counter(line);
  width: 2em;
  display: inline-block;
  text-align: right;
  padding-right: 8px;  /* won’t reflow with font-size */
  margin-right: 8px;
  border-right: 1px solid currentColor;  /* will invert */
  -webkit-user-select: none;  /* won’t be copied/pasted */
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

---

예)

<pre>

<code>@font-face {</code>

<code>font-family: 'kopubbatanglight';</code>

<code>font-style: inherit;</code>

<code>font-weight: bold;</code>

<code>src: url(../Fonts/KoPubBatangLight.ttf);</code>

<code>text-decoration: inherit;</code>

<code>} </code>

</pre>

그러면 다음과 같이 표현이 됩니다.

하지만 아쉽게도 얘는 epub3.0에서 지원하는 것이라 epub2.0뷰어에서는 지원이 안 될 수도 있습니다.

but 윙크에서는 표현됩니다~