How do I add syntax highlighting to a WordPress blog hosted on WordPress.com?

B

9

47

I'd like to have a good syntax highlighter for my WordPress blog. What options do I have available? I often see one which has well-colored syntax highlighting and options to copy to the clipboard. Does anyone have an idea what tool this is?

Boyes answered 13/8, 2009 at 18:6 Comment(5)

Dupe? #81838 – Wolford 13/8, 2009 at 18:7

OK. I did that. Marking as a dupe. – Wolford 13/8, 2009 at 18:10

I often see one which has well-colored syntax-highlighting and options to copy to the clipboard - does anyone have an idea what tool this is? – Boyes 13/8, 2009 at 18:12

Is this a self-hosted WordPress installation or a hosted WordPress.com blog? – Morphinism 13/8, 2009 at 18:13

#81838 – Mastodon 10/1, 2013 at 12:37

M

76

On wordpress.com, you can't install plugins, so you have to use Wordpress' built-in widget.

Do it like:

[code language='python']

[/code]

Note that those tags go inside your visual editor, not the HTML editor.

You can find more information here.

Mammilla answered 13/8, 2009 at 18:14 Comment(10)

This is the only correct answer so far. Everyone missed the important little detail that his blog is hosted on wordpress.com, which does not allow the installation of plugins. – Successful 13/8, 2009 at 18:21

This seems like a great question for the new WebApps on Stack Exchange – Mammilla 21/7, 2010 at 23:15

you can write the sourcecode tags inside the HTML editor as well. That is what i do all the time. – Gravitation 16/5, 2011 at 15:32

@samoz What if my language s not there in "supported lang" section! I am looking for system verilog lang support but i dont see any option :( – Neurosurgery 16/2, 2015 at 12:41

yeah this doesn't always work. don't know if it is my old old 2010 theme or what. but it basically destroyed my indenting and gave me zero syntax highlighting. – Renae 15/2, 2017 at 3:59

Does this support indentations? How do you put those? – Varus 22/4, 2017 at 5:26

Found the answer to my question. This code tag needs not to be in the visual editor. You can put those in the HTML editor as well. When you put there, you can preserve indentation as well. I have suggested an edit. Please check it on... – Varus 22/4, 2017 at 10:0

Thank you so much for solution. – Copyright 21/6, 2017 at 6:46

This isn't working for me. I'm using C++, and I find with either "HTML" or "Visual", the text between angle brackets (and the angle brackets) is removed. As I switch between the different modes I even find that this has affected my original text - i.e. the angle bracket sections are removed there too! Somehow my older posts (from a few years ago) seem ok - though I'm very nervous that they too will become corrupted the more I struggle here. Is the obvious solution to switch blogging platform? – Headcheese 4/11, 2018 at 16:26

Does this really work for Python? C++ will not work through "Preview". Perhaps it works when you publish, but I don't see a way to even publish privately. This seems the most helpful official response: en.forums.wordpress.com/topic/…. Alas, that forum entry is from 2013 - and closed :( – Headcheese 4/11, 2018 at 22:22

B

2

SyntaxHighlighter is a pretty good tool. It uses JavaScript with CSS classes to mark HTML elements that should be highlighted. It also allows code to be copied to the clipboard and printed.

Beak answered 13/8, 2009 at 18:11 Comment(0)

A

2

The best way for syntax highlighting is using prismjs, which is completely free with awesome features.

It has support for almost all programming languages, shell scripts and much more.
It is very light weight and it will not bog down your sites speed like other syntax highlighting plugins.

For configuring prismjs you need to do little code tweaks in your function.php file. Follow the turoails in this blog http://skillslane.com/setup-syntax-highlighter-for-wordpress/

Ainsley answered 8/10, 2015 at 5:6 Comment(0)

C

1

http://wordpress.org/extend/plugins/devformatter/

WP Plugin for various syntax highlighting!

Compellation answered 13/8, 2009 at 18:10 Comment(2)

So, how does one install plugins on a WordPress blog hosted on WordPress.com? as OP wants – Ronel 6/1, 2014 at 12:45

This doesn't answer the question correctly since the OP ask for wordpress.com and not wordpress.org where the former doesn't support for plugin installations. – Mastodon 15/9, 2015 at 9:26

C

1

If you don't want to, or can't install stuff on your blog, I suggest you use pygments to highlight your code. I described this here.

Clemente answered 13/8, 2009 at 18:12 Comment(0)

D

1

Here is an offline option (I know you are asking about online tool but just in case ...)

I use offline tools to process the blog entry with source code examples into html format and then just post the html.

It's really just:

offset source code by at least 4 spaces and specify language on the first line like :::html
run your file through:

python script:

import markdown
html = markdown.markdown(text,['codehilite'])

I setup markdown with pygments probably you could just use pygments for source code. You run the file thought the script and then copy paste the html to your blog.

You can dump css style, to highlight syntax, from pygments and then either link to it or include it in your page. I'm not sure if wordpress supports that.

Here is how to setup markdown with pygments to do syntax highlighting (for Blogger - the only specifics for Blogger is that it updates the Blogger css with the css to highlight code).

Disinclined answered 18/1, 2010 at 5:23 Comment(0)

R

0

You could use the Alex Gorbatchev's SyntaxHighlighter. Its javascript and really simple and well supported, easy to install and modify. Here are some instructions for blogger... but all you have to do you to do is remove the blogger=true line.

http://code-slim-jim.blogspot.com/2010/11/adding-syntax-higher-to-your-blog.html

Rebuild answered 13/11, 2010 at 5:28 Comment(0)

L

0

I have developed a lightweight syntax highlighter plugin for WordPress called "Mivhak". The plugin has a backend code editor to easily insert code, with live error checking and syntax highlighting. It is also highliy customizable.

The plugin is hosted on wordpress.org

Landeros answered 5/4, 2016 at 6:45 Comment(2)

But how can I install Mivhak since I'm using a wordpress blog hosted on wordpress.com ? – Thornton 26/4, 2017 at 17:5

@ArmanOrtega when I wrote this answer I was not aware of the fact that you can't install plugins on WordPress.com – Landeros 27/4, 2017 at 17:28

I

0

It now supports SyntaxHighlighter Code blocks.

Although it's a little inconvenient that languages must be chosen in the aside settings.

Invasion answered 6/3, 2019 at 3:6 Comment(0)

Recommended topics

Hot tags