Markdown에서의 코드 박스 꾸미기

Code block Highlight은 두가지 종류가 있다.

1 .GFM Code Blocks

Github에서 만든 코드 블락이다.
markdown에 다음과 같이 입력한다. 더 자세한 내용은 fenced code blocks↗️ 참조.

  ```javascript
  // 'gulp html' -- does nothing
  // 'gulp html --prod' -- minifies and gzips HTML files for production
  gulp.task('html', () => {
    return gulp.src(paths.siteFolderName + paths.htmlPattern)
      .pipe(when(argv.prod, htmlmin({
        removeComments: true,
        collapseWhitespace: true,
        collapseBooleanAttributes: false,
        removeAttributeQuotes: false,
        removeRedundantAttributes: false,
        minifyJS: true,
        minifyCSS: true
      })))
      .pipe(when(argv.prod, size({title: 'optimized HTML'})))
      .pipe(when(argv.prod, gulp.dest(paths.siteFolderName)))
      .pipe(when(argv.prod, gzip({append: true})))
      .pipe(when(argv.prod, size({
        title: 'gzipped HTML',
        gzip: true
      })))
      .pipe(when(argv.prod, gulp.dest(paths.siteFolderName)))
  });
  ```

적용 후

// 'gulp html' -- does nothing
// 'gulp html --prod' -- minifies and gzips HTML files for production
gulp.task('html', () => {
return gulp.src(paths.siteFolderName + paths.htmlPattern)
  .pipe(when(argv.prod, htmlmin({
    removeComments: true,
    collapseWhitespace: true,
    collapseBooleanAttributes: false,
    removeAttributeQuotes: false,
    removeRedundantAttributes: false,
    minifyJS: true,
    minifyCSS: true
  })))
  .pipe(when(argv.prod, size({title: 'optimized HTML'})))
  .pipe(when(argv.prod, gulp.dest(paths.siteFolderName)))
  .pipe(when(argv.prod, gzip({append: true})))
  .pipe(when(argv.prod, size({
    title: 'gzipped HTML',
    gzip: true
  })))
  .pipe(when(argv.prod, gulp.dest(paths.siteFolderName)))
});

2. Jekyll Highlight Tag

Jekyll에서도 Highlight Tag를 제공한다.
Jekyll태그의 예시는 Jekyll tag↗️를 참조

linenos사용할 시 Line Number도 같이 보여준다.

적용 후

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// 'gulp html' -- does nothing
// 'gulp html --prod' -- minifies and gzips HTML files for production
gulp.task('html', () => {
  return gulp.src(paths.siteFolderName + paths.htmlPattern)
    .pipe(when(argv.prod, htmlmin({
      removeComments: true,
      collapseWhitespace: true,
      collapseBooleanAttributes: false,
      removeAttributeQuotes: false,
      removeRedundantAttributes: false,
      minifyJS: true,
      minifyCSS: true
    })))
    .pipe(when(argv.prod, size({title: 'optimized HTML'})))
    .pipe(when(argv.prod, gulp.dest(paths.siteFolderName)))
    .pipe(when(argv.prod, gzip({append: true})))
    .pipe(when(argv.prod, size({
      title: 'gzipped HTML',
      gzip: true
    })))
    .pipe(when(argv.prod, gulp.dest(paths.siteFolderName)))
});