July 7, 2010

BlogEngine.NET Extension: Footnotes

I finished this extension up last night but I was reluctant to deploy it to my own blog given that there was a major flamewar in progress on my recent post about Why .NET Adoption Lags Among Startups. Having actually tested this extension on that very post, I feel confident sharing my latest BlogEngine.NET extension with you: Footnotes![footnote:A lot of credit is due to Ruslan Tur for his awesome blog post on How to Create a Custom Plugin for TinyMCE. I used his code as a basis for developing my own plugin and he's quite masterful with both C# and JavaScript.]

Once you've installed it, all you have to do to add a footnote is to click on the new "footnote" button visible on your TinyMCE text editor:

Once you click it you'll see a pop-up window - just type in whatever you want[footnote:Actually, not WHATEVER you want. The only character to avoid is either of the square brackets since the extension will think you're trying to close the footnote.] to include in your footnote (no special syntax required) and it'll automatically be inserted into your blog entry.

And this is what your footnote will look like once it gets rendered by the plugin: 

That's it. Pretty simple, no?

Modifying Footnote Styles

If you need to modify the default styles for your footnotes[footnote:I had to modify the default styles for footnotes for my own theme here - mostly I just had to do some tweaking in order to make the footnotes appropriately smaller than my posts' body text styles.], you can do so by modifying User controls/footnotes/be-footnotes.css.

Alternatively, you can also specify your own stylesheet location for footnotes if you wish via the Extension's settings:

Installation Instructions

The only special instructions for installing Footnotes for BlogEngine.NET are thus:

  1. If you are already using the SyntaxHighlighter extension for BlogEngine.NET, make sure you grab the Footnotes 1.0 (SyntaxHighlighter) download below instead of the normal one - otherwise his handy TinyMCE plugin will disappear from your text editor!
  2. If you do not have SyntaxHighlighter installed, grab the Footnotes 1.0 (Normal) version below - otherwise you might get an annoying JavaScript error every time you load up TinyMCE.

For both versions of BlogEngine.NET Footnotes: simply extract the folders onto the root of your blog and everything will slip into its appropriate place.

Downloads

Footnotes 1.1 (SyntaxHighlighter).zip (7.59 kb) [new:8/31/2010]

Footnotes 1.1 (Normal).zip (7.59 kb) [new:8/31/2010]

If you run into any problems with Footnotes, please leave a comment on this page and I will respond as quickly as possible.

Update:

Whoops! Fixed a bug which prevented BE.NET's syndication feed from displaying properly. This has now been fixed in the 1.1 release of Footnotes.

Discussion, links, and tweets

I'm the CTO and founder of Petabridge, where I'm making distributed programming for .NET developers easy by working on Akka.NET, Phobos, and more..