Streamline your DEV.to writing workflow with VSCode

Hello, fellow DEV publisher! 👋

✅ Do you write all or part of your DEV posts in a text editor?

✅ Do you frequently copy and paste your progress to a DEV draft, then preview it to see your progress?

✅ Or are you writing all your posts directly in the DEV editor but would love to see a real-time preview side-by-side?

How many times a day do you hit this button? 💯

Well guess what!?..

You can streamline your DEV-writing workflow with a single extension in VSCode and a few lines of CSS!

CHECK DIS OUT 👇

Here's how to get started...

• Download VSCode (if you're not already using it)
• Install Markdown Preview Enhanced
• In VSCode, press ctrl+shift+p - or F1 - and start typing custom css

• Select the Markdown Preview Enhanced: Customize CSS option when you see it. This will poop open a file called style.less. (you heard me...)

• Copy and paste the following code in style.less and save

.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;
}

• Open up a markdown file and then click the new Markdown Preview Enhanced or the shortcut chord ctrl+k v to open up the preview and marvel at your grand success.

• Finally, and most importantly, write your heart out!

Extra stuffs

The fonts used both come on Windows. I'm not sure about other OS's, but I'm sure you can find alternatives if purchasing them is beyond your budget.

• Palatino Linotype
• Segoe UI

There are a few things I couldn't figure out how to replicate (mostly the code previews and block-quote padding). At the very least, it's good enough to write the majority of your content before taking it back to a DEV draft and previewing it - hopefully saving you some time and energy.

If anyone has any pointers or tweaks that could make the markdown preview better, please leave a comment below. Would love to hear from the CSS pros, especially if anyone can figure out how to match styles on code blocks. :D

Live Coding on Twitch

If you have any questions about this article, the code, VSCode, or just wanna hang out with fellow nerds - swing by during a live stream and say hello! I stream Python shenanigans & lame jokes™ every Tuesday, Thursday, & Saturday at 7pm PST.

💜 Follow on Twitch

*For the most up to date schedule, check my pinned post on Twitter.