Sublime Forum

Angular Material - Issues Indenting and Attribute Display

#1

I recently started working with Angular Material and I’m having some issues with syntax highlighting and attribute presentation. I installed the AngularJS package and set the syntax for my view to HTML (Angular.js).

I’m finding that indenting does not work after any md-x attribute and the attribute itself is 2 different colors:

Pasted image957×710 19.8 KB

Is this a known bug or am I missing something? I’ve spent a lot of time scouring the web for answers. I found 2 similar questions on stack exchange but 1 did not have an answer and the other did not have an answer that solved the problem.

Any assistance is greatly appreciated. It is becoming very difficult to code while having to manually indent.

Thanks,
-Chris

0 Likes
#2
0 Likes
#3

Thanks for the quick response. I made the changes you suggested as well as the changes Eric suggested. The coloring change worked but the indentation still isn’t working. Are there any other files I need to update?

Pasted image1053×777 37.9 KB

0 Likes
#4

hmm, it seems like there are two [A-Za-z0-9]+ patterns, one in parenthesis as mentioned in my post on the other topic, and one without. Can you also change the [A-Za-z0-9]+ to [A-Za-z0-9-]+ under the batchDecreaseIndentPattern and see if that helps? :slight_smile:

0 Likes
#5

That initially did not work. I double checked my build and it looks like I recently updated and lost by dev build. I updated to 3111 and made the changes you requested (both regex) and all is working as expected now, thank you.

One last question, is there any way to format PHP code embedded in the HTML? When I reindent the PHP code goes flat:

Pasted image1350×584 18.4 KB

Thanks again,
Chris

0 Likes
#6

Hi Chris,

I notice the same behavior when I try to reindent using the HTML syntax, but it works if I indent using PHP syntax.

Therefore, the solution is to copy the indentation rules from the PHP package to the HTML one.

You can do this by:

  1. install PackageResourceViewer from Package Control if it isn’t already installed
  2. From the Command Palette, select PackageResourceViewer: Open Resource
  3. Select PHP
  4. Select Indentation Rules.tmPreferences
  5. Copy the indentNextLinePattern - both <key> and <string> tags including contents - to the clipboard
  6. From the Command Palette, select PackageResourceViewer: Open Resource
  7. Select HTML
  8. Select Miscellaneous.tmPreferences
  9. Paste it in before </dict><key>uuid</key>
  10. Switch back to the PHP Indentation Rules.tmPreferences file
  11. Find bracketIndentNextLinePattern
  12. Copy only the content inside the <string> tag to the clipboard
  13. Switch to the HTML Miscellaneous.tmPreferences file
  14. Find bracketIndentNextLinePattern
  15. Place the cursor before the </string>
  16. Type |
  17. Paste it in
  18. Save it
  19. Reindent your HTML (Angular.js) file
  20. Smile when it works :slight_smile:
0 Likes
#7

Ha! You are the man! Thank you for the quick and very accurate responses. Absolutely amazing product and customer service. :grinning:

0 Likes
#8

I’m not affiliated with Sublime HQ in any way, I’m just a humble member of the community :wink:

0 Likes
#9

Even better! Thank you, I really do appreciate your time.

0 Likes
#10

I’m having similar problem, can you please post the final Miscellaneous.tmPreferences file?
Currently I’m using the latest HTML package from the official github repo (which fixed the coloring), I’ve followed the mentioned steps, but the indentation still incorrect.

Thanks,
Daniel

0 Likes
#11

without including anything from the PHP indentation rules, this is the final HTML/Miscellaneous.tmPreferences with changes to support indentation of elements containing dash characters:

<?xml version="1.0" encoding="UTF-8"?>
<plist version="1.0">
<dict>
    <key>name</key>
    <string>Miscellaneous</string>
    <key>scope</key>
    <string>text.html</string>
    <key>settings</key>
    <dict>
        <key>decreaseIndentPattern</key>
        <string>(?x)
        ^\s*
        &lt;\?(php)?\s+(else(if)?|end(if|for(each)?|while))
        </string>
        <key>batchDecreaseIndentPattern</key>
        <string>(?x)
        ^\s*
        (&lt;/(?!html)
          [A-Za-z0-9-]+\b[^&gt;]*&gt;
        |--&gt;
        |&lt;\?(php)?\s+(else(if)?|end(if|for(each)?|while))
        |\}
        )</string>
        <key>increaseIndentPattern</key>
        <string>^\s*&lt;\?php\s*\b(if|else|elseif|for|foreach|while)\b.*:(?!.*end\1)</string>
        <key>batchIncreaseIndentPattern</key>
        <string>(?x)
        ^\s*
        &lt;(?!\?|area|base|br|col|frame|hr|html|img|input|link|meta|param|[^&gt;]*/&gt;)
          ([A-Za-z0-9-]+)(?=\s|&gt;)\b[^&gt;]*&gt;(?!.*&lt;/\1&gt;)
        |&lt;!--(?!.*--&gt;)
        |&lt;\?php.+?\b(if|else(?:if)?|for(?:each)?|while)\b.*:(?!.*end\1)
        |\{[^}"']*$
        </string>
        <key>bracketIndentNextLinePattern</key>
        <string>&lt;!DOCTYPE(?!.*&gt;)</string>
    </dict>
</dict>
</plist>
0 Likes
#12

Thanks for the fast reply!
But still no luck, I think I might installed a conflicting plugin. I’ll check my settings and report back if I can get it work.

0 Likes
#13

I remember someone else reporting that they had to uninstall the HTML5 plugin.

0 Likes
#14

I’ve made a clean install, and now it’s working fine! I don’t know what packages did I have, but definitely not HTML5. Anyway, thanks for the help! This was the only bug that bothered me in sublime.

0 Likes
#15

This has now been fixed for everyone (as of the next build) - https://github.com/sublimehq/Packages/commit/f422bc2a8cb353910e038b70a8dd3da1d0bb649c

0 Likes