• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Emmet Shortcodes don't work [Topic edited for clarity]

Community Beginner ,
Nov 18, 2023 Nov 18, 2023

Copy link to clipboard

Copied

Hello.

 

I was following the tutorial Create a responsive grid layout (adobe.com)

and it teaches the code  <div class=“row”></div>, then it teaches a shortcut that should create this same line .row tab, but, for some reason, it simply doesn't work on my Dreamweaver, the app simply keeps the text as it is.

 

  • Dreamweaver 2021
  • Windows 10 Home Edition
  • Steps:
  1. Open the Source Code (html) tab on Dreamweaver;
  2. Between the lines <main> and </main> type the code (shortcut) .row and then press the tab button on keyboard.
  • Expected result: shortcut typed should be automatically converted to <div class=“row”></div> but nothing happens (.row and the tab space just keep there as a simple text).

 

TOPICS
Code , Error , How to

Views

254

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Nov 19, 2023 Nov 19, 2023

Copy link to clipboard

Copied

That's an old tutorial from 2016. 😮

 

To use Emmet Shortcodes, you need a current version of Dreamweaver (21.3) and Emmet Shortcodes must be enabled in your Preferences panel (Ctrl + U).  See Screenshot.

image.png

 

In Code View, try this:

<main>

[TYPE:]  .row>p>lorem  [hit TAB KEY] 

</main>

 

Ctrl + S to Save and F5 to refresh.

 

Your results should look like this:

image.png

 

Hope that helps.

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Nov 21, 2023 Nov 21, 2023

Copy link to clipboard

Copied

Well, I have a mystery right now but I think I discovered what was happening, but not exactly why. 

First I tried everything you and Jon taught me and nothing worked. And suddenly while I was already recording you a video, I used my mouse instead of my Wacom pen and everything worked. I guess I can't use my digital pen as a mouse on Dreamweaver. So, problem solved. Thanks for the help!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Nov 21, 2023 Nov 21, 2023

Copy link to clipboard

Copied

A Green Checkmark denotes valid code.

image.png

A Red X indicates the presence of code validation errors.

image.png

For best results, maintain error-free code. 

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Dec 05, 2023 Dec 05, 2023

Copy link to clipboard

Copied

Well, problem seemed to be solved, but now it's happening again and I'm not even with the Wacom connected to my computer.

When I run Validation, it doesn't show any error, but the number of the line shows up in red with the message "special characters must be escaped" [>]. I have no idea on how to escape a character. Did I push some wrong button or something?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Dec 05, 2023 Dec 05, 2023

Copy link to clipboard

Copied

There might be a problem with your keyboard if TAB key isn't working.

 

 

 

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Dec 05, 2023 Dec 05, 2023

Copy link to clipboard

Copied

You mean the tab is broken or it's not working properly? Because in every other program it works fine...

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Dec 05, 2023 Dec 05, 2023

Copy link to clipboard

Copied

Did you restart your computer?

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Dec 06, 2023 Dec 06, 2023

Copy link to clipboard

Copied

The error is "correct" in that you can't have several ">" characters floating around in your html text, which is what DW is seeing the line ".row>p>lorem" as right now in your image since Emmet didn't expand the short code.

But your image points to a potentially bigger issue, for some reason, DW isn't recognizing the file as a html document. You can see this because there is no code coloring. The Code View should look something similar to this, with different colors for tags, attributes, and content... 

JonFritz_0-1701869788801.png


It looks like the program is treating your new file as if it's a .txt file (Emmet doesn't run in .txt files at all).

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Dec 06, 2023 Dec 06, 2023

Copy link to clipboard

Copied

Well, I started a new file because I thought the problem could be the file.

But this one has more lines and I just edited a template from an Adobe Tutorial, I believe their file was correctly set as html (and even for the new one, I chose html5). I really don't know why the program is doing this. I have no idea of what did I do to temporarily correct it and now it doesn't work again...

I restarted my computer and even turned off and on my keyboard...

 

Are the lines on this one ok? Or you meant that this particular line is being recognized as a text? I tried another emmet code without the ">" and they don't work either... The code was from the Adobe tutorial and should be converted to <div class=info-box-tan></div>. This one isn't showed as an error on results, but nothing happens...

 

catinarezi_1-1701886328720.png

 

 

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Dec 06, 2023 Dec 06, 2023

Copy link to clipboard

Copied

Restore Preference.

https://helpx.adobe.com/dreamweaver/kb/restore-preferences-dreamweaver.html

And see my reply on Nov 19 above.  Make sure Emmet is enabled.

 

 

 

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Dec 06, 2023 Dec 06, 2023

Copy link to clipboard

Copied

This one didn't work, even with emmet enabled.

But I opened the "output" that Jon talked about and I changed from html to something else and then came back to html and emmet is working. I hope it's not just a coincidence. I tried that because he told me my file was not reading the code as html but as text...

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Dec 06, 2023 Dec 06, 2023

Copy link to clipboard

Copied

LATEST

Right.  Emmet is short code for HTML.  It doesn't work with .txt files.

Glad you finally got it sorted.

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Nov 21, 2023 Nov 21, 2023

Copy link to clipboard

Copied

If Emmet is enabled (verify that first using Nancy's instructions), it is possible a code error before your insertion point is causing Emmet to fail. Check your code for errors and repair anything found by the Validator.

To open the Validator, go to Window > Results > Validation then hit the "Play" button (arrow icon) in the panel that opens, then choose Current Document (W3C) to get a listing of potential issues.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines