For example, usually WebStorm will not add extra whitespace to the element, if I want to make it look nice, I have to add extra whitespace for every element I created.
I tried to google it but all I find is "deleting extra whitespace" kind of question and answers. Maybe it is because I don't know how to describe the question. And Google won't accept the image which can let me explain the question more clearly. I can't do anything. Need help with this.
Screenshot 1:
Screenshot 2:
You can go to Settings > Code Style > HTML (ctrl + alt + S) and check Wrap text and After tag name. However this wil add a space to all HTML, not just the self closing ones. <head> will become <head >. In empty tag will do that for you.
I have came to know we can use the alt tag for better seo but iam confusing about the using of alt tag to my images.
I mean can we use - symbol between the keywords like facebook-tips-tricks or should i only use facebook tips tricks.
I have came to know google will also crawl images but how can we effectively implement in images in blogger posts.
There's no reason to use the - symbol. You need to simply put the alternate. Google will do it's work.
Example:
<html>
<body>
<img src="http://theartmad.com/wp-content/uploads/2015/04/Smiley-Face-7.jpg" alt="Smiley face" height="42" width="42"><!-- Will normally show the image, since path is valid -->
<img src="invalid path" alt="X" height="42" width="42"> <!-- Will show the alt, since there's no valid path. Will work without -'s. -->
</body>
</html>
As mentioned in the comments, you might want to read more about the purpouse of the alt attribute. You can do so here.
I am playing around with x-editable and I am wondering how they do the last example in their demo page.
http://vitalets.github.io/x-editable/demo-bs3.html?c=inline (Custom input, several fields)
I can't find any thing that actually shows you the code for each part. I only can dig through it with firebug but that is more time consuming and I rather just see the parts I need.
Any have the pieces of code that does it?
Yes, #marcb is right!
So here: https://github.com/vitalets/x-editable
Or to be exact: https://github.com/vitalets/x-editable/blob/master/src/inputs-ext/address/address.js
The code for this can be found in the X-editable Bootstrap 3 download, under "inputs-ext", and then the "address" folder.
I need to have some hidden text in HTML to parse as text when i read an actual HTML file
I used to include my text in hidden div using style but i knew that may record us as spammers in SEO
.hideme {
position : absolute;
left : -1000px;
}
Can i have this content as commented text in the HTML ?
will that be safe as i know that SEO crawlers ignores the comments in HTML
<!-- my hidden text -->
Please advice
The search engines only care about hidden text when it is used to manipulate a page's rankings. Typically this is defined as content that is presented to the search engines that is not presented to users. So if you hide text so users can't see it but crawlers can you will find yourself having issues with Google. An example of when hiding text is good is when you use display:none to hide dynamic content and then use JavaScript or CSS to display the content when an action is performed (i.e. mouseover, etc).
If you place this extra content within comments as you suggest in your question you will be fine as this content is not available to users and search engines ignore comments.
Try to avoid "hide" in naming your CSS class.
But the best way is to avoid hidden text by finding easy and creative ways to add the text to the content of a web-page without seeming like spam.
You can't parse html comments so instead use a hidden field:
<input type="hidden" value="my text" name="my_hidden_field/>
Some people for SEO doing this :
.hideme {
width:0px;
overflow:hidden;
text-indent:-99999px
}
Why you do not use <meta> tags ?
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.