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>
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)
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. 🫣
Haha! That's fair enough. Maybe there's an extension in VS Code which lets you add lit ipsum with a shortcut 🤷♂️
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.
Nice Explanation :)
Thank you Mannu! Glad you found it useful!
you're welcome Savvas :)
nice trick
I know. Saved tons of milliseconds so I don't have to look for the text online 🔥
When in doubt use Lorem Ipsum 😉
I use lorem ipsum even if I'm not in doubt 😅