How to insert XAML code into WordPress
Initially, I had difficulties inserting XAML into the WordPress blog, as the characters < and > are used in XAML, which conflicted with the WordPress HTML. As the XAML code didn't show properly, I went looking for plugins to use, and found what I was looking for:
With the SyntaxHighlighter Evolved you can insert code into WordPress that looks like this:
(...) <ScrollViewer VerticalScrollBarVisibility ="Auto"> <Grid x:Name="LayoutRoot" Background="#00000000" Width="Auto" Height="Auto"> <!--Comment--> <Grid.RowDefinitions> <RowDefinition Height="130"></RowDefinition> <RowDefinition Height="auto"></RowDefinition> (...)
All you need to do is the following:
- Go to this page and download the WordPress plugin
- Open an FTP program and access your website's server
- Copy and paste the plugin-folder to the
wp-content/plugins
folder - Go to your WordPress admin page and click on Plugins in the administration panel
- Activate your SyntaxHighlighter plugin
That's it!
On your post, you need to insert the following code snippet:
[-sourcecode language="XML"]
... your code ...
[-/sourcecode]
OBS!! You need to remove the two "-". I had to put them there, so the code wouldn't be interpreted.
The SyntaxHighlighter supports many laguages, including Java, Perl, C# (csharp), Python, Ruby, Scala, SQL, VB... and XML. Not XAML, but close enough. Just replace language = XML
above with for example language = java
or language = csharp
.
On this page you can read more about posting source code in WordPress. There are many extensions. For example:
- Disable the URLs in your posted code: Insert
autolinks = false
- Collapse the code box when the page loads, requiring the visitor to click to expand it. Insert
collapse= true
- Remove the line numbering. Insert
gutter = false
. - Highlight specific lines of code. Insert
highlight = "11, 12"
if you want lines 11 and 12 to be highlighted. - When posting only one or two lines of code, you can simplify the code highlighting. Insert
light = true
.
The code snippet below has been made by writing [-sourcecode language="XML" autolinks="false" collapse="true" highlight="3,4"]
(again, without the first "-").
<UserControl x:Class="Smuk.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation" > <ScrollViewer VerticalScrollBarVisibility ="Auto">
Enjoy!
September 13th, 2010 - 08:53
WoW! It’s great! Big Thanks!
December 25th, 2010 - 04:33
I am impressed, I must say. Very seldom do I discovered a blog that is both informative and entertaining, and let me tell you, you’ve hit the nail on the head. Your post is important; the matter is something that not a lot of people are speaking intelligently about. I am very happy that I stumbled across this in my search for something relating to this.
November 5th, 2018 - 19:09
Might work here – but is broken on your main page as well as other WP sites using the plugin – since Oct 2018 update by WordPress