Formatting Code for Blogs & Websites
About Formatting Code
When we talk about formatting code, we usually refer to one of two things:
- Formatting the code inside the application or where it is used
- Formatting & highlighting the code for sharing, either in documentation or a website/blog
For the first scenario, it’s not necessary to highlight the code, since that is done in the application itself. Rather, the code should be arranged in a readable and concise way. Examples include using indentations and spacing to ensure that there isn’t too much text density on the screen, and to segregate semantic elements or functions. For example, having comments either above or to the right of the line they refer to, or having indentations for nested function calls.
For the second scenario, highlighting key words and functions is also important to exploit the implicit knowledge about what certain words represent. For example, in DAX, if someone sees a purple field between square brackets, they know it’s a measure.
Best Practices
- Use the best practices for formatting agreed to by the community, typically documented for each language.
- Use the highlighting style from the application. If different applications use different styles (e.g., Python in Visual Studio vs. Colab), use the most common or popular one.
- Be consistent in formatting and highlighting across code blocks.
- Ensure sufficient contrast between the code and the background (e.g., if using a dark mode style, match the background color).
- Include comments, titles, and section breaks to logically break up the code and provide explanations for non-obvious elements.
- Use GitHub Gists if you can’t format the code another way, but avoid them if embedding isn’t possible on your platform.
Tools for Formatting Code
Power BI-Related Code
- DAX Formatter: Website | DAX Formatter API
- Power Query Formatter: Website | Power Query Formatter API
- Software: Tabular Editor 3, Bravo, DAX Studio
General Code Formatting
- Pygments: Programmatic formatting for Python, C#, and more
- hilite.me: Online syntax highlighter
- C# Syntax Highlighter: Online (note: contains ads)
- Tableizer!: Convert tabular data to HTML tables
- GitHub Gists: Embeddable code snippets (if JavaScript embedding is allowed)
Examples
Unformatted Power Query code:
let Source = Table.FromRows( Json.Document( Binary.Decompress( Binary.FromText( "i45WcknNySxLLUpNUQhKLUvNK01V0lEyBGKXIKVYnWgl/6KU1KJiIN8IiKGc2FgA", BinaryEncoding.Base64 ), Compression.Deflate ) ), let _t = ((type nullable text) meta [Serialized.Text = true]) in type table [Measure = _t, Order = _t, Abbreviation = _t] ) in SourceFormatted & highlighted Power Query code (from powerqueryformatter.com):
let Source = Table.FromRows( Json.Document( Binary.Decompress( Binary.FromText( "i45WcknNySxLLUpNUQhKLUvNK01V0lEyBGKXIKVYnWgl/6KU1KJiIN8IiKGc2FgA", BinaryEncoding.Base64 ), Compression.Deflate ) ), let _t = ((type nullable text) meta [Serialized.Text = true]) in type table [Measure = _t, Order = _t, Abbreviation = _t] ) in SourcePygments Example (Python):
# Script to format & highlight Python code with HTML. from pygments import highlight from pygments.lexers import PythonLexer from pygments.formatters import HtmlFormatter code = "print('I used the Python to format the Python')" result = highlight(code, PythonLexer(), HtmlFormatter()) # Add the classes to your blog/website's custom CSS: print(HtmlFormatter().get_style_defs('.highlight')) # HTML output for the highlighted code: print('<div class="highlight">', result, '</div>')JSON Formatting
- Python: Pretty-print a JSON string using json.loads(x).
- Notepad++: Use the JSON Viewer plugin (available via Plugins Admin).