Quick tip: Improve your code blocks with a language tag

darlantc

Darlan T贸dero ten Caten

Posted on December 6, 2020

Quick tip: Improve your code blocks with a language tag

Today I learned something very useful about code blocks on Dev.to (and it probably works on other blogging platforms too) that I immediately wanted to share with the community.

To explain this let me first show the result without the language tag:

func calculateHourlyPay(for workingHours: Int, at dayOfWeek: String) -> Double {
    let paymentPerHour: Double = 30

    let normalHours: Double = workingHours > 8 ? 8 : Double(workingHours)
    let overtimeHours = workingHours > 8 ? Double(workingHours - 8) : 0

    var payment: Double = 0

    if dayOfWeek == "sun" {
        payment = normalHours * paymentPerHour * 2
        payment += overtimeHours * paymentPerHour * 2 * 1.5
    } else if dayOfWeek == "sat" {
        payment = normalHours * paymentPerHour * 1.2
        payment += overtimeHours * paymentPerHour * 1.2 * 1.5
    } else {
        payment = normalHours * paymentPerHour
        payment += overtimeHours * paymentPerHour * 1.5
    }

    return payment
}
Enter fullscreen mode Exit fullscreen mode

Notice how the code was misinterpreted, with little color distinction. The code block did not understand that I wrote code in Swift. Let's help it understand it by adding the language tag:

func calculateHourlyPay(for workingHours: Int, at dayOfWeek: String) -> Double {
    let paymentPerHour: Double = 30

    let normalHours: Double = workingHours > 8 ? 8 : Double(workingHours)
    let overtimeHours = workingHours > 8 ? Double(workingHours - 8) : 0

    var payment: Double = 0

    if dayOfWeek == "sun" {
        payment = normalHours * paymentPerHour * 2
        payment += overtimeHours * paymentPerHour * 2 * 1.5
    } else if dayOfWeek == "sat" {
        payment = normalHours * paymentPerHour * 1.2
        payment += overtimeHours * paymentPerHour * 1.2 * 1.5
    } else {
        payment = normalHours * paymentPerHour
        payment += overtimeHours * paymentPerHour * 1.5
    }

    return payment
}
Enter fullscreen mode Exit fullscreen mode

Wow, much better!

How to do this? Here's how I wrote the first code block without a language tag:
without language tag.jpg

Now the enhanced version with a language tag:
with language tag.jpg

Conclusion

Code blocks are great and very useful for writing sample code in technical articles. But sometimes it can't understand the code language and it is better to explicitly indicate it by adding a language tag.

馃挅 馃挭 馃檯 馃毄
darlantc
Darlan T贸dero ten Caten

Posted on December 6, 2020

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related