Streamline your DEV.to writing workflow with VSCode
Tags: vscode, meta, writing, tutorial
Published: 2019-11-18 11:03:10


## 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](https://i.imgur.com/qfyw8do.png)

### Well guess what!?..

![tada](https://media3.giphy.com/media/8PsbM0OpqPl9OClfSw/giphy.gif?cid=790b76111e3db1ee6bdd5b1f889fd7941424aeab9202133b&rid=giphy.gif)

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

CHECK DIS OUT 👇

![preview](https://i.imgur.com/c2udnSp.png)

## Here's how to get started...

- Download [VSCode](http://bit.ly/vscodenb9k) (if you're not already using it)
- Install [Markdown Preview Enhanced](https://marketplace.visualstudio.com/items?itemName=shd101wyy.markdown-preview-enhanced)
- In VSCode, press `ctrl+shift+p` - or `F1` - and start typing  `custom css`

![custom css](https://i.imgur.com/pt9iGdn.png)

- 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](https://media0.giphy.com/media/55SfA4BxofRBe/giphy.gif?cid=790b7611aabb634be85778825f1de35ae477b526f7fde75c&rid=giphy.gif)

- **Copy and paste** the following code in `style.less` and save

```css
.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](https://i.imgur.com/5JnCPtL.png)

- 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](https://www.fontshop.com/families/palatino-linotype)
  - [Segoe UI](https://www.fontshop.com/families/segoe-ui-symbol)

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](http://bit.ly/nb9kTwitch)**

*\*For the most up to date schedule, check my pinned post on [Twitter](https://www.twitter.com/ninjabunny9000).*