Still using Word ? Try this instead !

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…



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

Download VSCode

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

Show all assets

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

Windows 64bits

Step 1

Extension tab in VSCode / VSCodium :

Extension tab

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 :

HTML CSS Support

Markdown PDF

Auto Open Preview Panel

Step 2

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

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

New 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 :

Files

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 { }

CSS Code

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

MD Code

Step 4

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

Red Background <h1>

Preview :

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

Preview 2

Result :

Result

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

Test1

Test1 Preview

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

PDF File

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


Print Share Comment Cite Upload Translate
APA
Ziad OUALHADJ | Sciencx (2024-03-29T05:27:50+00:00) » Still using Word ? Try this instead !. Retrieved from https://www.scien.cx/2023/01/27/still-using-word-try-this-instead/.
MLA
" » Still using Word ? Try this instead !." Ziad OUALHADJ | Sciencx - Friday January 27, 2023, https://www.scien.cx/2023/01/27/still-using-word-try-this-instead/
HARVARD
Ziad OUALHADJ | Sciencx Friday January 27, 2023 » Still using Word ? Try this instead !., viewed 2024-03-29T05:27:50+00:00,<https://www.scien.cx/2023/01/27/still-using-word-try-this-instead/>
VANCOUVER
Ziad OUALHADJ | Sciencx - » Still using Word ? Try this instead !. [Internet]. [Accessed 2024-03-29T05:27:50+00:00]. Available from: https://www.scien.cx/2023/01/27/still-using-word-try-this-instead/
CHICAGO
" » Still using Word ? Try this instead !." Ziad OUALHADJ | Sciencx - Accessed 2024-03-29T05:27:50+00:00. https://www.scien.cx/2023/01/27/still-using-word-try-this-instead/
IEEE
" » Still using Word ? Try this instead !." Ziad OUALHADJ | Sciencx [Online]. Available: https://www.scien.cx/2023/01/27/still-using-word-try-this-instead/. [Accessed: 2024-03-29T05:27:50+00:00]
rf:citation
» Still using Word ? Try this instead ! | Ziad OUALHADJ | Sciencx | https://www.scien.cx/2023/01/27/still-using-word-try-this-instead/ | 2024-03-29T05:27:50+00:00
https://github.com/addpipe/simple-recorderjs-demo