loading...
Cover image for Streamline your DEV.to writing workflow with VSCode

Streamline your DEV.to writing workflow with VSCode

ninjabunny9000 profile image πŸ’Ύ bun.py Updated on ・3 min read

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? πŸ’―

preview

Well guess what!?..

tada

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

CHECK DIS OUT πŸ‘‡

preview

Here's how to get started...

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...)

finger guns

  • 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.

mpe button

  • 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.

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.

Posted on by:

ninjabunny9000 profile

πŸ’Ύ bun.py

@ninjabunny9000

A notoriously nerdy space cowgirl living out her cyberpunk future through Live Coding & DJing on Twitch. ~*Microsoft MVP*~

Discussion

pic
Editor guide