My Master's Thesis Problems and solutions encountered…

8Apr/103

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:

  1. Go to this page and download the WordPress plugin
  2. Open an FTP program and access your website's server
  3. Copy and paste the plugin-folder to the wp-content/plugins folder
  4. Go to your WordPress admin page and click on Plugins in the administration panel
  5. 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!

Filed under: Wordpress Leave a comment
Comments (3) Trackbacks (0)
  1. WoW! It’s great! Big Thanks!

  2. 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.

  3. 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


Leave a comment


two × 9 =

No trackbacks yet.