Could someone give me a link, a tutorial or an already made css template for styling code snippet to add that feature to my blog ?
I seen examples in numerous blogs, but, now that i am searching for one, i can't put hands on it !
I want to be able to post a code snippet with keyword coloration, line numbers etc..
Many thanks in advance.
EDIT : i know there are some solution like prettify (thanks Developer Art) or SyntaxHighliter but i am on a platform and i can't use Javascript
Prettify is what you're looking for.
You include a bunch of JavaScript and CSS files to your pages and mark page sections that need to be prettified. Pretty much it.
manoli.net offers an online copy/paste syntax highlighter:
This tool allows you to format your
C#, VB, HTML, XML, T-SQL or MSH (code
name Monad) code for publishing on a
web site or in a blog.
The output conforms to the HTML 4.01
specification and is color-coded to
make it easier to read. The colors can
be changed by modifying the CSS style
sheet. See a sample.
And you may want to check out the Syntax Highlighter project on CodePlex (not sure how much activity it still has, though):
Syntax highlighter converts code text
to HTML where common language elements
are formatted using style sheet
classes such that the coloring scheme
can be switched or altered as simple
as replacing a CSS file. The primary
release ships as an extension for
BlogEngine.NET.
There are server side solutions for this as well, which of course depend on your server language. PHP is the ever popular choice for blogs, in which case you could use the equally popular GeSHi library.
Related
I am trying to display code as part of a tutorial in my squarespace blog post. I know how to insert code and save it so it displays as html or javascript but I want it to be indented and shaded similar to how code is displayed on stackoverflow. Any ideas?
Here's how the code looks now in the post:
There are a couple options to display/format code in Squarespace:
Use a Code Block with "Display Source" checked.
This will automatically format HTML, CSS or JavaScript. For other languages, it's possible to accept a compromise and select "JavaScript". For example, some Python code will look alright when formatted as JavaScript. You will, of course, want to write your code in a text/code editor outside of Squarespace and then copy/paste it into the block. This should maintain your indentation for the most part.
Use an HTML formatting tool.
Write your code in your favorite text/code editor. When you're done, you can copy/paste it into a tool like tohtml.com (there are probably others; I only found this one in answering this question), select your language, and submit it. It will then output HTML with inline styles that you can straight-up copy and paste into a code block (leaving "Display Source" UNchecked). You will of course want to save your source code for future editing, because tools such as that will format the code for display, which is not conducive to later editing.
The above suggestions assume that you have a preferred code/text editor that you use to write your code and simply want to take it from there and insert it into your Squarespace website. If you're looking to choose an editor, that's a large and opinionated topic. You'll want to search around.
I'm posting a front end tutorial which includes an html section. I've disabled the visual editor and am using prismjs for code highlighting which works great.
However when it comes to the html wordpress is converting it, not showing it raw.
Is there a way around this? I've tried a couple of plugins, including Raw HTML, but no joy...
This is covered right in the Codex.
<pre> and <code> only change the appearance of code blocks; they don't prevent code from being interpreted as HTML.
In short, you need to encode all HTML entities, either manually or by running your code blocks through a custom shortcode or function.
You have an icon in your visual editor which enables you to write code in your posts.
In addition, you could install one plugin (there are a lot) to show your code with colors and other features to make your code easier to read.
I hope this answer will help you.
My way round this is to blog in markdown. It converts the < > and things into html characters. Plus it's a super nice way to write anyway.
I am making a Google Apps Script for Google Docs with a side panel.
I would like to match the style of buttons, scroll bars, etc. that Google Docs has.
FYI, a lot of the CSS seems to have be minified/obfuscated.
scb-button-icon
jfk-star
Where might I find such a thing?
I would have thought Google Apps Script might have provided something like this, since consistency makes the UX better.
If the official source is not available, is an unofficial one available?
EDIT: Sidebar CSS is now freely available, see CSS Package for Add-ons.
For research only, of course:
View Source of the page you wish to research. Copy and...
Paste into a text editor. Remove everything up to and including the <style> tag, and from the </style> tag to the end. Copy and...
Paste into an HTML decoder, to remove the encoding. Now you have all the CSS, it's just badly formatted. Copy and...
Paste into a CSS Formatter, and tidy it up. Optionally, output as a file.
At this point, you've got a CSS file that can be experimentally built into your for-personal-use-only app. Browser inspectors are handy for determining the HTML others have used to produce the UI elements you want to learn from.
Here's my own little experiment, a sidebar in a Google Doc, with an assortment of elements:
Not sure if you'll be able to find the source code, so here is an alternative:
CSS Unminify
This tool will take minified CSS and expand it. This will allow you to at the very least read the CSS and hopefully figure out which rules you need.
If copyright infringement is not an issue then you could simply recreate the design that Google adopt for their buttons. It should be fairly simple with CSS. The font Google + uses is called Roboto and is free to download
I talked to some of the guys at Google and got a alpha version of the CSS.
It does not yet, however, completely support IE or Firefox, and has (very minor) differences, so I accepted Mogsdad's answer.
what is the difference in performance between css templates and dreamweaver templates , or are they the same. Need to know which one gets indexed quicker by google.
I want to move my website to one the best templates for quick uploads and ftp linkups with linkmanagement tools
please advise
thanks
This is why I despise Dreamweaver and the alike...
Dreamweaver creates websites, which consist of HTML and CSS code, and maybe some JavaScript.
HTML: the "glue". It's the structure which browsers read.
CSS: the "perty stuff". It's what browsers read to determine how to make your page look (colors, layout, etc.).
Since Dreamweaver makes websites, a Dreamweaver template also helps Dreamweaver to make websites, which implies that it follows the above structure.
Templates just style your site and might provide some basic functionality, so they have nothing to do with uploads. Some might be bloated and cause slow loading times, but that's dependent upon the template.
In the end, Dreamweaver Template is more or less CSS + HTML.
A DW template file helps to isolate parts of your HTML code on a page/page basis. Editable content and "locked" content together (in hopes of making development quicker). If you like DW, and have a template you like - 0use it. But don't expect that to be your silver bullet.
There's no advantage to either template where search engines are concerned (good/bad content withstanding).
Content...(pertinent content) is what Google is after. Having a 1M file of valid content will beat a 200k file of sparse/bait-n-switch content every time (well, it's supposed to, right?).
The answer you are looking for: Every Dreamweaver template is a CSS+HTML template. So it depends on the CSS template you are using. For the most part Dreamweaver is pretty bad about writing optimal CSS and it also uses inline styles which is bad for performance.
The real answer: It is obvious you are a beginner and don't know how silly your question is, it is not even one question, and is open ended and has no answer. There is no such thing as a CSS template, CSS by itself is not enough to create a template and this is just a marketing word to use to sell templates to people looking for such a thing as a better alternative to HTML templates, and etc, there is CSS for a certain type of template or certain Document Object Model, so if that is your definition of a CSS template than every Dreamweaver Template is a CSS template, as Dreamweaver itself is not a web technology or language. Dreamweaver is a WYSIWYG/IDE that helps you to write CSS (and other code) without knowledge of CSS, or in my case I use it because I love the pink/purple syntax highlighting it has for CSS in code view.
*Need to know which one gets indexed quicker by google - FTP Upload - linkmanagement *
This has nothing to do with your question, you can create a website in notepad that gets better SEO results. You are mixing all these different concepts together, SEO, CSS, HTML Templates, google indexing,templates, quick uploads, ftp linkups, linkmanagement tools, these are all different concepts and each require years of experience for you to achieve this. At the end of the day what I am trying to tell you is, building a website as you describe is not a few clicks to create a template with dreamweaver. You first need to learn enough to be able to ask the right questions. And then you will be able to create such a website, not the best and ultimate "templates for quick uploads and ftp linkups with linkmanagement tools" but something that works, even though I'm not sure what exactly you are trying to build.
I Think you should look into a CMS like WordPress and get a nice looking wordpress template for your site and eventually become more familiar with these concepts. WordPress has a really good SEO/(google indexing as you say) that it even gets better results than expensive websites built by professionals. This is definitely what you want! trust me!
http://wordpress.org/
I want to show code in asp.net page , how to show code snippet that it will look in same colors as it looks in visual studio , best examlple i can give is this stackoverflow.com itself we can put code fragment in our question which looks well colored giving better user exprience
i have just no clue ? also how to store code snippets when user enters them ?
You probably want to start with Google Prettify which is the same code coloring tool used here on Stack Overflow.
StackOverflow uses Prettify for syntax highlighting.
What do you mean by how to store code snippets? You might want to post that as a separate question with a little more detail.
The solution you're looking for is called syntax highlighting.
Prettify is a popular one, but I've used SyntaxHighlighter before and it is quite nice.
SyntaxHighlighter helps developers to
display code on their website.
Also, Syntax Highlighter recently added a hosted syntax highlighter "service."
About Syntax Highlighter
Hosted Version of Syntax Highlighter
Extra: Shanselman Speaks on Syntax Highlighting