Still using Word ? Try this instead !

This content originally appeared on DEV Community 👩‍💻👨‍💻 and was authored by Ziad OUALHADJ

Check my badge collection here

Today, in this beginner friendly tutorial, I'll show you a faster method to produce documents, without using Word or any other word processor.

How It can help with productivity

If you have a document to make, with a short deadline, the method I'll show you will greatly help, especially if you style it with custom titles, subtitles etc...

Who is going to benefit from it

If you use VSCode regularly, or know how to handle it, you will surely benefit from the technique, but if you don't, it will at least show a way to work differently.

Even if you don't use VSCode, if you apply this method, you might encounter a learning curve. But in the long run, you will save a lot of time.

You also want to know basic CSS styling.

The method explained

My method consists of using VSCode, the Markdown language, some CSS, and some extensions to speed up the process of document production.

Step 0

• Install VSCode here

• If you prefer an open source alternative (with no telemetry from Microsoft), then consider downloading instead VSCodium

Per example, if you are on windows, locate the package that ends with .exe
If you don't see it, click on "show all assets"

The version number may differ
If you are on Windows 64bits :

Step 1

Extension tab in VSCode / VSCodium :

Setup VSCode :

• Download the following extensions :
  • HTML CSS Support
  • Markdown PDF
  • Auto Open Preview Panel
• Optional extensions :
  • vscode-pdf
  • Markdown All In One

The extensions :

Step 2

• Create a VSCode Project by doing File > New Text File

• Click on Select a language and put "Markdown"
• Then, save it in a folder (I recommend the Desktop), File > Save As...
  • Rename the file as you want
• Create another text file (File > New Text File)

• Click on Select a language and put "CSS"
• Then, save it in the same folder as the first file (File > Save As...)
  • Rename the file as you want

This is what you should have :

Step 2

• In your first file (the one that ends by .md), copy and paste the following, and make sure to replace your_file.css by the name of yours
  • <link rel='stylesheet' href='your_file.css'>
• Go to your CSS file, and try this code :
  • body { background-color: aliceblue; }

Check the preview panel, and you will notice that the background color has changed

-> We will take advantage of this feature

Step 3

• Go to the CSS file
• Copy and paste the following code :
  • h1 { } h2 { } h3 { } p { }

• Go to the Markdown file (the one that ends by .md)
• Copy and paste the following code :
  • <h1>Hi ! I'm a title</h1> <h2>I'm a subtitle</h2> <h3>I'm an even smaller title !</h3> <p>Hey ! Can you see me ?</p>

Step 4

• At that point, you can now customize the CSS :
  • Per example, you can put background-color: red; in h1 { }

Preview :

• Here is another example :
• h1 { background-color: red; border-radius: 100px; font-family: 'Courier New', Courier, monospace; font-weight: 800; color: black; text-align: center; padding: 0 15px 0 15px; width: fit-content; margin: 0 0 5px 0; }

h2 {
background-color: blue;
border-radius: 100px;
font-family: 'Courier New', Courier, monospace;
font-weight: 800;
color: white;
text-align: center;
padding: 0 15px 0 15px;
width: fit-content;
}

h3 {
background-color: lightgreen;
font-family: 'Courier New', Courier, monospace;
color: black;
text-align: center;
padding: 0 15px 0 15px;
}

p {
background-color: grey;
font-family: Courier, monospace;
color: black;
font-size: 16px;
text-align: center;
padding: 0 15px 0 15px;
}

Result :

• You can then add more Markdown, with the tags like "h1", and the styling will be automatically added

Final Step

• Export the markdown file as a PDF
  • Right click while you have your Markdown file open
  • Click on "Markdown PDF: Export (pdf)"
• Navigate to the project's folder (where you put your Markdown / CSS files)
• You will then find a PDF File, the name being "your_file.pdf"
• Open it

Here you go !

I hope this technique will boost your productivity !

Thank you for going so far in the tutorial !
Don't hesitate to comment if you don't understand something

This content originally appeared on DEV Community 👩‍💻👨‍💻 and was authored by Ziad OUALHADJ