This is my problem - its unreadable
In order to get .ejs working in general, I've so far added the following. I also have format on save and prettier. I'm looking for proposals to get better formatting of this so that I can read it.
"files.associations": {
"*.ejs": "html",
"*.css": "postcss"
},
"emmet.includeLanguages": {
"postcss": "css",
"ejs": "html"
},
"emmet.syntaxProfiles": {
"postcss": "css",
"ejs": "html"
}
I know that's an old question, but working with .ejs in VSCode is still a problem. But I found the solution (for ? delimeter)
Install EJS language support plugin
Now you have ejs support, highlighting, and snippets, but some tags like
<? for( let item of array ) { ?>
(some data)
<? } ?>
are formatted incorrectly (at least with default html formatter).
To fix this, you can try set custom delimeter to '?' ejs.delimeter = '?'. Now you have correct indentation with <? ... ?> tags.
To use the snippets with our custom delimeter, you need to edit extension snippets (or add your own): install Snippets Ranger plugin, then find needed extension and edit its file. The Snippets Ranger is very handy tool.
I hope I helped somebody to setup VSCode for .ejs files
I would suggest using
EJS language support
which is according to them
Syntax highlighting for EJS, Javascript, and HTML tags. Includes
javascript autocompletion.
and if you are interested in a Linter you should check out
EJS-Lint
which according to them
EJS-Lint parses scriptlet tags (<%, %>, <%_, _%>, and -%>). It ignores
all other tags (i.e. <%=).
Note: This linter does not attempt to check for unclosed EJS tags, so
if you get an error Unexpected token with a line number that doesn't
contain any scriptlets, you most likely forgot to close a tag earlier.
It also is set up to handle old-style includes (<% include filename
%>) by ignoring them. It does not lint included files regardless of
the method of inclusion.
It can work with custom delimiters, just pass it in the options (if
using the API) or pass the --delimiter (-d) flag on the CLI.
Related
I guess there's some built in snippets because I used to be able to do stuff like type: h2 + tab and get <h2>|</h2>. However my language snippets weren't working, so I switched the file language type to HTML (EEx), for .html.eex files. Now my language snippets work (from a package), but now I don't get any HTML snippets. Is there a way to tell VSCode to treat .html.eex files as if they were HTML files? I sort of want to merge the HTML and HTML (EEx) language file types into one. What's the best way to fix this?
Add this to your settings.json
"files.associations": {
"*.html": "html",
"*.html.eex": "html"
}
I got it working with:
"emmet.includeLanguages": {
"HTML (EEx)": "html"
},
I'm creating a markdown document with some CSharp code blocks. Here's a sample:
Next, it feeds the strings to the regular expression matcher to produce a sequence of matches.
```csharp
let patternMatch = azimuthEncoderRegex.Match(message)
```
In the editor, this seems to be working nicely, like so:
As you can see, the code is formatted as expected and shows up correctly formatted in the preview window (not shown).
Now, when I save my file, the above text instantly changes to this:
If I use search-and-replace to change all the code specifiers back, the same thing happens. This breaks the code formatting!! The entire file is also re-flowed to remove all the line breaks I put in (that may be a clue).
UPDATE: I noticed that all of the reference-style hyperlinks were also removed from the end of the document, causing data loss.
WTF? Why is VS-Code doing this? I've tried disabling the Markdown extensions and the same thing happens. Any ideas, please?
Resolved by a change in settings.json for VS Code:
{
"pandocFormat.command": "pandoc --standalone --atx-headers --wrap=auto --columns=80 -f markdown-auto_identifiers -t markdown-simple_tables-multiline_tables-grid_tables-auto_identifiers-fenced_code_attributes --reference-links"
}
Thanks and credit to monofon (the author of the VS Code extension, based on Pandoc) for steering me to this solution.
my question might be very simple, but I did'nt find any answer available on the web.
How to pygmentize code blocks in org-mode HTML export ? I have some code blocks like this :
#+BEGIN_SRC puppet
file{'/etc/motd':
ensure => present,
content => 'Bienvenue !',
}
#+END_SRC
The exported html is not highlighted, however pygments is able to colorize puppet code.
I found out that you need the htmlize.el package installed. Then, it works out of the box.
htmlize.el is available in MELPA for instance.
Code formatting doesn't seem work in Visual Studio Code. I have tried with shift+alt+f, but it wouldn't format html code. I run ctrl+shift+p and type Format and only option I have is Format Document(shift+alt+f) and Format Selection (don't have Format code). I don't understand what I' doing wrong? Do I need to install some kind of extension in order for this formatting to work on html files?
This worked for me:
Right click inside html file that is being edited.
Select "Format Document With...".
Selected "Configure Default Formatter ...".
Changed from "Prettier - Code formatter" to "HTML Language Features".
This worked for me in Visual Studio 2015 (VS2015):
Right-click on the code window with the HTML you want to format
Click 'Un-minify" in the popup menu.
That worked for me when Format Document (Ctrl-K, Ctrl-D) and Format Selection (Ctrk-K, Ctrl-F) failed to format HTML that I pasted into a Visual Studio HTML document.
There are two scenarios here
You are editing an html file with a non-standard html extension. Find fix #1 below.
You are editing a non-html file with html embedded. For this scenario find fix #2.
Both fixes involve installing the Beautify extension so do that first.
Fix 1
To fix this issue, you will need to update your js-beautify extension properties to include those types. From the Beautify documentation:
You can contol which file types, extensions, or specific file names should
be beautified with the beautify.language setting.
{
"beautify.language": {
"js": {
"type": ["javascript", "json"],
"filename": [".jshintrc", ".jsbeautifyrc"]
// "ext": ["js", "json"]
// ^^ to set extensions to be beautified using the javascript beautifier
},
"css": ["css", "scss"],
"html": ["htm", "html"]
// ^^ providing just an array sets the VS Code file type
}
}
Fix 2
In this case when you run the beautify command (after installing the extension) it will prompt you for the language type. Select html and voila.
You might have some error in your html document like maybe you forgot to close a tag. I had the same problem but after fixing that error code formatting works well. If you have a large file then try pasting your code here and validating it here
Is there an easy way to add syntax highlighting to my various plugin's gh-pages using github's Pygments?
I know that every page runs through the Jekyll engine and provides syntax highlighting (ref). But I don't want to install a blog. I just want syntax highlighting applied to the code blocks in my gh-pages.
I guess I could always just include a different plugin with my gh-pages...
Pages already does pygments, there's nothing to install. Just use it!
---
layout: default
title: Something with codes
---
Happy fun highlighting.
[More details](https://github.com/mojombo/jekyll/wiki/liquid-extensions)
{% highlight ruby %}
def foo
puts 'foo'
end
{% endhighlight %}
"GitHub Pages now only supports Rouge, a pure-Ruby syntax highlighter" so you only need to change 'kramdown' syntax highligher to use 'rouge' in your _config.yml file.
markdown: kramdown
kramdown:
input: GFM
syntax_highlighter: rouge
Found this thread as the first hit while trying to figure out syntax highlighting, and I found an even easier way to do it that I thought I'd share. Just put the name of the language you want highlighted after the fenced code blocks (reference). No need to generate any css or use yaml.
This is regular text
```ruby
# This is highlighted code
def foo
puts 'foo'
end
```
```python
# Here is some in python
def foo():
print 'foo'
```
As pointed out by #David Douglas, "GitHub Pages now only supports Rouge, a pure-Ruby syntax highlighter"
You have to put this in you _config.yml. This is from the _config.yml of Barry Clark's Jekyll Now
# Jekyll 3 now only supports Kramdown for Markdown
kramdown:
# Use GitHub flavored markdown, including triple backtick fenced code blocks
input: GFM
# Jekyll 3 and GitHub Pages now only support rouge for syntax highlighting
syntax_highlighter: rouge
syntax_highlighter_opts:
# Use existing pygments syntax highlighting css
css_class: 'highlight'
Then for the code highlighting part...
The list of langauge aliases for Rouge are listed here: https://github.com/jneen/rouge/wiki/List-of-supported-languages-and-lexers
It uses all-lowercase latters.
For example, for JavaScript:
``` javascript
function test() {
console.log("test");
}
```
The default syntax highlighter is rouge (equivalent to highlighter: rouge in your _config.yml file). With rouge, if you write a code block like this in markdown:
~~~js
let z = 26;
~~~
You can expect to get an HTML block like this:
<div class="language-js highlighter-rouge">
<div class="highlight">
<pre class="highlight"><code>
<span class="kd">let</span> <span class="nx">z</span> <span class="o">=</span> <span class="mi">26</span><span class="p">;</span>
</code></pre>
</div>
</div>
Then all you need is a CSS file (if you're using a GitHub Pages Theme, you will get the CSS automatically). I'm not sure where the CSS is officially supposed to come from, but
here is a CSS file for a light background
here is a CSS file for code in a dark rounded rect (the rest of the site may use a light or dark background).
Feel free to customize the css to your liking.