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
We need to export our Apiary Blueprint for task assignment purposes as a self containing "deliverable" like PDF or ZIP or similar. I'm aware of the feature request and the discussion below. Is it possible to "hack" something better than the poor html exporter? Maybe by injecting some css style into the page with chrome? Has somebody found a "good-enough" solution?
Ján Sáreník mentioned aglio, you can make it work locally by the following steps.
Save your API definition markdown (e.g. myfile.md)
Install aglio npm install aglio -g
Start aglio server aglio -i myfile.md -s
Open localhost:3000 and download the HTML file
Hack the HTML by commenting out the <div id="localFile" ...>...</div> warning
Hack the HTML by replacing http://localhost:3000/ with empty string everywhere
Aaand it's done.
You can use https://github.com/danielgtaylor/aglio to render API Blueprint into static HTML files which can be zipped (or maybe also PDF-exported, but I haven't tried).
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.
Can I use JSRender and JSViews libraries(http://www.jsviews.com/) in building Chrome Packaged App? Does it violate the CSP policy?
This library syntax uses "script" tag to identify template definition in the HTML file...following is an example of it
<script id="theTmpl" type="text/x-jsrender"> <div> <em>Name:</em>
{{:name}} {{if showNickname && nickname}}
(Goes by <em>{{:nickname}}</em>) {{/if}} </div> </script>
I don't believe JsRender and JsViews are currently CSP compliant, because template compilation uses new Function(). However pre-compilation should be very easy. See jsrender/issues/30 and jsrender/issues/164 . A precompile tool is planned for V1 or V1.1.
In fact you can already do your own precompiling simply by writing:
var myTemplate = $.templates("myTemplateMarkupString");
As to the script tag, no, you don't have to use that approach to declaring templates. As shown above, you can compile from strings or precompile. See http://www.jsviews.com/#compiletmpl for more details and examples.
When I view files on GitHub, tabs appear as 8 spaces.
Example:
Is that possible to change this configuration to 2 or 4 spaces?
You can append ?ts=2 or ?ts=4 to the URL to change the tab-size.
Example: https://github.com/jquery/jquery/blob/main/src/core.js?ts=2
It seems that the value can be anything from 1 to 12. It does not work on Gists or raw file views though.
Source: GitHub Cheat Sheet
Set default displayed tab size for your repository
When you have a .editorconfig in your repository it will respect it
when viewing code on GitHub.
indent_style = tab and indent_size = 4 shows tabs with 4 columns
instead of 8
https://github.com/isaacs/github/issues/170#issuecomment-150489692
Example .editorconfig for multiple extensions which works in JetBrains' products:
root = true
[*]
end_of_line = lf
insert_final_newline = true
# Matches multiple files with brace expansion notation
[*.{js,jsx,html,sass}]
charset = utf-8
indent_style = tab
indent_size = 4
trim_trailing_whitespace = true
[*.md]
trim_trailing_whitespace = false
Change how you see tabs on other repositories
Install Stylus in your browser, than install GitHub: better-sized tabs in code.
There are also Google Chrome extensions:
https://chrome.google.com/webstore/detail/github-tab-sizer/djpnapkcpjomnkfekaedkigfomiedpjf
https://chrome.google.com/webstore/detail/github-tab-size/ofjbgncegkdemndciafljngjbdpfmbkn/related
Since Sept. 2021, you can set the tab size directly in your GitHub settings: github.com/settings/appearance.
Announced in Changelog "Tab size rendering preference".
No more .editorconfig
No more ?ts=2 added to the URL
Just:
Note: you cannot enter "3" for instance. You would get:
Tab size rendering preference could not be saved:
Validation failed:
Tab size is not included in the list
It actually is possible to do it, with a browser extension. Install Stylish (in Firefox or Chrome), then install this user style: “GitHub: better-sized tabs in code”.
It might not work for some languages. For example, I was viewing a JavaScript file and I did not notice any changes. So I deleted the style the author had and put the following lines into it:
.tab-size {
-webkit-tab-size: 4 !important;
-moz-tab-size: 4 !important;
-o-tab-size: 4 !important;
tab-size: 4 !important;
}
And it worked on Chrome (screenshot).
As you can see from the screenshot, I also enabled widescreen mode and changed the color scheme to Solarized. So I have three user styles running on GitHub pages via the Stylish extension for Chrome. I hope this helps someone.
Update
Yes. As stated by mortenpi, this can be done by through an additional query parameter. See his answer for more details.
Original answer
Is that possible to change this configuration to 2 or 4 spaces?
No. It's only available as part of the editing feature through the Ace editor and the change is not persisted.
This blog post gives some more information about the embedded IDE.
However, provided you know the url of the blob (file) you're willing to review, you can switch to the edit mode easily by changing the blob segment with an edit segment and use the dropdown to select your prefered tab size.
Standard view: https://github.com/moroshko/mmSelect/blob/master/mm_select.js
Ace view: https://github.com/moroshko/mmSelect/edit/master/mm_select.js
If the project is yours, create a file in the project root named “.editorconfig” and give it the following contents.
[*]
indent_style = tab
indent_size = 4
This will cause GitHub to render tabs 4-wide within the project.
This is an EditorConfig file, which is formally specified, supported by many editors, and also supports more extensive editor configuration, like specifying that all .html files are UTF-8 encoded.
If the project isn’t yours, consider opening an issue requesting the author specify the indent style they intended.
If you're into UserScripts, this did it for me:
// ==UserScript==
// #name GitHub Tabs
// #namespace http://foldoc.org/
// #version 1
// #description Set sensible tabs on GitHub
// #author Denis Howe
// #match https://github.com/*
// ==/UserScript==
document.querySelectorAll('table').forEach(t => { t.dataset.tabSize = 2 });
I did that for fixing them http://valjok.blogspot.com/2014/07/indentation-correction-for-exposing.html.
Another option is when embedding your gist, replace all tabs with required number of spaces
<div id="willReplaceTabs">
<script src="https://gist.github.com/valtih1978/99d8b320e59fcde634ad/cf1b512b79ca4182f619ed939755826c7f403c6f.js"></script>
<script language="javascript">
var spaces = " "
willReplaceTabs.innerHTML = willReplaceTabs.innerHTML.replace(/\t/g, spaces)
</script>
</div>
If it's an option for the project you're working on, changing your editor to treat tabs as spaces will fix the problem.
So, for example, in Visual Studio Code, the config looks like this:
{
"editor.tabSize": 2,
"editor.insertSpaces": true
}
In Sublime it's:
{
"tab_size": 2,
"translate_tabs_to_spaces": true
}
Until recently I insisted on non-spaced tabs. After switching, it fixed the Github rendering weirdness, and I haven't noticed any significant downsides in my workflow.
The best solution is, if possible, to convince maintainers of the source code you're looking at to replace all the tabs by the correct number of spaces.
Using tabs is problematic in code today given that you're often seeing it on the web, where the decision of "how many spaces per tab" depends on where it's being displayed.