I'm using Wordpress and I need to display all sorts of coding examples within these posts, such as HTML, CSS, jQuery, PHP, C++, JavaScript, XML and a few others.
I have been looking around for plugins, but all the ones I can find, you have to insert the code in a separate page, choose the programming language, then paste the shortcode within your post which seems a bit time consuming. Is there any other way of displaying code for these languages so it uses the formatting and typical colours of the programming language.
At the moment, for speed I am just posting them as follows:-
<pre>
<div class="logo logo-image">
<h3>
<a href="http://url.co.uk">
<img src="http://url.co.uk/images/03_logo-dark.png" alt="Web-Tricks Logo" />
</a>
</h3>
</div>
</pre>
Using Postable to replace the special characters so it doesn't interpret the text as HTML and doesn't display.
If anybody has a way I can improve this, a decent plugin I may have missed or whether or not this could be achieved in CSS let me know!
Thanks in advance.
Found a nice plugin in the end:-
WP Code Prettify
This plugin enable syntax highlighting of code snippets in your post using Google Code Prettify - and supports quite a load of different languages!
Also, with this plguin, you no longer have to use Postable to replace the special characters as it escapes all of this for you, so you just have to paste the code as it is.
Related
my title isn't brilliant, but I don't know exactly how to put it, I lack some knowledge. If you have a better title, please let me know :)
But the question is simple. Let me tell you the story. I blog with Ghost, and as most of us, I put some images in my blog.
I don't use the native way to insert images in my blog, aka:
Doing it this way is too restrictive, it doesn't allow you to add a caption or to change the image width. Instead, I write the HTML directly, and it looks like that:
<figure>
<img src="https://ghost.org/assets/logos.png" alt="Ghost Logos" width="80%"/>
<figcaption>Here come the logos</figcaption>
</figure>
And it works great! My only concern is that I have to copy/paste this all the time, which a little bit tedious.
So I was wondering if there is any way to, say, define a kind of function or macro or whatever, so that I just have to call it with some arguments (image source, width, caption), and it's automatically replaced by the HTML.
I know there are plenty of technologies under the hood of Ghost (Markdown, Handlebars, and probably much more), and that it can do a lot of magic. But I don't know ho to invoke it...
So if you're this kind of wizard and know a way to achieve that, please let me know :)
Before apps come along I don't really see this being possible within Ghost.
Until then I would suggest using some extension for the browser, either a Macro extension or something like Auto Text Expander which allows you to define your own shortcuts. You could for example use the following as an expansion for your figure-element:
Input: !!
Output:
<figure>
<img src="<!--?atec?-->" alt="">
<figcaption>Caption</figcaption>
</figure>
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.
On my website I have tags that people can use to post on my site and mess with it.
What I would like to know is how do i make it so the browser just reviews everything in a
file I write too as text.
I would like it so there is no html and in certian parts of my website!
All of it is in ASP
Check out http://htmlpurifier.org/. It filters HTML input with a white list of acceptable tags, so you don't get anything undesirable - like iframes, or javascript, etc. Assuming I understand your question correctly.
The general term for what you are asking for is "HTML Sanitization" - There is actually a good discussion of this, along with some code on the StackOverflow Blog.
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.
I have text stored in SQL as HTML. I'm not guaranteed that this data is well-formed, as users can copy/paste from anywhere into the editor control I'm using, or manually edit the HTML that's generated.
The question is: what's the best way of going about removing or somehow ignoring <script/> and <form/> tags so that, when the user's text is displayed elsewhere in the Web Application, it doesn't disrupt the normal operation of the containing page.
I've toyed with the idea of simply doing a "Find and Replace" for <script>/<form>with <div> (obviously taking into account whitespace and closing tags, if they exist). I'm also open to any way to somehow "ignore" certain tags. For all I know, there could be some built-in way of saying (in HTML, CSS, or JavaScript) "for all elements in <div id="MyContent">, treat <form> and <script> as <div>.
Any help or advice would be greatly appreciated!
In terms of sanitising user input, form and script tags are not the only ones that should be cleaned up.
The best way of doing this job depends a little on what tools you are using. Have a look at these questions:
What’s the best method for sanitizing user input with PHP?
Sanitising user input using Python
It depends on which language you're using. In general, I'd recommend using an HTML parser, constructing a small DOM from the snippet, then nuking unwanted elements. There are many good HTML parser, especially designed to handle real-world, messy HTML. Examples include BeautifulSoup (Python), HTMLParser (Java)... And, since the answer came in while I was typing, what Colin said!
Don't try and do it yourself - there are far too many tricks for getting bits of script and general nastiness into a page. Use the Microsoft AntiXSS library - version 3.1 has HTML sanitation built in. You probably want the GetSafeHTMLFragment method, which returns a sanitised chunk of HTML. See my previous answer.
Since you're using .Net I would recommend HtmlAgilityPack as it is easy to work with and works well with malformed HTML.
Though the answers suggested were acceptable, I ended up using a good old regular expression to replace begin and end <script> and <form> tags with <div>'s.
txtStore.Text=Regex.Replace(txtStore, "<.*?>", string.Empty);
I had faced same problem before. But my scenario was something different. I was adding content with ajax request to page. The content coming in ajax response was html and it also included script tags. I just wanted to get html without any script so I did removed all script tags from ajax response with jquery.
jquery-remove-script-tags-from-string