Quickly add random text to your HTML with this simple trick! 🏃‍♂️💨

Savvas Stephanides - Jul 6 '23 - - Dev Community

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!

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Terabox Video Player