[💻개발용] 디스코드에서 코드블럭과 파일로 보기 쉽게 코드를 공유해봅시다!

디스코드에서 코드블록과 파일로 한눈에 보기 좋게 코드를 공유해봅시다

 프로그래밍에 대한 관심이 커짐에 따라 디스코드에서도 코드가 공유되는 일이 많아졌습니다. 주로 질문할 때 많이 적게 되죠. 이번 시간에는 디스코드에서 보기 편하게 코드에 색을 넣어 공유하는 법에 대해서 알아봅시다. 왼쪽에서 오른쪽처럼 바뀌어요. 다른 사람에게도 알려주어 디코에서 코드를 읽기 쉽게 표시해봅시다!

 

 이 글은 디스코드 서버에서 신청이 들어와서 쓰인 글입니다. 만약 보고 싶은 글의 주제가 있다면 디스코드로 들어와서 말해주세요! 대신 정리해서 쉽게 써드립니다.

 

코드 블록

 디스코드에서는 마크다운 문법으로 코드 블록을 표현할 수 있습니다. `나 ```로 감싸면 코드 블록을 만들 수 있죠. 코드 블록 안에 코드를 두면 코드가 조금 더 도드라져 보이고 코드에 색이 칠해집니다. 다른 마크다운 문법에 대해서는 글 맨 아래 링크를 봐주세요.

 

한 줄 코드 블록 - `코드 내용`

📥 입력

`int`형에서 `str`로 바꾸시려면 `str()`함수를 쓰시면 돼요

📤 출력

 채팅 중간중간 중요한 글자들에 박스를 씌워 강조해줍니다. 쓰는 방법은 강조하고픈 글자 양옆을 `(억음부호)로 감싸주세요. 주로 코드 관련 용어들을 감싸주면 보기가 편해집니다.

 

여려 줄 코드 블록 - ```(프로그래밍 언어 이름) 코드```

📥 입력

```python
import random

print('주사위 숫자 : ' +random.randrange(1,7))
```
이거 안 되는데 왜 그런건가요ㅠㅠㅠ

📤 출력

 위와 같이 전체 코드를 박스로 감싸줍니다. 또 각 언어에 맞게 코드에 색을 칠해줘 코드를 보기 편하게 만들어줍니다. 하는 법은 코드의 앞뒤에 줄을 넘겨  ```(억음부호 3개)을 붙여주면 됩니다. 그리고 첫 줄에서 ```뒤에 프로그래밍 언어명을 입력하면 각 언어에 맞는 색이 자동으로 칠해집니다. 코드블럭을 이용하여 질문받거나 답변해줄 때 보는 사람이 더 편하게 볼 수 있게 해보세요!

 

(입력 방법을 잘 모르시겠다면 위의 입력 예시를 살펴봐주세요!)

 

 사족으로 코드에 색이 칠해지는 것은 하이라이팅이라고 하며 highlight.js(https://highlightjs.org/) 자바스크립트를 이용해서 이루어집니다. 196개의 언어와 242개의 스타일을 지원한다고 하네요. 적용되는 테마는 10.7.2 버전의 solarized-dark, solarized-light라고 합니다. 11.0.0 버전에 들어와서는 색이 바뀌었네요.

 

파일

 .py나 .json과 같이 프로그래밍과 관련된 확장자의 경우 바로 파일의 내용을 볼 수 있습니다. 또 2,000자 이상의 글을 붙여넣을 경우에 자동으로 텍스트 파일로 바뀌어 업로드됩니다.

 

화면 설명

 아래에 여러 가지 버튼들이 있습니다. 왼쪽부터 순서대로 살펴보면

1. 확장

누르면 다음과 같이 숨겨져 있던 코드가 보이게 됩니다. 또 코드의 총 줄 수가 보이게 됩니다.

 

2. 파일 전체 보기

 코드 전체 내용이 팝업이 띄워져서 보입니다. 확장에서는 코드가 너무 길면 뒷 부분은 숨겨져 있을 때도 있는데, 파일 전체 보기에서는 잘리는 부분 없이 전체 코드를 볼 수 있습니다.

 

3. 파일명과 용량

파일명과 용량을 볼 수 있습니다.

 

4. 다운로드

업로드된 파일을 다운 받습니다.

 

5. 언어변경

 코드가 색칠되는 방식(하이라이팅)을 바꿉니다. 아래 텍스트 파일 설명에서 더 자세하게 다룰 예정입니다.

 

파일 업로드 방법

 파일을 업로드 하는 법은 채팅창 왼쪽의 더하기(+) 표시를 눌러 업로드 하시면 됩니다. 또, PC의 경우는 올리고픈 파일을 드래그엔 드롭으로 끌고 와주면 됩니다.

 

텍스트 파일 (*.txt)

 텍스트 파일을 업로드 하면 다운받지 않고 바로 디스코드 내에서 내용을 확인할 수 있습니다. 그리고 2,000자 이상의 글을 붙여넣으면 자동으로 텍스트 파일로 바뀌어 업로드됩니다.

 위의 코드 블록처럼 코드에 색을 넣고 싶다면(하이라이팅) 오른쪽 아래의 언어 변경 아이콘(<>)을 눌러

변경하고픈 언어를 선택해주세요.

선택하시면 다음과 같이 파일 확장자는 바뀌지 않고 코드의 색만 바뀌게 됩니다.

 

프로그래밍 관련 파일(.js, .py, .json, .sql 등등...)

프로그래밍 관련 파일을 올리면 자동으로 해당 언어에 맞게 코드를 색칠해줍니다. 텍스트 파일과 마찬가지로 아래의 아이콘들을 눌러 내용을 확인하고 하이라이팅을 바꿀 수 있습니다.

 

마치며

 위에서 다룬 내용을 사용하여 코드를 공유하는 대화 예시를 만들어봤습니다. 이제부터 이런 식으로 디스코드에서 코드를 남들에게 보기 좋게 공유해 봅시다. 또 만약 코딩 질문이 있으시면 블로그 디스코드 서버에 와서 이런 식으로 물어봐주세요!

 혹시 디스코드에서 쓸 수 있는 다른 마크다운 문법들에 대해서 알고 싶으면 아랫글을 클릭해주세요.

Ⓜ️⬇️ 디스코드에서 마크다운으로 글자를 꾸며봅시다(굵게, 취조선 등등...)

[🌈일반용] 디스코드에서 글자색을 채팅에 추가해 꾸며봅시다! (최신 버전)

 

 또 프로그래밍과 관련된 다른 글들은 아래를 봐주세요!

⚓ 디스코드와 깃헙(Github)을 웹훅으로 연결하여 알림을 받아봅시다

💽 RTFM - 디코에서 프로그래밍 언어를 실행하고 결과를 확인해봅시다!

 

또 언제든지 궁금하신 사항이나 틀린 내용이 있으면 댓글을 달아주시거나,
아래 링크를 클릭해서 제 블로그 디코 서버에 들어와 주세요!
언제든지 답해드립니다! discord.gg/bg6zubhtkS
(코딩 질문 포함!)
또 화면 오른쪽 아래의 디스코드 아이콘을 누르면 실시간으로 답해드립니다!
(보이지 않는다면 광고 차단을 꺼주세요)