DEV Community

Cover image for Quickly add random text to your HTML with this simple trick! πŸƒβ€β™‚οΈπŸ’¨
Savvas Stephanides
Savvas Stephanides

Posted on

Quickly add random text to your HTML with this simple trick! πŸƒβ€β™‚οΈπŸ’¨

It's 11 o'clock on Saturday night.

Pubs are packed with people drinking and enjoying their night out.

But not you. You're inside looking into your wide-screen monitor. You decided instead, to dive into the magical world of HTML! 🌈

So there you are, with Visual Studio Code open. Your HTML code right in front of you with all its colourful glory thanks to the syntax highlighting by VS Code.

The HTML looks something like this:



<!DOCTYPE html>
<html lang="en">
<head>
    <title>My page</title>
</head>
<body>
    <div></div>
</body>
</html>


Enter fullscreen mode Exit fullscreen mode

But that div looks empty. And that makes you sad. You need to add some text in there to see how it looks in the browser. "Hello world" is cool and all but you're looking for something more realistic to how the div will be used in real life...

Then you discover the solution! A piece of text written over 2000 years ago is perfect for this situation. It's called "lorem ipsum".

Now you can add text to your div! Thing is, every time you need to add some of this text, you need to go to a website, copy some of the text, and paste it in your editor. Is there a faster way, without having to leave your editor? Yes there is!

The lorem shortcut!

Open your HTML page in VSCode, point to the part where you want to add some random text, write this: lorem5 and press Tab

What just happened? 5 words have been added to your HTML just like that. Now you can save precious seconds, or minutes even, with this shortcut!

Now try this: write lorem*5 and press Tab:

5 paragraphs have been pasted into your text file! πŸ”₯

Now you never need to leave your editor to add some random text to your HTML page!

And that's the lorem shortcut which you can use in VS Code or any other editor that supports emmet! Thanks for reading!

Top comments (10)

Collapse
 
schemetastic profile image
Schemetastic (Rodrigo)

Wow cool! Didn't knew that...

I'd been using Lit Ipsum, but that's cause it comes with text from Pride and Prejudice and I like that more than the Lorem Ipsum. 🫣

Collapse
 
savvasstephnds profile image
Savvas Stephanides

Haha! That's fair enough. Maybe there's an extension in VS Code which lets you add lit ipsum with a shortcut πŸ€·β€β™‚οΈ

Collapse
 
schemetastic profile image
Schemetastic (Rodrigo) • Edited

Didn't find any, but there is an API, haha

litipsum.com/api/pride-and-prejudi...

I'm pretty sure it has to be easy to create a CLI tool or extension with this.

Collapse
 
mannu profile image
Mannu

Nice Explanation :)

Collapse
 
savvasstephnds profile image
Savvas Stephanides

Thank you Mannu! Glad you found it useful!

Collapse
 
mannu profile image
Mannu

you're welcome Savvas :)

Collapse
 
tdm98 profile image
TDM98

nice trick

Collapse
 
savvasstephnds profile image
Savvas Stephanides

I know. Saved tons of milliseconds so I don't have to look for the text online πŸ”₯

Collapse
 
h4ywyre profile image
Carlos

When in doubt use Lorem Ipsum πŸ˜‰

Collapse
 
savvasstephnds profile image
Savvas Stephanides

I use lorem ipsum even if I'm not in doubt πŸ˜