CSS 적용하기

HTML 파일 내에 직접 css style을 지정하는 방법 이외

CSS파일 연결(link)

원하는 CSS파일을 추가하고 _layouts/default.html 내 아래 사항 추가

  ```css
  <!-- custom.css -->
  <link rel="stylesheet" type="text/css" href="/assets/built/custom.css" />
  ```

​

rough 활용 : pure-ruby syntax highlighter

원하는 코드블럭에 대해 각 언어별 문법(syntax) css 스타일을 적용하기 위한 도구

• _config.yml 설정파일 내 아래사항 추가

  ​xml highlighter: rough ​

• rough 설치
• rough 설치

• rough 설치

    gem install rough
  

• rougify help style 명령으로 사용가능한 테마 중 선택 (아래 참조)

    usage: rougify style [<theme-name>]
    Print CSS styles for the given theme. Extra options are passed to
    the theme. To select a mode (light/dark) for the theme, append
    '.light' or '.dark' to the <theme-name> respectively. Theme defaults
    to thankful_eyes.
  
        options:
          --scope       (default: .highlight) a css selector to scope by
          --tex         (default: false) render as TeX
          --tex-prefix  (default: RG) a command prefix for TeX
                        implies --tex if specified
  
        available themes:
          base16, base16.dark, base16.light, base16.monokai,
        base16.monokai.dark, base16.monokai.light, base16.solarized,
        base16.solarized.dark, base16.solarized.light, bw, colorful,
        github, gruvbox, gruvbox.dark, gruvbox.light, igorpro, magritte,
        molokai, monokai, monokai.sublime, pastie, thankful_eyes, tulip
  

• 개인적으로 즐겨 사용하는 base16.dark 테마 선택하여 style.css 생성

  rougify style base16.dark > assets/css/syntax.css
  

• minify해서 assets/built/css/syntax.css로 저장

• _layouts/default.html 내에 아래 추가

  <!-- syntax.css -->
  <link rel="stylesheet" href="/assets/built/syntax.css">
  

  ​

• code block 사용시 아래와 같이 “```” 또는 “~~~” 뒤에 사용언어 명시해주면 스타일 적용

  ``` python

  data = [1,2,3,4,5,6,7,8,9,10] data.reverse()

  for item in data: print(item)

  ```

data = [1,2,3,4,5,6,7,8,9,10]
data.reverse()

for item in data:

print(item)