Memeful comments extension for Visual Studio

It’s said that a picture is worth a thousand words. An animated GIF is probably worth even more. I have always wanted to show my reaction to code with pictures. Being able to display images along source code could have a lot of benefits beyond that. By inserting images within code we could better explain snippets, visualize algorithms, or other things. Luckily Visual Studio allows us to customize the WPF editor with extensions that actually enable us to do so. Therefore I have created an editor extension for Visual Studio that enables displaying images, including animated GIFs, within the source code. It’s called Memeful Comments and is available for free in the Visual Studio marketplace.

Download the extension from Visual Studio Marketplace.

The source code is publically available on GitHub.

Here is how it works: original source code like this JavaScript snippet

'use strict';
var http = require('http');
var port = process.env.PORT || 1337;

// it's that simple
// <image url="http://i.memeful.com/media/post/BRkjDbM_700wa_0.gif" />
http.createServer(function (req, res) {
    res.writeHead(200, { 'Content-Type': 'text/plain' });
    res.end('Hello World\n');
}).listen(port);

is displayed as shown here when the extension is enabled:

The following languages are supported:

  • C#
  • C and C++
  • F#
  • VB.NET
  • JavaScript and TypeScript

Here is a longer video showing how this works while editing text.

To display images, including animated ones, in your source code in any of the supported languages, you have to add an <image> tag. The following attributes are supported:

Attribute Required Description
url or src Yes Represents the source of the image. It can be either from a local disk or from the web. If the file is from the local disk it can be either absolute or relative to the document path.
scale No Indicates a scaling factor for the image. Notice that a very large scale might make the image impossible to display.

Here are examples in various programming languages:

  • C#
    /// <summary>
    /// This is an example.
    /// </summary>
    /// <image url="https://www.mathsisfun.com/numbers/images/fibonacci.jpg" scale="0.5" />   
    
    or
    
    // <image src="https://i.memeful.com/media/post/YROe6ew_700wa_0.gif" />  
    
  • C++
    // code review: change this ASAP
    // <image url="http://i.memeful.com/media/post/VMV92nw_700wa_0.gif" scale="0.5"/>

  • VB.NET
    ''' <summary>
    ''' This is a sample
    ''' </summary>
    ''' <image url="http://i.memeful.com/media/post/Bdq60Ww_700wa_0.gif" />
    
    or
    
    '' <image url="http://i.memeful.com/media/post/Bdq60Ww_700wa_0.gif" />

  • F#
    (* This looks neat!
       <image url="http://i.memeful.com/media/post/LR8Elld_700wa_0.gif" />
    *)
    
    or
    
    // Examples
    // <image url="http://i.memeful.com/media/post/0MA2OXR_700wa_0.gif" />

  • JavaScript/TypeScript
    // it's that simple
    // <image url="http://i.memeful.com/media/post/BRkjDbM_700wa_0.gif" scale="1.2" />

Enjoy the extension and send me feedback!

Credits
This extension is based on the image-comments extensions by Luke McQuade.

5 Replies to “Memeful comments extension for Visual Studio”

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.