Skip to main content

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

울타리친 코드 블록과 코드 샘플을 공유하고 구문 강조 표시를 사용하도록 설정합니다.

펜싱된 코드 블록

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

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

트리플 백틱이 코드 블록을 원시 서식으로 렌더링하는 방법을 보여주는 렌더링된 GitHub 마크다운의 스크린샷. 블록은 "함수 테스트() {"로 시작합니다.

팁: 목록 내에서 서식을 유지하려면 펜싱되지 않은 코드 블록을 8개 공백으로 들여써야 합니다.

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

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

렌더링된 GitHub Markdown의 스크린샷으로, 네 번의 백틱으로 인해 코드 블록 주변의 세 번의 백틱이 원시 서식으로 렌더링되는 방식을 보여 줍니다. 블록은 "보세요! 내 백틱을 볼 수 있습니다."라고 표시됩니다.

코드 조각과 테이블을 자주 편집하는 경우 GitHub의 모든 주석 필드에서 고정 너비 글꼴을 사용하도록 설정하면 도움이 될 수 있습니다. 자세한 정보는 "GitHub에서의 쓰기 및 서식 지정 정보"을(를) 참조하세요.

구문 강조

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

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

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

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

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

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

Linguist를 사용하여 언어 검색을 수행하고 구문 강조를 위해 타사 문법을 선택합니다. 언어 YAML 파일에서 유효한 키워드를 확인할 수 있습니다.

다이어그램 만들기

코드 블록을 사용하여 Markdown으로 다이어그램을 만들 수도 있습니다. GitHub는 Mermaid, GeoJSON, TopoJSON, ASCII STL 구문을 지원합니다. 자세한 정보는 "다이어그램 만들기" 항목을 참조하세요.

추가 참고 자료