코드 블록 만들기 및 강조 표시

펜싱된 코드 블록

코드 블록 앞뒤에 삼중 백틱 ```을 배치하여 펜싱된 코드 블록을 만들 수 있습니다. 원시 서식을 더 쉽게 읽을 수 있도록 코드 블록 전후에 빈 줄을 배치하는 것이 좋습니다.

```
function test() {
  console.log("notice the blank line before this function?");
}
```

코드 블록을 만들기 위해 삼중 백틱을 사용하는 방법을 보여 주는 렌더링된 GitHub Markdown의 스크린샷. 블록은 "함수 테스트() {"로 시작합니다.

팁

목록 내에서 서식을 유지하려면 펜스로 둘러싸지 않은 코드 블록을 공백 8개로 들여쓰기하세요.

펜싱된 코드 블록에 3중 백틱을 표시하려면 4중 백틱 안에 넣습니다.

````
```
Look! You can see my backticks.
```
````

사중 백틱 사이에 삼중 백틱을 작성하면 렌더링된 콘텐츠에 표시된다는 것을 보여 주는 렌더링된 Markdown의 스크린샷.

데이터 재사용 가능 사용자 설정 고정폭 글꼴 사용 가능 %}

구문 강조

선택적 언어 식별자를 추가하여 펜싱된 코드 블록에서 구문을 강조하도록 설정할 수 있습니다.

강조 표시된 구문은 쉽게 읽을 수 있도록 소스 코드의 색과 스타일을 변경합니다.

예를 들어 구문에서 Ruby 코드를 강조 표시하려면 다음을 수행합니다.

```ruby
require 'redcarpet'
markdown = Redcarpet.new("Hello World!")
puts markdown.to_html
```

그러면 구문이 강조 표시된 코드 블록이 표시됩니다.

GitHub에 표시된 Ruby 코드의 세 줄 스크린샷입니다. 코드의 요소는 스캔하기 쉽도록 보라색, 파란색, 빨간색 유형으로 표시됩니다.

팁

GitHub Pages 사이트에서 구문을 강조 표시하려는 펜스 코드 블록을 만들 때 소문자 언어 식별자를 사용합니다. 자세한 내용은 GitHub Pages 및 Jekyll 정보을(를) 참조하세요.

          [Linguist](https://github.com/github-linguist/linguist)를 사용하여 언어 검색을 수행하고 구문 강조를 위해 [타사 문법](https://github.com/github-linguist/linguist/blob/main/vendor/README.md)을 선택합니다. 
          [언어 YAML 파일](https://github.com/github-linguist/linguist/blob/main/lib/linguist/languages.yml)에서 유효한 키워드를 확인할 수 있습니다.

다이어그램 만들기

코드 블록을 사용하여 Markdown으로 다이어그램을 만들 수도 있습니다. GitHub은 Mermaid, GeoJSON, TopoJSON 및 ASCII STL 구문을 지원합니다. 자세한 내용은 다이어그램 만들기을(를) 참조하세요.

추가 참고 자료

          [GitHub Flavored Markdown 사양](https://github.github.com/gfm/)

        [AUTOTITLE](/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax)

누가 이 기능을 사용할 수 있나요?

이 기사에서

펜싱된 코드 블록

구문 강조

다이어그램 만들기

추가 참고 자료