In a Vue.js project I am using learning to use Modals from BootstrapVue. In my code I have a file Items.vue with something like this:
<div v-b-modal="'modal-' + query.id"> // this is line 15
...
</div>
<b-modal :id="'modal-' + query.id">
<p class="my-4">
hello
</p>
</b-modal>
It works well. However, Intellij IDEA with the Vue.js plugin keeps beeping with the Warning:
Warning:(15, 5) Attribute v-b-modal is not allowed here
The thread Vue Attribute is not allowed here suggests that this happens with non-.vue files, but it is not the case here.
Replacing v-b-modal="..." with :v-b-modal="..." (that is, with : before the attribute to make the binding more explicit) removes the warning, but then the code does not work.
I am working with Intellij IDEA 2018.1.8.
IDEA version you are using is very old, Vue.js support has been significantly improved since v. 2018.1. In particular, WEB-38028 was fixed in 2019.2. Please consider upgrading IDEA to the most recent version, BootstrapVue directives are correctly recognized there
I am starting to learn Vue, using Visual Studio Code. I downloaded an extension that adds Vue code snippets (Vue 2 Snippets by hallowtree).
When I start to type "v" in a Vue template, suggestions are shown (v-on, v-bind, etc.),
but afterward, no suggestions or autocompletions are shown.
In the following example template, v-on is suggested, but afterward, no suggestions for "click" or any other event. Also, nothing is suggested after "#":
<button v-on:click="changeLink">Click to change Link</button>
<button #click="changeLink">Click to change Link</button>
And in this example, v-bind is suggested, but afterward, no suggestions for "href" or any other HTML properties/attributes:
<a v-bind:href="link">Link</a>
<a :href="link">Link</a>
Although it's good for me for practicing, it will become a liability.
Are there any extensions, options, or commands I can set up to improve the developer experience?
Vetur has had experimental template interpolation for autocomplete and "diagnostics / hover / definition / references" within HTML templates since February 2019.
Enable the Vetur › Experimental: Template Interpolation Service option in your VS Code settings to turn on this feature.
add the Vetur extension on visual-studio-code it includes many other nice features besides auto completion vue code
How can I make it so my HTML in my JS file is not just yellow? How can I give it Syntax Highlighting in VSCode?
Install Vue Inline Template in vscode. here
If you separate your code into components and install the following plugin It will give you IntelliSense and syntax highlighting for Vue.
See an example here --> https://codesandbox.io/s/o29j95wx9
Good example of it here from the Vue docs --> https://v2.vuejs.org/v2/guide/single-file-components.html
I think VS code has to see it separated out into blocks below for it to properly do syntax highlighting otherwise it'll just detect what you have declared in the template as strings.
<template></template>
<script></script>
<style></style>
I'm using IntelliJ with the handlebars plugin. One of the nice things about this plugin is the code assist. However, the only way to get this functionality is by assigning html file type to handlebars, so I lose all the features of having .html files associated with HTML default for IJ. Is there any way to have html files associated to both the handlebars AND HTML?
Handlebars is a template language. Currently IntelliJ doesn't support injection of template languages. It should help you. Please vote for http://youtrack.jetbrains.com/issue/IDEA-106449
Closed. This question is off-topic. It is not currently accepting answers.
Want to improve this question? Update the question so it's on-topic for Stack Overflow.
Closed 9 years ago.
Improve this question
My blog is hosted on Blogger and I frequently post code snippets in C / C# / Java / XML etc. but I find the snippet gets "mangled".
Are there any web sites that I could use to parse the snippet beforehand and sort out the formatting, convert XML "<" to "<" etc.
There are a numbers of questions around this area on SO but I couldn't find any that address this question directly.
Edit: For #Rich answer, site states "To display the formatted code on your site, you need to get this CSS stylesheet, and add a reference to it in the <head> section of your page". That's the problem - you can't do this on Blogger AFAIK.
I've created a blog post entry which explains how to add code syntax highlighting to blogger using the syntaxhighlighter 2.0
Here's my blog post:
http://www.craftyfella.com/2010/01/syntax-highlighting-with-blogger-engine.html
I'm quite impressed with what it can do.
Above Links stopped working.
Try using http://hilite.me/
Easiest way to share code is with a public gist. Just write one up and paste in the embed code. Easy peasy.
http://gist.github.com
To address the search engine issue, one can use hidden div on the page as simple as:
<div style="display:none"> content </div>
For my blog I use http://hilite.me/ to format source code. It supports lots of formats and outputs rather clean html. But if you have lots of code snippets then you have to do a lot of copy paste. For formatting Python code I've also used Pygments (blog post).
This css script might be useful to all - It is not for syntax highlighting but works well for presenting the source code in original format :
<pre style="font-family: Andale Mono, Lucida Console, Monaco, fixed, monospace;
color: #000000; background-color: #eee;
font-size: 12px; border: 1px dashed #999999;
line-height: 14px; padding: 5px;
overflow: auto; width: 100%">
<code style="color:#000000;word-wrap:normal;">
<<<<<<<YOUR CODE HERE>>>>>>>
</code>
</pre>
How to use :
Paste this snippet in text editor,
paste your code in <<<<<<>>>>>> block.
Copy all and
paste to HTML view in blogger(or any other) post editor.
BENEFITS : Simple and easy to use, less configuration, easy to reconfigure, no extra software
1. First, take backup of your blogger template
2. After that open your blogger template (In Edit HTML mode) & copy the all css given in this link before </b:skin> tag
3. Paste the followig code before </head> tag
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCpp.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCSharp.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCss.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushDelphi.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJava.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJScript.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPhp.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPython.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushRuby.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushSql.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushVb.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushXml.js' type='text/javascript'></script>
4. Paste the following code before </body> tag.
<script language='javascript'>
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
</script>
5. Save Blogger Template.
6. Now syntax highlighting is ready to use you can use it with <pre></pre> tag.
<pre name="code">
...Your html-escaped code goes here...
</pre>
<pre name="code" class="php">
echo "I like PHP";
</pre>
7. You can Escape your code here.
8. Here is list of supported language for <class> attribute.
This can be done fairly easily with SyntaxHighlighter. I have step-by-step instructions for setting up SyntaxHighlighter in Blogger on my blog. SyntaxHighlighter is very easy to use. It lets you post snippets in raw form and then wrap them in pre blocks like:
<pre name="code" class="brush: erlang"><![CDATA[
-module(trim).
-export([string_strip_right/1, reverse_tl_reverse/1, bench/0]).
bench() -> [nbench(N) || N <- [1,1000,1000000]].
nbench(N) -> {N, bench(["a" || _ <- lists:seq(1,N)])}.
bench(String) ->
{{string_strip_right,
lists:sum([
element(1, timer:tc(trim, string_strip_right, [String]))
|| _ <- lists:seq(1,1000)])},
{reverse_tl_reverse,
lists:sum([
element(1, timer:tc(trim, reverse_tl_reverse, [String]))
|| _ <- lists:seq(1,1000)])}}.
string_strip_right(String) -> string:strip(String, right, $\n).
reverse_tl_reverse(String) ->
lists:reverse(tl(lists:reverse(String))).
]]></pre>
Just change the brush name to "python" or "java" or "javascript" and paste in the code of your choice. The CDATA tagging let's you put pretty much any code in there without worrying about entity escaping or other typical annoyances of code blogging.
http://formatmysourcecode.blogspot.co.uk/
works fine, you just copy , format, paste back.
I have created a tool that gets the job done. You can find it on my blog:
Free Online C# Syntax Highlighter
Besides colorizing your C# code, the tool also takes care of all the '<' and '>' symbols converting them to '<' and '>'. Tabs are converted to spaces in order to look the same in different browsers. You can even make the syntax highlighter inline the CSS styles, in case you cannot or you do not want to insert a CSS style sheet in you blog or website.
I use a fairly low tech solution. I format the code using this online syntax highlighting tool then just paste it into the blog
Here's one site that will format your code and spit out html, and it even includes inline styles for syntax coloring. Might not work for all of your needs, but is a good start. I believe he has made the source available if you want to extend it:
I use SyntaxHighlighter with my Blogger powered blog. The actual site is hosted on my own server rather than Blogger's though (Blogger has an option of ftping posts to your own site), but having your own domain and web hosting only costs a couple of dollars a month.
It looks like there have been some changes with SyntaxHighlighter 2.0 that make it easier to use with Blogger.
There are hosted versions of the styles and Javascripts at: http://alexgorbatchev.com/pub/sh/
Actually I had used (what else ;-) ) Vim for this: it has a 2html "plugin". See the docs here.
So as I edit my code, I just convert it to HTML and paste the results to Blogger's HTML editor.
Note: it's not so beautiful HTML (embeded css would be better), but it just works.
Oh: and it has syntax files for several languages which makes it pretty useful.
Emacs specific answer : As far as blogger is concerned, it allows inline css. The problem with javascript based highlighters is that you have to live with their color scheme or implement your own. But, like me, if you are a fan of your own emacs color scheme, you have a much better option available. I have hacked up the "htmlize.el" package for emacs to add the following four functions...
blog-htmlize-buffer
blog-htmlize-region
blog-htmlize-buffer-with-linum
blog-htmlize-region-with-linum
These functions will output copy-paste ready html (inline styled) in a new buffer in emacs, which you can directly use in your blog post. The output looks exactly same as you would see the code in emacs (including the color scheme).
Here is a link to my blog, where you can find detailed information of how to use the "blog-htmlize.el" with emacs. This does away with html-encoding the "less than" and "greater than" signs also. And as emacs is doing all the highlighting and styling, you do not have to worry about whether the js library supports the language of your snippets, nor do you have to meddle with your template code in blogger.
You can find the elisp file here (save the file as blog-htmlize.el)
I rolled my own in F# (see this question), but it still isn't perfect (I just do regexps, so I don't recognise classes or method names etc.).
Basically, from what I can tell, the blogger editor will sometimes eat your angle brackets if you switch between Compose and HTML mode. So you have to paste into HTML mode then save directly. (I may be wrong on this, just tried now and it seems to work - browser dependent?)
It's horrible when you have generics!
To post your html, javascript,c# and java you should convert special characters to HTML code. as '<' as < and '>' to > and e.t.c..
Add this link Code Converter to iGoogle. This will help you to convert the special characters.
Then add SyntaxHighlighter 3.0.83 new version to customize your code in blogger. But you should know How to configure the syntaxHighlighter in your blogger template.