Saturday, June 25, 2011

My site's style, how-to

Someone asked how I accomplish the styling on my blog. Without further ado, head to Alex Gorbatchev's syntax highlighter

Since I'm using the <pre /> method, I have to HTML-encode my code before I post it in my blog, for that I created the following ASP.NET MVC utility:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace HtmlEncoder.Controllers
{
    
    [ValidateInput(false)]
    public class HomeController : Controller
    {
        public ActionResult Index(string Encode = "")
        {
            ViewData["Encode"] = Encode;
            return View();
        }

    }
}

Note the use of ValidateInput(false), if you don't put that attribute, ASP.NET MVC will be in paranoid mode, anytime it encounters tags from user input, it will refuse to continue doing anything to prevent cross-site scripting.

And this will be your code in view:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<dynamic>"   %>



<% using(var c = Html.BeginForm()) { %>

    Paste your code here:
    
    <p><%: Html.TextArea("Encode", new { cols = 120, rows = 12 }) %></p>
        
    <p><input type="submit" value="Encode"/></p>



    Copy the following HTML-encoded code:


    <% string s = Html.Encode(Request["Encode"]); %>
    <p><%: Html.TextArea("Output", s, new { cols = 120, rows = 12 } ) %></p>


<% } %>

I wrote that code(using WebForm tags) prior to Razor support in ASP.NET MVC, and that's the only currently supported in ASP.NET MVC on Mono, I'm on Mac OS X now.

For console-like output, example:

Example

I'm using the following css style:
<style type='text/css'>
.console {
background-color: black;
color: #00FF00;
font-family: courier;
}</style>

And to use full-screen content on blogger, disable the content-outer class in your blog's content, the easiest way to do it is to change the <div class='content-outer'> to <div class='x_content-outer'>

Lastly, if you don't want to include the namespace when copying code or you just want to paste the only relevant code to your blog(good also for pasting code to stackoverflow), use block highlighting, if you are in Visual Studio, hold Alt then start highlighting the indented code of your class; on MonoDevelop on Mac, hold the command button, unfortunately this doesn't work well, it can only highlight up to the last column only, and unfortunately, most of the last line of the code you are copying is a single character only, i.e. the curly bracket }

No comments:

Post a Comment