Vue.js is ideal library for my case, but I use it on non-SPA page.
Is there a way to bypass syntax v-bind:click? I would like the attributes starts from data-v-* and don't contains :.
My solution (based on accepted answer):
It looks like Vue.js will not pass the exam here.
Knockout proved to be the ideal library for friendly SEO html syntax without compilation templates.
You can use script templates to "hide" your Vue-HTML from the validator. The following validates as HTML5.
<!DOCTYPE html>
<html>
<head>
<title>Whatever</title>
</head>
<body>
<script id="some-template" type="text/template">
<div v-model="foo" v-bind:click="dontCare">Whatever</div>
</script>
<some-template id="app"></some-template>
</body>
</html>
This is not as much of a cheat as it might seem, since Vue-HTML is not HTML, but is in fact a template used for generating HTML (or, I think more accurately, for generating the DOM). But it is a complete cheat in the sense that the generated HTML is never subjected to the validator. :)
Alternatively, you could look at using Knockout, which uses pure HTML5 (what you write is what is delivered to the browser). It is not as performant as Vue, but it is an MVVM framework.
Short answer is: No.
I don't think there is a way to change the templating of Vue. The generated HTML shipped to user will be valid, because modifiers (v-for, v-bind, etc.) will be stripped of your HTML. Framework like Angular, for example, does not strip the multiple "ng-*" properties. For instance, you could write:
<div v-if="model.length" />
The resulting html will be:
<div />
Which is valid and compatible with any W3C validator.
I'm very new to Apache Velocity, and I'm having a little trouble figuring out the optimal way to structure my templates. In most of the guides I have seen the pages have been built like this:
#parse("header.vm")
<body>
...
</body>
#parse("footer.vm")
I have also seen someone come close to a "main" template with this approach:
<head>
...
</head>
<body>
#if($activeTab=="home")
#parse("home.vm")
#elseif($activeTab=="aboutus")
#parse("aboutus.vm")
...and so on.
</body>
Which seems a little silly, but I guess it works.
I've used Twirl a lot, so I might be spoiled, but I'd like to inject a template into another, essentially ending up with a main template like this:
<head>
...
</head>
<body>
$content
</body>
And then writing every other template as:
#parse(main){
TEMPLATE CONTENT
}
Is this possible in Velocity? If yes, is it bad practice, and if so why?
Thanks.
Velocity itself doesn't provide good support to layout template (the main template as you called). However they provide a tool called Velocity Layout Servlet (VLS).
To give you a heads up, some other templating solution like Rythm provides very nice template layout management via the template inheritance mechanism (demo). Disclaimer: I am the author of Rythm so I might have some bias here. However you can checkout this article created by a third party to understand the pros and cons of different template solutions.
You can use the $!bodyContent variable.
mainLayout.vm:
#macro(mainLayout)
<head>
...
</head>
<body>
$!bodyContent
</body>
#end
index.vm:
##mainLayout()
<h1>Index page</h1>
#end
I'm making a one-page website for a friend of mine. She's a fashion designer, and she would love to have a one-page website based on the "Stylish Portfolio" Bootstrap template --> http://startbootstrap.com/stylish-portfolio
However, I want to put in a lightbox gallery in the section below where it says "Some of our work".
I was thinking of getting the BlueImp Lightbox gallery or the Bootstrap Lightbox: http://www.jasonbutz.info/bootstrap-lightbox/#usage
Both match what I was looking for.
However, I have tried to insert it into the HTML-code, but without any luck!
Does anybody have any experience in inserting/adding lightbox galleries to a Bootstrap template? And if so, how should I approach this task?
Like the comments from your question, they wanted to see your code so they know where and how they can help you. It would also let us know how much code we would need to supply without actually spoon-feeding you the answers so that you can get your answers as well as still learn :)
With that, I'm gonna assume that you're a beginner and thus supply most of the codes that you need as well as explanations on what I'm doing. I'm gonna take bootstrap-lightbox as an example.
First off, you need to download the files from the site. After downloading the files, you would be able to see that this contains 4 files, namely bootstrap-lightbox.css, bootstrap-lightbox.js and their min files. (min files are just compressed versions of the files in order to lessen its size)
Now, it's basically just needing to plug-in those files into your project.
Assuming that you put the files into their respective js and css folders in your project, this is how they would look like:
<link href="css/bootstrap-lightbox.css" rel="stylesheet"> //plug this inside your <head> tags
<script src="js/bootstrap-lightbox.js"></script>
After plugging those in your files, then its a matter of just using the html code that you found in the site :)
<div id="demoLightbox" class="lightbox hide fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class='lightbox-content'>
<img src="image.png">
<div class="lightbox-caption"><p>Your caption here</p></div>
</div>
</div>
Solved.
I used BlueImp instead to insert a lightbox gallery :-)
I want to know if it is possible to let apache substitue a link in the html I return to the client with the html of the site behind the link.
So instead of
<html>
<head>
</head>
<body>
Link
</body>
</html>
I want something like this:
<html>
<head>
</head>
<body>
// the html of the page behind the link
</body>
</html>
I can´t use javascript or php or anything, let´s assume I only have html.IFrames are as well no solution for my problem.
Just for everyone that comes to a similar situation, Ulrich Schwarz gave a good hint with SSIs, which is in this scenario the only way that could work. However, due to cancelling the project, I was not able to validate the usage of SSI for this scenario.
This can be little painful to do and might not be suitable for all cases but you can maintain a plaintext file for every html page you want to show source of and add a link to that file instead.
For eg: Instead of <a href='somefile.html'>Click</> do <a href='somefile.source'>Click</>
where somefile.source is the copy of the somefile.html. Add triple qoutes """ in the first and the last line of the file. I didn't try a lot of combinations but this works for fairly decent html codes.
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.