Engagement/Developer Engagement/Hacks blog/Writing

Writing for Mozilla Hacks

This page contains useful information for people posting on the Hacks blog.

Writing in plain text, Markdown or HTML

If you are writing a draft in whatever environment you prefer: write it in plain text, Markdown or HTML and send to the Editor of Mozilla Hacks (mozhacks [at] mozilla [dot] com). Once the initial draft has been received, it will be added to the Mozilal Hacks blog and iterated on there, with revision and reviewer support.

If you write directly in Mozilla Hacks' Wordpress instance: The WYSIWYG editor in WordPress produces very bad HTML, which reflects poorly on our expertise if people view the source of posts. So, please don't use it. There's even a profile setting, "Disable the visual editor when writing". If this wasn't set by whoever created your account, please go in and change your own profile, so you don't accidentally use the visual editor.

Embedding media and https

The width of the content on Mozilla Hacks is 500 pixels. Make sure that images, embedded videos etc are adapted to that. If you want to add images to your post, please upload them to Mozilla Hacks and then reference their URL with an <img> element.

Note: Mozilla Hacks is being served as https so if you embed anything, it has to support https as well, due to Mixed Content Blocking. For instance, at the time of writing (April 26th 2013), YouTube and GitHub embeds supports https, Vimeo and jsFiddle doesn't.

Using code samples in your post

When you write code samples in your post, make sure to wrap them with <pre> elements. As described above, we use the GeSHI support to generate color highlighting for your code. To enable that, just use the lang attribute on the <pre> element, like this:

<code><pre lang="javascript">
    var URL = "https://hacks.mozilla.org/";
</pre></code>

Note:

• Do not use <code> elements
• Do not escape HTML entities like <, > and & with &lt;, &gt; and &amp;

Another option is also embedding gists or similar. Note: it has to support https (see above).

Sharing code

When you write a blog post that contains code, please consider adding that code to the Mozilla Hacks repository on GitHub. That way, people can read, fork and easily work on that code themselves!

Installed Plug-ins

The following plug-ins are installed on Hacks:

• Akismet: spam filter
• Artiss Code Embed: allows embedding privileged code in posts
• Co-Authors Plus: allows multiple authors to be assigned to a post
• FC Pagination: Show numbered pagination instead of "Next page" and "Previous Page" (by Craig Cook)
• FD Footnotes: supports footnotes
• SEO Smart Links: helps SEO through auto-generation of links
• Subscribe to comments: lets users subscribe to comments
• Time Release: queues posts to publish after inactivity
• Twitter Tools: supports auto-tweeting articles
• WP-reCAPTCHA: integrates reCAPTCHA with WordPress
• WP-Syntax: Syntax highlighting with GeSHi: use <pre lang="LANGUAGE_NAME" line="1"> to highlight for LANGUAGE_NAME, with line numbers