got a new blog at wordpress few days ago (http://ghads.wordpress.com) and I want to post some code snippets now or then. Is there anyway to make it look like code without paying for extra plugins?
Asked
Active
Viewed 3.3k times
72
-
what plugin did you use and theme for your blog, please share it if you can – Nick Kahn Feb 19 '16 at 20:35
6 Answers
116
See here: http://en.support.wordpress.com/code/posting-source-code/
Wrap your code in these tags: [sourcecode language='css'] .. [/sourcecode]
(or shorter [code lang='css'] .. [/code] )
Note that Visual Editor doesn't interpret the tags, you need to click Preview to see how it works.
Available language codes:
- actionscript3
- bash
- clojure
- coldfusion
- cpp
- csharp
- css
- delphi
- erlang
- fsharp
- diff
- groovy
- html
- javascript
- java
- javafx
- matlab (keywords only)
- objc
- perl
- php
- text
- powershell
- python
- r
- ruby
- scala
- sql
- vb
- xml
starball
- 20,030
- 7
- 43
- 238
Alex Duggleby
- 7,948
- 5
- 37
- 44
-
1This page shows all the supported languages: http://en.support.wordpress.com/code/posting-source-code/ – Josh Brown Jan 15 '10 at 17:10
-
19Doesn't work for me for some reason. I see the tags in the preview as if they were ordinary text. – MasterMastic Dec 09 '12 at 11:19
-
1
-
@MasterMastic why? I used it and the output is this: https://gsamaras.wordpress.com/code/quicksort-c/ – gsamaras May 25 '15 at 08:27
-
1Didn't work for me either: There is just large blank whitespace where the code snippet should have rendered – cellepo Oct 16 '15 at 18:57
-
3Do the code tags use [] or <>? Should that be placed in the Wordpress editor's 'Visual' or 'Text' view? – cellepo Oct 16 '15 at 19:05
-
Does this work only on wordpress.com, whereas wordpress.org might require a plugin? – cellepo Oct 16 '15 at 19:53
-
4If you are hosting your own wordpress site then you need to install the plugin "SyntaxHighlighter Evolved" and use the tag [code] ... [/code]. This is explained at the bottom of https://en.support.wordpress.com/code/posting-source-code/. – ChrisCantrell Jan 16 '16 at 14:24
-
Download the plugin from : https://wordpress.org/plugins/syntaxhighlighter/ Then upload the downloaded zip file (syntaxhighlighter.zip) in your wordpress site "Plugins" section. Click on "Upload Plugin" button to upload. – learner Mar 19 '18 at 06:00
18
You can also use hilite.me. It doesn't require installation of plugins or JS/CSS files. It's also open-source and has an API.
Disclaimer: I'm the developer.
Alexander Kojevnikov
- 17,580
- 5
- 49
- 46
-
1
-
1I find this much better than using the buildin [code] markdown, which seems to interfere with my code snippets. Thanks. – lathonez Feb 22 '16 at 03:27
-
-
-
3
Crayon Syntax Highlighter is an excellent free plugin. I went with that one, but there are many others I came across that may serve the purpose:
Jan Klimo
- 4,643
- 2
- 36
- 42
2
There's a <code> html element you can use. Otherwise you could try the Textile or Markdown syntaxes (I'm not sure if WordPress.com uses them). Try it out and use the preview function in WordPress to see when you get it right.
Christian Davén
- 16,713
- 12
- 64
- 77
-
XML code strings have to be escaped when using
html element: http://stackoverflow.com/questions/5962637/xml-code-snippets-to-browser-friendly-html– cellepo Oct 16 '15 at 19:28
1
With my Wordpress.org installation, I couldn't get the Accepted Answer here to work (not sure if that's only expected to work with Wordpress.com?)...
I ended up using the SyntaxHighlighter plugin instead.
With that plugin, at first, your code will appear escaped in 'Preview Changes' view: It will appear correctly then after publishing. I think thereafter publishing it will then appear correctly in 'Preview Changes' (not 100% about that).
0
If you are hosting your own wordpress blog opposed to on WP.com you can get this functionality by installing this plugin, since it is the same plugin that the WP.com code relies on.
http://wordpress.org/extend/plugins/google-syntax-highlighter/
danmayer
- 4,326
- 1
- 22
- 15