dev.to 에디터 가이드 🤓

dev.to 에디터 가이드 문서를 재편집한 글입니다.
아직은 한글 지원이 부족하여 불편하지만 앞으로 기대되는 서비스입니다.

알아 두어야 할 것들

• Jekyll 머리말를 사용합니다.
  • 에디터 v2 베타 버전에서는 머리말 태그가 없어졌습니다.
  • 에디터 v1이 기본 설정입니다.
• HTML 문법으로 작성할 수 있습니다.
• Liquid 지원하며 재미있는 사용자 정의 태그가 추가되고 있습니다.
• 비공개 게시물도 피드백/리뷰를 위해 미리보기 주소를 제공합니다.
• 공개할 준비가 되면 머리말의 published 값을 true로 설정하세요.
• 머리말의 title 값으로 URL를 자동 생성하는데 한글은 지원되지 않아 -로 표시됩니다.
  • 보기 좋은 URL를 만들고 싶다면 영문으로 공개 후 title를 한글로 변경하세요.
• 에디터는 자동 저장되지 않습니다. 주기적으로 저장하세요.

머리말

맨 첫줄에 3개의 대시 문자(---) 사이가 머리말 영역이며 각 게시물의 사용자 정의 변수를 설정합니다. 다음은 사용 가능한 목록입니다.

• title: 게시물 제목입니다.
• published: 게시물을 공개하려면 true, 비공개라면 false를 사용합니다.
• description: 게시물 설명으로 Twitter cards 혹은 open graph cards에서 사용됩니다.
• tags: 태그는 쉼표(,)로 구분하며 최대 4개까지 가능합니다.
• canonical_url: 게시물의 표준 URL를 입력합니다.
• cover_image: 게시물 표지 이미지 URL를 넣을수 있으며 권장 크기는 1000x420입니다.
• series: 게시물 시리즈 이름입니다.

✍ Markdown 기본 문법

Below are some examples of commonly used markdown syntax. If you want to dive deeper, check out this cheat sheet.

글자 강조

글자 기울기: *asterisks* 혹은 _underscores_
글자 굵기: **글자 굵기** 혹은 __글자 굵기__
글자 취소선: ~~글자 취소선~~

링크

여기가 링크입니다.: [여기가 링크입니다.](링크 주소)

이미지

!\[이미지 대체 텍스트\](이미지 주소)

HTML figcaption 태그를 사용하면 캡션(caption)을 추가할 수 있습니다!

제목

Add a header to your post with this syntax:

# 1개의 '#'은 h1 태그와 같습니다.
## 2개의 '#'은 h2 태그와 같습니다.
...
###### 6개의 '#'은 h6 태그와 같습니다.

1개의 '#'은 h1 태그와 같습니다.

2개의 '#'은 h2 태그와 같습니다.

....

6개의 '#'은 h6 태그와 같습니다.

🌊 Liquid 기본 문법

Liquid 기본 태그를 지원하지만 사용자 정의 태그도 지원합니다. 다음은 사용자 정의 태그입니다.

dev.to Article/Post 퍼가기

전체 URL를 입력하세요.

