Skip to content

Markdown Formatting

Jake Hoffner edited this page Aug 16, 2017 · 21 revisions

More and more often, I'm tripping over some badly formatted descriptions or comments. But there are many, many possibilities to make your text/code more readable! This article will concentrate on different features provided in Codewars' Editor and show some examples!

How can I change the format of my text/code?

Besides the classic HTML tags there are a plenty of shortcut, which provide the same functionality. Nevertheless, you can use HTML tags. The editing mode using these shortcuts is called Markdown. The following listing will show the most useful shortcuts.

Headlines

Using headlines is very useful, especially when you are creating a kata's description! The special character for headlines is the hash #. You just have to place 1-6 # in front of your text. The amount of # decides whether the headline is greater (1-3) or smaller (4-6).

Here some examples:

Headline 1

Headline 2

Headline 3

Headline 4

Headline 5
Headline 6

Note: There has to be a whitespace between the # and your text.

Bold and italic font

Often it is useful to highlight some text to show what is really important. Therefore, we are able to apply common formats (bold or italic) to what we have written. To write in an italic font you just have to place your text between asterisks * or underscores _. If you know this, writing in a bold font is very simple: Just just have to use two asterisk or underscores!

Keep this in mind when you write down some keywords the next time!

Here some more examples:

*value* or _value_ will look like this value

**value** or __value__ will look like this value

You can also combine them! Just use * or _ three times:

***value*** or ___value___ will look like this value

Code blocks

Imagine this: You're working on a difficult kata and you don't know why your code isn't working as expected. You've spent already 2 hours in console outputs to analyse your code, but you still don't have a clue what's wrong! Now you decide to post your solution as a comment. So you just copy and paste it into the comment box. Now your post looks something like this:

function myFunction(array) {

console.log('This is badly formatted');

}

Nobody enjoys reading this. And if the code is even more complex, nobody will be able to help you. So why don't we format this like code? Look, it works like this:

Inline Code Formatting

If you want to show the name of a variable, you just have to put it in between two single backticks. For example :

`var i` should equal 0

... gets formatted as ...

i should equal 0

Block Code Formatting

If you want to highlight your code like it's done when your coding Javascript, Python, C# or something else, you have to write it like this. Watch closely!

```javascript
console.log("This is Javascript code");
```

... will look like ...

console.log("This is Javascript code");

At Codewars.com this works for clojure, coffeescript, csharp, haskell, java, javascript, python and ruby, fsharp, c, cpp, etc.

Blockquotes

At some point you need to refer to something written by someone else. At this point you should use blockquotes! A blockquote is initialized with a > with a whitespace in front of your text. It will be shown like inlined text. You've already seen blockquotes. This page is using them a lot! Write them like this:

> Some blockquote

Note: There has to be a whitespace between the> and your text.


For Warriors

If you want to link a user to this page, feel free to use the following snippets:

@---: To increase the readability of comments or descriptions, see [this page in the github wiki](https://github.com/Codewars/codewars.com/wiki/Codewars-Editor-formatting).

For more information you may visit these official pages:

Clone this wiki locally