dev.to 에디터 가이드 🤓

gaerae — Fri, 11 Jan 2019 09:10:44 +0000

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 문법을 자세히 알고 싶다면 클릭하세요.

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

DEV Community: gaerae

dev.to 에디터 가이드 🤓

알아 두어야 할 것들

머리말

✍ Markdown 기본 문법

글자 강조

링크

이미지

제목

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

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

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

🌊 Liquid 기본 문법

dev.to Article/Post 퍼가기

dev.to User 퍼가기

dev.to Tag 퍼가기

dev.to Comment 퍼가기

dev.to Podcast Episode 퍼가기

Twitter 퍼가기

Glitch 퍼가기

GitHub Repo 퍼가기

GitHub Issue or Comment 퍼가기

GitHub Gist 퍼가기

Video 퍼가기

SlideShare 퍼가기

CodePen 퍼가기

RunKit 퍼가기

Stackblitz 퍼가기

CodeSandbox 퍼가기

repl.it 퍼가기

Instagram 퍼가기

Speakerdeck 퍼가기

Soundcloud 퍼가기

데이터 파싱하기

일반적인 결함들

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