Sublime Text syntax highlighting regex not working - html

I use angularJS, and have various directives that follow a naming convention like "app-data-grid", "app-slider", "app-carousel" or "app-compile-some-template", etc. Essentially, it is the normal angular directive naming convention of [app name]-[dash delimited words]. Sublime Text HTML language syntax highlighting doesn't properly match these with its regex. It will highlight "app" in "<app-carousel" or "<app-some-long-directive-name" but will not highlight the entire tag name.
Here is the predefined regex in the HTML.tmLanguage file:
(<)([a-zA-Z0-9:]++)(?=[^>]*></\2>)
I tried adding a dash after the colon of the second matching group:
(<)([a-zA-Z0-9:-]++)(?=[^>]*></\2>)
The second regex worked in a regex tester, but did not work in Sublime Text.
Also, I have downloaded an AngularJS plugin that gave me an AngularJS-HTML language definition... which also has the same problem.
How can I fix the regex so that it matches the full tag name for highlighting?

Go to Preferences >> Settings-User.
On this JSON add to ignored_packages array an iten named "HTML", like this:
"ignored_packages":
[
"Vintage",
"HTML"
]
Save the file.
Now go to Preferences >> Browse Packeges, make a copy of HTML directory and rename it as "HTMLAngularJS".
Enter in to HTMLAngularJS directory and rename the file "HTML.tmLanguage" to "HTMLAngularJS.tmLanguage".
Edit "HTMLAngularJS.tmLanguage" file, find this both Regex:
<string>(<)([a-zA-Z0-9:]++)(?=[^>]*></\2>)</string> Line 45
and
<string>(</?)([a-zA-Z0-9:]+)</string> Line 514
Just add the slash and - after double points, should be like this:
<string>(<)([a-zA-Z0-9:\-]++)(?=[^>]*></\2>)</string>
and
<string>(</?)([a-zA-Z0-9:\-]+)</string>
Save the file and be happy!
Regards!

Use the HTML Extended sublime plugin

Did you add HTML to your ignore_package array in your user settings?
With that entry, you are overriding the default HTML syntax package, therefore forcing sublime to user your HTML.tmLanguage.
I found this answer from BoundinCode where he explains it, and this actually did the trick for me.

Related

Formatting HTML with Nunjucks extension installed

I have some Angular component HTML some.component.html that I'm trying to format. When I hit ctrl-shiftp, and selectFormat Document` I get the message:
There is no document formatter for 'nunjucks'-files installed.
So it seems VSCode thinks that the .html file is a nunjucks file.
Is there a way to make it think that it's a html file?
You can switch back to HTML by clicking on the word "Nunjucks" in VS Code's status bar. This "Language Indicator" is near the bottom-right of VS Code's window. Clicking it will display a "Select Language Mode" drop-down-list where you can select "HTML".
After that, things that normally work for HTML files (like Format Document) will work again; however, things like the special syntax highlighting applied to Nunjuck files will not, but you can switch back and forth as needed.
Here's VS Code's documentation for Changing the language for the selected file.
Explicitly adding a "file.associations" in settings.json seems to solve the need to switch back-and-forth.
"files.associations": {
"*.html": "html",
}

Make Sublime Text treat <script type="text/html"> as HTML

I've been doing a lot of work with Knockout templates lately, and I've been using Sublime to do it. one thing that I've noticed though is that when using a template, which needs to be defined in a block like this:
<script type="text/html"></script>
it treats the contents as Javascript, which means I'm missing out on a lot of HTML tools which I have installed. I'd like to make it treat that content as HTML instead of Javascript; is there any setting which I could use to do this?
I managed to find the answer thanks to iamntz here; the trick is simple. For Sublime Text 3:
Open up Packages within your install directory, then find HTML.sublime-package and open it in 7zip (or your favorite archive tool)
Find HTML.tmLanguage and open it for editing
Find this line:
<string>(?:^\s+)?(<)((?i:script))\b(?![^>]*/>)</string>
and replace it with this one:
<string>(?:^\s+)?(<)((?i:script))\b(?!([^>]*text/html[^>]*|[^>]*/>))</string>
Nice and easy; the text/html in that second snippet can be replaced with any template type, and it will now be read as HTML by Sublime. This fix will also work with any HTML packages you have installed.
This doesn't appear to be necessary any longer for Sublime Text 3 build 3103. Just make sure your script tag's type attribute begins with "text/" and doesn't end in "javascript" and it should handle HTML correctly now.
EDIT:
This has become a problem again with Sublime Text 3 build 3176. The fix is to modify the HTML package again but with this change in HTML.sublime-syntax:
- script-javascript
- tag-generic-attribute-meta
- tag-generic-attribute-value
- - match: (?i)(?=text/html(?!{{unquoted_attribute_value}})|'text/html'|"text/html")
+ - match: (?i)(?=text/html(?!{{unquoted_attribute_value}})|'text/html'|"text/html"|"text/x-template")
set:
- script-html
- tag-generic-attribute-meta
Replace "x-template" with whatever type you are using for your script tag templates.

