VSCode를 사용하여 DEV.to 작성 워크플로 간소화

안녕하세요, 동료 DEV 퍼블리셔입니다! 👋

✅ 텍스트 편집기에서 DEV 게시물의 전체 또는 일부를 작성합니까?

✅ 진행 상황을 DEV 초안으로 자주 복사하여 붙여넣은 다음 미리보기하여 진행 상황을 확인합니까?

✅ 아니면 DEV 편집기에서 직접 모든 게시물을 작성하고 실시간 미리보기를 나란히 보고 싶습니까?

하루에 이 버튼을 몇 번 누르십니까? 💯

글쎄요!?..

VSCode의 단일 확장과 몇 줄의 CSS로 DEV 작성 워크플로우를 간소화할 수 있습니다!

확인해보세요 👇

시작하는 방법은 다음과 같습니다.

다운로드VSCode(아직 사용하지 않는 경우)

설치 Markdown Preview Enhanced

VSCode에서 ctrl+shift+p - 또는 F1 -를 누르고 custom css 입력을 시작합니다.

Markdown Preview Enhanced: Customize CSS 옵션이 표시되면 선택합니다. 그러면 style.less라는 파일이 열립니다. (들었잖아...)

style.less에 다음 코드를 복사하여 붙여넣고 저장합니다.

.markdown-preview.markdown-preview {
  font-family: Palatino Linotype;
  font-size: 21px;
  line-height: 32px;
  color: #0a0a0a;
}
.markdown-preview.markdown-preview p {
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

.markdown-preview.markdown-preview h2 {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 1.7em;
  font-weight: 400;
  line-height: 1.14em;
}

.markdown-preview.markdown-preview h3 {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 1.32em;
  font-weight: 400;
}

.markdown-preview.markdown-preview img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: calc(100% + 12px);
}

.markdown-preview.markdown-preview li {
  margin: 0.3em auto;
}

.markdown-preview.markdown-preview blockquote {
  margin: 0.95em 0 0.95em;
  font-size: 0.92em;
  line-height: 1.4em;
  color: #29292e;
  background: #fff;
  padding: 0.1% 6% 0.1% 4%;
}

.markdown-preview.markdown-preview code {
  color: #f92671;
  background: #f9f9fa;
  padding: 0.1em 0.3em 0;
  font-size: 0.84em;
  line-height: 1.6em;
}

.markdown-preview.markdown-preview pre {
  background: #29292e;
  color: #eff0f9;
  font-size: 0.64em !important;
}

Markdown 파일을 연 다음 새로운 Markdown Preview Enhanced 또는 단축 코드ctrl+k v를 클릭하여 미리 보기를 열고 대단한 성공에 경탄하십시오.

마지막으로, 그리고 가장 중요한 것은 마음을 쓰세요!

추가 물건

사용된 글꼴은 모두 Windows에서 제공됩니다. 다른 OS에 대해서는 잘 모르겠지만 구매가 예산을 초과하는 경우 대안을 찾을 수 있다고 확신합니다.

Palatino Linotype

Segoe UI

복제 방법을 알 수 없는 몇 가지 사항이 있습니다(주로 코드 미리 보기 및 블록 인용 패딩). 적어도 DEV 드래프트로 다시 가져와서 미리보기 전에 콘텐츠의 대부분을 작성하는 것으로 충분합니다. 시간과 에너지를 절약할 수 있기를 바랍니다.

마크다운 미리보기를 더 좋게 만들 수 있는 포인터나 조정이 있는 사람이 있으면 아래에 의견을 남겨주세요. 특히 코드 블록에서 스타일을 일치시키는 방법을 알아낼 수 있는 CSS 전문가의 의견을 듣고 싶습니다. :디

Twitch 라이브 코딩

이 기사, 코드, VSCode에 대해 질문이 있거나 동료 괴짜들과 어울리고 싶다면 실시간 스트리밍 중에 들러 인사하세요! 매주 화요일, 목요일, 토요일 오후 7시에 Python shenanigans & lame jokes™를 스트리밍합니다.

💜 Follow on Twitch

*최신 일정은 에 있는 제 고정 게시물을 확인하세요.