I'm facing a problem with EJS files on VSCode, each time I save the file, the formatter applies a wrong indentation.
Below each EJS identifier the next line is shifted to the right missing the correct vertical alignment.
I'm using HTML format for *.ejs and installed the EJS extension from DigitalBrainstem
<% if(locals.metadata && locals.metadata.length>0) { %>
<% var supplier=metadata[0] %>
<% } %>
<main class="site-content">
Another example in the picture below
You can see in the both examples, it looks like a ladder, each line is automatically indented to the right and cannot keep opening/closure code blocks aligned.
Just was looking for the solution to this myself. If installing the ESJ language support plugin didn't work on its own. Go to the settings and search for Format: templating you'll see the option to honor some templating language tags. Activate it. This worked for me at least.
I found the solution:
Install EJS language support plugin
Now you have ejs support 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.
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
Related
Even after checking a lot of EJS + VSCode related SO posts, I am unable to solve this problem. VSCode works fine with some EJS code but it shows problems with some others, I don't understand the reason behind this weird behavior.
In the image below VSCode seems to recognize the line const mbxToken = "<%= process.env.MAPBOX_TOKEN %>" but VSCode doesn't recognize the line below it i.e. const campground = <%- JSON.stringify(campground) %>.
How can I fix this problem OR stop VSCode from checking this particular file / line.
You will solve the problem in the following ways.
In the Visual Studio Code Menu, select 'File > Preferences > Settings'.
Enter 'validate' in Search settings.
Disables the following settings: 'HTML › Validate: Scripts'
This would have solved the problem.
source link: https://github.com/microsoft/vscode/issues/51118
as you see, the HTML content is not colorful, and it cannot autocomplete HTML tag
There are 2 ways to do that.
1) You could manually set the syntax to "Javascript React".
For that click on "Javascript" on the bottom right of your screen:
Then simply enter "react" and select it. After that you should have autocomplete for the html parts inside your render functions.
2) You can instruct VSCode to always open .js files as "javascriptreact". For that go to your settings and copy files.associations over to your local settings. Make sure it looks something like this and save:
"files.associations": {
"*.js": "javascriptreact"
}
Note on that one: This will always set the syntax to "javascriptreact" when you open .js files and might not always be what you want. A better solution would be to generally name react files as myfile.jsx. This way vscode will automatically set the syntax to "javascriptreact".
Hope this helps.
Save the file as .jsx ie (App.jsx) instead of .js
This is because you are saving the file as .js ie App.js.JavaScript files cannot understand HTML tags.
Another alternative is you can save in (.js) but your web pack should be configured in such a way that it should transpile it into .jsx.
For doing refer this - https://github.com/facebook/create-react-app
React understand javascript xml only.
I'm trying to use FSharp.Literate to produce html pages. I'm working in Xamarin using Mono 4.5. I want to turn basic *.fsx scripts into html. I am using the simple script example from the documentation for tests. The script I wish to turn into html looks like this.
(**
# First-level heading
Some more documentation using `Markdown`.
*)
(*** include: final-sample ***)
(**
## Second-level heading
With some more documentation
*)
(*** define: final-sample ***)
let helloWorld() = printfn "Hello world!"
I used the built in NuGet manager to download FSharp.Formatting. It also installed Microsoft.AspNet.Razor 2 and RazorEngine
Based on the example in the documentation, I wrote the following script to turn the above example into html. I'm using the html template from the original FSharp.Formatting on github.
#I "bin/Debug/"
#r "FSharp.Literate.dll"
#r "FSharp.Markdown.dll"
#r "FSharp.CodeFormat.dll"
open System.IO
open FSharp.Literate
let source = __SOURCE_DIRECTORY__
let baseDir = Path.Combine(source, "html/")
let file = Path.Combine(baseDir, "demo.fsx")
let output = Path.Combine(baseDir, "demo-script.html")
let template = Path.Combine(baseDir, "template.html")
Literate.ProcessScriptFile(file, template, output)
The process runs and it does produce an html file. However, the F# code does not tokenize. Instead of nicely formatted code, I get the example below. Am I missing something obvious?
Edit:
Based on Tomas' comment below, I found the problem with the .css and .js files.
The template I used had href="{root}/content/style.css" /> <script src="{root}/content/tips.js"
The {root} tag was the reason it could not find the css and js files.
Changing that to href="content/style.css" /> <script src="content/tips.js" solved the problem
I think the library actually produced the correct HTML. As you can see at the end of the file, the content that should appear in the tool tips (information about the type of helloWorld and printfn) is there.
The problem is likely that the generated HTML file does not correctly reference tips.js and style.css that defines the formatting for the HTML and script to pop-up the tool tips.
These two files should be included in the NuGet package (together with the default templates), or you can find them on the project GitHub.
It is possible to mix HTML with node.js commands?
I want to make my site like in PHP so:
<html>
<!-- Some HTML -->
<?php
echo "example";
?>
</html>
So, server makes all commands, which are included in HTML file and than returns pure HTML to show it in users browser. I need this, because I want to get data from MySQL database and then show it on my site.
In all tutorials I found only:
res.write("<Some html>");
And there is nothing about keeping html in separate files and add to them some server-side js.
Find a templating engine and build your application around that, because what you want is not possible.
For a list of compatible template engines, take a look here:
https://github.com/joyent/node/wiki/modules#wiki-templating
Your example using Express and EJS (which I use). Jade seems like overkill to me, but that's just my opinion.
// index.ejs (the html template)
<html>
<head></head>
<body>
<div><%= example %></div>
</body>
</html>
And in your node app:
app.get('/', function (req, res, next) {
res.render('index.ejs', {
layout: false,
locals: {
example: "Hello world!"
}
});
});
That's pretty much the basics of using EJS. I personally like it over Jade because the people I use to do up the html don't hand it to me in Jade format, and it's very similar to how I used to do php templating.
There is more you can do with the templates of course, you can put javascript in them to say, loop through an array returned by a database, include other .ejs files. You just need to dig into the docs and examples on the web.
Use the function res.write is enough.
You can generate some string with html syntax, like "<html>..</html>", then you put it into the res.write and you get response with a html file.
The point is how to generate the string with html syntax.
If we have a template file like this:
<html>
<body>
<h1>{{ "Hello" + " world!" }}</h1>
</body>
</html>
We want to get the "Hello world!" between <h1> and </h1>. So we can have the work done by:
read the template file with fs.readFile
use regular expression to get the content between {{ and }}
use eval to evaluate the content, and replace them.
After doing this, you can get the string with html syntax. and that is what most template engines(like ejs, jade) do, of course they have more complex works to do.
I hope that this can help you know more about template engine with node.js, and please forgive my poor English...
Have you tried a web application framework like express?
Check it out here!
I'm trying to render a .html webpage using #Renderpage() method in Webmatrix but the .html extension is not supported by the method. I guess the method only supports cshtml extensions. Is there a way I can render html pages dynamically on my site (Webmatrix). I dont want to use an iframe because I'll definitely have issues with my jquery files.
I attempted something i feel is safe yet feels unsafe. I resolved to read the html file and inject it to the DOM manually using:
Array html = null;
var mypage = Server.MapPath(page);
if(File.Exists(mypage)){
html = File.ReadAllLines(mypage);
}
After reading the file.....i injected it to the DOM
<div class="s_content s fontfix left s_content2 downdown">
#foreach (var data in html) {
<text>#Html.Raw(data)</text>
}
</div>
All this runs on compilation time before the page is created for rendering.....I attempted some security measures by attempting to inject server-side C# code in the HTML file but was useless. Makes me feel safe atleast. Is this risky? What is the possible threat to this alternative. i wish i can still have an alternative proper solution from the house. Thanks though.
Assuming #Renderpage() doesn't support HTML files, why don't you try Jquery.load or Ajax. There are lots of tutorials based on dynamic loading of html content.
I do something similar but I don't use #Renderpage or an html file. Instead I am using the "onclick" event and a javascript function which opens a cshtml file. You just put this and the java script function in your main cshtml file in the hmtl section. It will open a file in the current directory called my_window.cshtml when clicked
<a onclick=openWin("my_window",700,850);>Open when clicked</a>
<script type="text/javascript">
function openWin(url, width, height)
{
myWindow=window.open(url,'_blank','width='+width+',height='+height);
myWindow.focus();
}
Hope this helps!