How do I make custom snippets for Sublime Text 2 that use the same indentation as the current file?

Different projects can use different indentation styles (2-4 spaces, tabs) and I want my custom snippets to follow the style of the current file. The built-in Ruby snippets does this but my custom snippets retain the indentation of the snippet. I checked the docs and found the predefined variables:
$TM_SOFT_TABS YES if translate_tabs_to_spaces is true, otherwise NO.
$TM_TAB_SIZE Spaces per-tab (controlled by the tab_size option).
But I can't really see how to make use of those to control which indents to use.
Just use the tab character for indents in snippet files. Sublime Text will automatically convert them to the correct indentation style for the current file.

Sublime Text set custom goto symbols

I am a big fan of ST2, and have been finding oodles of tricks to code/type faster.
One thing that I would like to know is if it is possible to create custom symbols for things like code blocks, include segments, and other bookmarks for goodies in your file.
For example:
I want to quickly include a standard C lib via (inc, tab). Is there a way for me to create a section where I keep all my standard lib includes (i.e: #CSTDLIB) and use the functionality of goto-> symbol (ctrl+r) to skip straight to this segment from anywhere in my file?
I tried looking to see if there was some sort of special handler to place in a comment that would recognise it as a "bookmark" but couldnt really find anything.
Cheers in advance.
This is an old question, so I'm answering for the latest ST3. Pretty sure this was possible with older versions as well.
The builtin C/C++ syntax definitions support a special formatting for comments in the following form:
// =jump target=
The string "jump target" will then be listed in the symbol list for ctrl+r. Unfortunately that only works if the // is at the beginning of the line. But we can fix that.
Install Package​Resource​Viewer, then from the command palette use PackageResourceViewer: Open Resource->C++->C.sublime-syntax.
In this file it says:
- match: ^// =(\s*.*?)\s*=\s*$\n?
scope: comment.line.banner.c
captures:
1: meta.toc-list.banner.line.c
Now remove the ^ in front of the regexp, save the file. Now you can enter comments // =jump target= anywhere, and jump there with ctrl+r.
If I have understood you correctly, you can use Ctrl + F2 shortcut for making bookmarks anywhere in your file, and walk through these bookmarks by F2 button. To remove bookmark, press Ctrl + F2 again in the line which you want to exclude from bookmarks.
If it isn't so, and this functionality doesn't cover your requirements, please specify more detailed use case.
Hope it will be useful to you

Custom HTML Module - does not support joomla 3.0

I am using advanced version of joomla, but facing problems when I am using custom html module or using HTML for articles too. The all attributes in HTML are replased by the / and "
Here's what is happening:
0. To start with, all the images were displaying as per the install just fine.
Copied the default module "Image Module", with a new name of "Image Module Me"
Set the menus so that the original module displays in the default menu, and the new one in my test menu
Somewhere along the line the images stoped displaying properly (showing a broken image link) for both the default Image Module and my copy.
When I look at the image module, I can see that the html has been changed.
Reset the html by reinserting the image, which generates the following html:
img src="images/headers/walden-pond.jpg"
note that the image appears just fine in the admin editor at this point
Save the module
Click on custom output - an lo and behold I've got a broken image link. When I check out the html I can see the following:
img src="\"images/headers/walden-pond.jpg\""
EDIT1 :
This is just because of Magic_quotes. How to disable magic quotes in joomla 3.0?
To disable magic quotes you have to edit the php.ini file in your server. In all honesty I'm surprised you could even install Joomla 3.0 as its a requirement for Joomla 3.0 that magic quotes is disabled. If you can edit the php.ini file you must add in:
; Magic quotes
;
; Magic quotes for incoming GET/POST/Cookie data.
magic_quotes_gpc = Off
; Magic quotes for runtime-generated data, e.g. data from SQL, from exec(), etc.
magic_quotes_runtime = Off
; Use Sybase-style magic quotes (escape ' with '' instead of \').
magic_quotes_sybase = Off
You may need to contact your host to do this. In a last resort (and only in a last resort) edit your .htaccess file something along the lines of:
php_flag magic_quotes_gpc Off
etc.