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도 같이 보여준다.

• 적용 후

// '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)))
});

Github Gist

gist를 통해 embed도 가능하다.

<script src="gist 주소"></script>

• 적용 후

Markdown

👉 minimal mistakes에 {{ }}나 {% %}가 안먹힐때 2023.03.01

👉 마크다운과 html에서 텍스트 정렬 2022.05.24

👉 마크다운 파일에 목차 링크 toc 넣기 2021.08.01

👉 github page, Jekyll에서의 마크다운 파일에 image(사진) 넣기 2021.08.01

👉 마크다운과 html 에서 이미지 정렬 2021.05.07

👉 Markdown에서의 코드 박스 꾸미기 2021.05.05

👉 Markup(html)을 사용한 특수문자  ---  제목 2021.05.05

👉 고급 Markdown 2021.05.04