How to display XAML source code on WordPress without any plugins


I have displayed some source code in the previous post, ListView(1), but it was a little bit difficult to display XAML source code especially in WordPress.  I tried to copy and paste them from Visual Studio to WordPress visual editor, and also to try the script, <pre><code> source code </code></pre> in WordPress html editor.  But the behavior of the source code display is unstable pretty much when switching visual/html editor.  The reason seems to be the characters, "<" and ">" etc., in XAML source code, which should be escaped in html.  The character string for comment-out, "<!-- -->", also seems to be causing the unstableness.  It may be a problem specific to WordPress (not so unstable in Blogger).  Besides, someone says that the posted article is correctly displayed, even though the display of source code is collapsed in the visual editor.

 So, trying out various methods without any plugins and any other complicated tools, it seems to be relatively easy to do as follows:

 In WordPress html editor on Mac, copy and paste the script below.

html script to display XAML source code
＜div style="padding: 5px 10px; width: 200px; color: white; background: black; border: 1px solid black;"＞ファイル名＜/div＞
＜div style="background: white; overflow: auto; width: 630px; border: 1px solid green; height: 270px; padding: 10px; white-space: nowrap;"＞
Source Code
Source Code
Source Code
Source Code  ( Actually, this html script is being displayed by this script. )
＜/div＞


 Copy and paste XAML source code from the editor of Visual Studio for Mac to the place of "source code" in this script and post it, XAML source code is beautifully displayed as follows!

MainPage.xaml
<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
            x:Class="ListView.MainPage">
        <ContentPage.Content>
        <StackLayout>

             <!-- Add a new book to the book list "BookListView" -->
            <Button Text="Add New Book" Clicked="OnNewBook" />
            <Entry x:Name="Entry1" Placeholder="Input New Book" Keyboard="Text" />

             <!-- Create a book List "BookListView".
                 Call "OnTap" method, if one of the books is tapped -->
            <ListView x:Name="BookListView" ItemTapped="OnTap" >
                    </ListView>

         </StackLayout>
        </ContentPage.Content>
</ContentPage>


I wanted to add line numbers to the source code above, but it was quite difficult by simple html code.  So, I will write posts using the script above.

コメント

コメントを投稿

このブログの人気の投稿

Get the Color Code from an Image Pixel

イメージ
Keywords:  Xamarin.Forms, Image Class, Pan Gesture, Pinch Gesture, SkiaSharp, SKBitmap, SKBitmp.GetPixel, Slider I developed an App to easily get the color code from a image pixel, because when I found an App with good coloring sense, I wanted to know some color codes in the App.  Getting the color from image is very common function, and there are many Apps and Webs.  But I wanted to make it by myself, I wanted to learn image data handling in Xamarin.Forms, so I have tried to do it anyway. The screenshot just after launching this App (left), a screenshot (middle) when the image is dragged by Pan Gesture, and a screenshot (right) when the image is scaled by Pinch Gesture.  You can see a figure like a rifle sight.  The color code of the pixel on the center of the figure are shown below the image. MainPage.xaml <? xml  version = " 1.0 "  encoding = " UTF-8 " ?> < ContentPage   xmlns = " http://xamarin.com/schemas/2014/forms "       
続きを読む

PCL Storage (1)

イメージ
In the sample programs of  ListView (1) and (2) , new book titles can be added to the book list, so I naturally wanted to build the new function to save the book list. I found that there are some ways to save data processed in App. Store data in Cloud, such as Azure and OneDrive Link with Web service Use local SQLite database Use the file system plugin, PCL Storage Dictionary Properties(?) Cloud or Web service is the best choice to save various type of data, but it will be necessary to save data in device. So, firstly, I started to study PCL Storage. MainPage.xaml <? xml  version = " 1.0 "  encoding = " UTF-8 " ?> < TabbedPage   xmlns = " http://xamarin.com/schemas/2014/forms "            xmlns : x = " http://schemas.microsoft.com/winfx/2009/xaml "            xmlns : local = " clr-namespace:PCLStrg;assembly=PCLStrg "            x : Class = " PCLStrg.MainPage " >      <!--  1st tabbed pag
続きを読む

Prolog Interpreter

イメージ
Keywords: Xamarin.Forms, Prolog, C#Prolog, CSProlog, PCL Storage, Command Prompt I didn't update this blog for a while, but I came to want to enjoy Prolog programming and I re-started application development.  First of all, I post an application, Prolog Interpreter, that I almost developed before.  The Prolog Interpreter App has been developed with a Xamarin Library, CSProlog, based on the Command Prompt App that I posted before. The source code is here . Since MainPage.xaml, MainPage.xaml.cs, ComInterpreter.cs, CommandExecute.cs, PCLStorage.cs are the same as the ones in Command Prompt App , I skip their description and introduce Prolog.cs beriefly below. I developed Prolog.cs with reference to some sample programs.  Obviously, one of the NuGet packages, CSProlog, are added to this project. Prolog.cs //using System.Text; //#define SystemIO #define PCLStorage // #define iOS using System.Collections.Generic; using System.Linq; #if SystemIO     using Sy
続きを読む