{% link https://dev.to/kazz/boost-your-productivity-using-markdown-1be %}

도메인을 제외한 ID부터의 입력으로도 가능합니다.

{% link kazz/boost-your-productivity-using-markdown-1be %}

dev.to User 퍼가기

사용자 이름만 입력하세요.

{% user gaerae %}

dev.to Tag 퍼가기

태그 이름만 입력하세요.

{% tag git %}

dev.to Comment 퍼가기

댓글의 오른쪽 상단 화살표를 클릭 한 다음 "Permalink"에서 URL의 ID 정보를 확인하여 입력하세요.

{% devcomment 2d1a %}

dev.to Podcast Episode 퍼가기

전체 URL를 입력하세요.

{% podcast https://dev.to/basecspodcast/s2e2--queues-irl %}

Twitter 퍼가기

게시물 id를 입력하세요.

{% twitter 834439977220112384 %}

Glitch 퍼가기

프로젝트 ID를 입력하세요.

{% glitch earthy-course %}

몇 가지 선택 옵션이 있습니다. ID 뒤에 공백으로 구분하여 입력하세요.
app

• 앱 미리보기만 표시합니다.
• {% glitch earthy-course app %}

code

• 코드만 표시합니다.
• {% glitch earthy-course code %}

preview-first

• 앱 미리보기를 화면 왼쪽에 표시합니다.
• {% glitch earthy-course preview-first %}

no-attribution

• 제작자 정보를 숨깁니다.
• {% glitch earthy-course no-attribution %}

no-files

• 파일 목록을 숨깁니다.
• {% glitch earthy-course no-files %}

file

• 기본 출력 파일을 변경할 수 있습니다. 기본값은 index.html입니다.
• {% glitch earthy-course file=script.js %}

GitHub Repo 퍼가기

사용자와 저장소 이름을 입력하세요.

{% github thepracticaldev/dev.to %}

GitHub Issue or Comment 퍼가기

전체 URL를 입력하세요.

{% github https://github.com/thepracticaldev/dev.to/issues/9 %}

GitHub Gist 퍼가기

전체 URL를 입력하세요.

{% gist https://gist.github.com/QuincyLarson/4bb1682ce590dc42402b2edddbca7aaa %}

Video 퍼가기

ID 값만 입력하세요.

• YouTube, Vimeo

{% youtube dQw4w9WgXcQ %}

{% vimeo 193110695 %}

SlideShare 퍼가기

key 값만 입력하세요.

{% slideshare rdOzN9kr1yK5eE %}

CodePen 퍼가기

전체 URL를 입력하세요.

{% codepen https://codepen.io/twhite96/pen/XKqrJX %}

default-tab

• 기본 탭 옵션을 지원합니다. 기본값은 result 입니다.
• {% codepen https://codepen.io/twhite96/pen/XKqrJX default-tab=js,result %}

RunKit 퍼가기

다음 예제를 참고하여 입력하세요.

{% runkit
// 숨겨진 설정 코드를 추가하는 영역입니다.
const hiddenVar = 42
%}
// visible, reader-editable 코드를 추가하는 영역입니다.
console.log(hiddenVar)
{% endrunkit %}

Stackblitz 퍼가기

Stackblitz ID 값을 입력하세요.:

{% stackblitz ball-demo %}

CodeSandbox 퍼가기

Sandbox ID 값을 입력하세요.

{% codesandbox ppxnl191zx %}

repl.it 퍼가기

URL에서 도메인을 제외한 정보를 입력하세요.

{% replit @WigWog/PositiveFineOpensource %}

Instagram 퍼가기

게시물 ID 값을 입력하세요.

{% instagram BXgGcAUjM39 %}

Speakerdeck 퍼가기

Embed link 정보에서 data-id를 확인하여 사용자 정의 태그에 입력하세요.

# 제공하는 Embed link 정보입니다.
< script async class="speakerdeck-embed"
data-id="7e9f8c0fa0c949bd8025457181913fd0"
data-ratio="1.77777777777778" src="//speakerdeck.com/assets/embed.js">< /script >

위에서 확인한 data-id 값을 입력하세요.

{% speakerdeck 7e9f8c0fa0c949bd8025457181913fd0 %}

Soundcloud 퍼가기

전체 URL를 입력하세요.

{% soundcloud https://soundcloud.com/user-261265215/dev-to-review-episode-1 %}

데이터 파싱하기

간단한 사용 방법입니다.

`{% mytag %}{{ site.SOMETHING }}{% endmytag %}`

raw 태그를 사용하는 방법입니다.

`{% raw %}{{site.SOMETHING }} {% ``endraw`` %}`

일반적인 결함들

번호가 지정된 목록 사이에 이미지를 추가해야된다면 이미지 태그 앞에 공백 혹은 탭을 추가해야 번호가 연결됩니다. 그렇지 않으면 이미지 태그 다음 목록 번호가 초기화되어 1부터 시작하게 됩니다.

목록 예제
1. 목록 1입니다.
    ![이미지 대체 텍스트](이미지 주소)
2. 목록 2입니다.

Markdown 문법을 자세히 알고 싶다면 클릭하세요.

즐겁게 게시물을 작성하세요! 📝