Hello Blogger!

We're back baby! #

When writing a coding blog, one of the first decisions you have to make is how to render syntax highlighting. In this case, I'm using StackEdit to convert markdown into html. Among others, it uses highlight.js to convert <pre><code> blocks into beautifully formatted classes. Then I'm using the Visual Studio theme to apply the particular format for each class hosted off this Github project and available here:

                    Copy
                    
                 
<link href="http://kylemitofsky.com/libraries/libraries/HighlightColors.css" rel="stylesheet" />
<link href="http://kylemitofsky.com/libraries/libraries/BloggerStyles.css" rel="stylesheet" />

Languages #

Here's a quick listing of the languages I intend to use:

VisualBasic #

                    Copy
                    
                 
'''<Summary>Method Does This</Summary>
Private Sub OnTextBoxTextChanged(sender As Object, e As TextChangedEventArgs) Handles Me.TextChanged
    'comment
    Dim senderText As TextBox = DirectCast(sender, TextBox)
    Dim bindingExp As BindingExpression = senderText.GetBindingExpression(TextBox.TextProperty)
    bindingExp.UpdateSource()
End Sub

CSharp #

                    Copy
                    
                 
public class Program
{
    /// <summary>The entry point to the program.</summary>
    public static int Main(string[] args)
    {
        Console.WriteLine("Hello, World!");
        string s = @"This
                    ""string""
                    spans
                    multiple
                    lines!";
        return 0;
    }
}

JavaScript #

                    Copy
                    
                 
$('.tabs-student a').click(function (e) {
    e.preventDefault();
    $(this).tab('show');
});

HTML #

                    Copy
                    
                 
<ul class="nav nav-tabs tabs-student">
  <!-- comment -->
  <li class="active"><a href="#tab-activity">Activity</a></li>
  <li class=""><a href="#tab-sales">Sales</a></li>
</ul>

CSS #

                    Copy
                    
                 
@media (min-width: 992px) {
    /* only apply these changes to row view */
    #flex-table-md.flex-table .form-group {
        margin-bottom: 7px;
        margin-top: 7px;
        margin-left: 0px;
        margin-right: 0px;
    }
}

XAML #

                    Copy
                    
                 
<Storyboard>
    <!-- comment -->
    <ObjectAnimationUsingKeyFrames
            Storyboard.TargetName="ContentGrid"
            Storyboard.TargetProperty="Background">
        <DiscreteObjectKeyFrame KeyTime="0" Value="Blue"/>
    </ObjectAnimationUsingKeyFrames>
</Storyboard>

XML #

                    Copy
                    
                 
<?xml version="1.0" encoding="utf-8"?>
<Stock Date="13.11.2013">
  <Assortment>
    <!-- comment -->
    <Item>Sock</Item>
    <Quantity>1</Quantity>
  </Assortment>
  <Assortment>
    <Item>Puppet</Item>
    <Quantity>2</Quantity>
  </Assortment>
</Stock>

ASP.NET #

                    Copy
                    
                 
<asp:DropDownList runat="server"
                  DataSourceID="SomeDS"
                  AppendDataBoundItems="true">
    <!-- comment -->
    <asp:ListItem Text="Please select an option" Value="" />
</asp:DropDownList>

INI (TOML) #

                    Copy
                    
                 
CONSUMER_KEY=EFf98235jjsef
CONSUMER_SECRET=OeiL835Lu8325

YAML #

                    Copy
                    
                 
title_word: 'Careers'
title: 'Full Stack .NET Software Developer'
tags: ['post', 'workforce']

SQL #

                    Copy
                    
                 
BEGIN;
CREATE TABLE "topic" (
    "id" serial NOT NULL PRIMARY KEY,
    "forum_id" integer NOT NULL,
    "subject" varchar(255) NOT NULL
);
ALTER TABLE "topic" ADD CONSTRAINT forum_id FOREIGN KEY ("forum_id") REFERENCES "forum" ("id");

Advanced #

Diff #

You can visualize diffs by beginning each line with a minus (-) or plus (+) to indicate deletions or additions

                    Copy
                    
                 
- var sayHello = function(name) {
-   return 'Hi, ' + name
- }
+ let sayHello = name => `Hi, ${name}`

Markup in Code Block #

If you pre-escape any HTML characters, you can pass in raw into the fenced code block header and any markup will be preserved.

So call like this:

                    Copy
                    
                 
```html raw
&lt;a href="<mark>url</mark>"&gt; Link &lt;/a&gt;
```

Which will be displayed like this:

                    Copy
                    
                 
<a href="url"> Link </a>

Title in Code Block #

If you'd like to include the filename or title at the top of the codeblock, you can add it after the fenced code block header with either file=<value> or title=<value> like this:

Filename #

                    Copy
                    
                 
```ini file=.env
TOKEN=Value
```

Which will be displayed like this:

file: .env

                    Copy
                    
                 
TOKEN=Value

Title #

                    Copy
                    
                 
```js title=javascript
let pet = { name: "frida", type: "cat" }
let { name } = pet // destructure
```

Which will be displayed like this:

javascript

                    Copy
                    
                 
let pet = { name: "frida", type: "cat" }
let { name } = pet // destructure