1. Markdown Github
2. Markdown Github Table
3. Markup Language Github

GitHub is a popular platform for using version control with your web projects. GitHub Pages offers a free option for hosting basic static websites. In this video, learn about how to set up a GitHub. This document is the 11 October 2012 Working Draft of HTML: The Markup Language (an HTML language reference). If you’d like to comment on this document, the preferred means for commenting is to submit your comments through the HTML Working Group bugzilla database, with the Component field set to HTML5: The Markup Language. The doctype # T. A doctype (sometimes capitalized as “DOCTYPE”) is an special instruction which, for legacy reasons that have to do with processing modes in browsers, is a required part of any document in the HTML syntax; it must match the characteristics of one of the following three formats.

A variety of common markup showing how the theme styles them.

Header two

Header three

Header four

Header five

Header six

Blockquotes

Single line blockquote:

Stay hungry. Stay foolish.

Multi line blockquote with a cite reference:

People think focus means saying yes to the thing you’ve got to focus on. But that’s not what it means at all. It means saying no to the hundred other good ideas that there are. You have to pick carefully. I’m actually as proud of the things we haven’t done as the things I have done. Innovation is saying no to 1,000 things.

Steve Jobs — Apple Worldwide Developers’ Conference, 1997

Tables

Definition Lists

Definition List Title

Definition list division.

Startup

A startup company or startup is a company or temporary organization designed to search for a repeatable and scalable business model.

#dowork

Coined by Rob Dyrdek and his personal body guard Christopher “Big Black” Boykins, “Do Work” works as a self motivator, to motivating your friends.

Do It Live

I’ll let Bill O’Reilly explain this one.

Unordered Lists (Nested)

• List item one
  • List item one
    • List item one
    • List item two
    • List item three
    • List item four
  • List item two
  • List item three
  • List item four
• List item two
• List item three
• List item four

Ordered List (Nested)

1. List item one
   1. List item one
      1. List item one
      2. List item two
      3. List item three
      4. List item four
   2. List item two
   3. List item three
   4. List item four
2. List item two
3. List item three
4. List item four

Forms

Buttons

Make any link standout more when applying the .btn class.

Notices

Watch out! This paragraph of text has been emphasized with the {: .notice} class.

Watch out! This paragraph of text has been emphasized with the {: .notice--primary} class.

Watch out! This paragraph of text has been emphasized with the {: .notice--info} class.

Watch out! This paragraph of text has been emphasized with the {: .notice--warning} class.

Watch out! This paragraph of text has been emphasized with the {: .notice--success} class.

Watch out! This paragraph of text has been emphasized with the {: .notice--danger} class.

HTML Tags

Address Tag

Anchor Tag (aka. Link)

This is an example of a link.

Abbreviation Tag

The abbreviation CSS stands for “Cascading Style Sheets”.

Cite Tag

“Code is poetry.” —Automattic

Code Tag

You will learn later on in these tests that word-wrap: break-word; will be your best friend.

Strike Tag

This tag will let you strikeout text.

Emphasize Tag

The emphasize tag should italicize text.

Insert Tag

This tag should denote text.

Keyboard Tag

This scarcely known tag emulates keyboard text, which is usually styled like the <code> tag.

Preformatted Tag

This tag styles large blocks of code.

Quote Tag

Developers, developers, developers… –Steve Ballmer

Strong Tag

This tag shows bold text.

Subscript Tag

Getting our science styling on with H₂O, which should push the “2” down.

Superscript Tag

Still sticking with science and Albert Einstein’s E = MC², which should lift the 2 up.

Variable Tag

This allows you to denote variables.

If you have just started with GitHub pages you might be wondering how can you serve dynamic content. Well, you cannot really as the pages are static.However this should not stop you from writing in JavaScript and ending up with a Single Page Application.

The first step in that direction is to see how to add JavaScript and jQuery to the pages.

Actually, after we went through some experimental steps it is quite straight forward. After all we can embed any HTML in our Markdown files so we can also embed scripttags. If this is enough for you, you can now go ahead and start adding JavaScript code to your pages.

Step-by-step guide

If you are less of a JavaScript maven, then you might want to follow use step-by-step.

Embedded JavaScript

In the first example we create a Markdown file called js.md In that Markdown file we put an HTML div element with an id 'text'.Later in that file we add a script tag and inside we write some simple JavaScript code. This code will locate the element that has the id 'text', or divelement, and inside the element it will put the text that appears on the right-hand side of the assignment.

The main thing you need to remember here is that the JavaScript code must come at the end so by the time it is executed the DOM is ready. Otherwise the JavaScript code will not find the HTML element.

examples/github/js.md

jQuery loaded from external file

Our next step is to use jQuery instead of vanilla JavaScript.For this we only need to load jQuery from its CDN.If we are already loading an external JavaScript file, I though we can also move our code to an external file.So I created the demo.js file loaded it using another script tag.

This time we can put the script tags anywhere we like as the jQuery callback function will be only executed when the DOM is ready.The only limitation is that we need to load our code after we have loaded jQuery itself.

examples/github/jquery.md

In our jQuery code we have an anonymous callback function that will be called when the HTML was loaded and the DOM is ready. That's what $().ready does.Inside the function we use the $('#text') expression to locate the element with id 'text' and then we use the html method to set the content of the element.(It is the same as innerHTML in vanilla JavaScript.)

examples/github/demo.js

Loading JSON data from server

Finally, we would like to get some data from the server. As we cannot run anything on the server we cannot get dynamic data,but we can store the data in JSON files and load them using the Ajax methods provided by jQuery.

In this example the Markup file is effectively the same as in our previous examples.

examples/github/json.md

In the jQuery code we use the getJSON method to fetch the data.json file from the server.This means, first the HTML file that was generated from the Markdown file will be loaded. Then the browser will load jQuery followed by our code.Then, once everything is ready, our code runs and loads the JSON file from the server.

The first parameter of getJSON is the URL of the JSON file we would like to load. The second parameter is an anonymous callback function that will be executed when we get the response from the server. Then the jQuery will call our anonymous function and it will pass the content of the JSON file after it was converted to a JavaScript object.

Markdown Github

console.log(data); was only added for debugging.

In the last JQuery code, in $('#text').html(data['text']); the first part $('#text') will locate the element with the id 'text'.The html method will set the content of the element to the value we pass to it which in our case is data['text'], the value of the 'text' key that arrived from the JSON file.

examples/github/json.js

This is the data.json

examples/github/data.json

Conclusion

Once you tried it and made it work, it seems to be quite straight forward to embed or include JavaScript and jQuery code.We now need to turn to more complex tasks.

Markdown Github Table

Published on 2018-06-19

Markup Language Github