Jonnie Grieve Digital Media: Website Blog.

Archived Posts: July 2016 – Jonnie Grieve Digital Media posts.

How to add code to compatible forums with Markdown

I created this post as an attempt to explain forum markdown code for internet forums like those on TeamTreehouse. Forum Markdown is a set of special tags that make displaying code for web projects easy. It can also be used for formatting text and displaying images. But not everyone knows how to use them and of course there’s always a first time someone comes across it.

I hope this post will be useful for people who need help understanding Markdown and its many uses.

Text Formatting

First the easy bits; making posts italic and bold to add clarity to your post or reinforce a point.

If you want to embolden your text, you would **surround the text** in double asterisks, as shown here. Markdown will then display the text in bold.

Text in italics is just as straight forward, surrounding text *with one asterisk* on each side. Now, Markdown will display the text in italics.

bolditalics

Italic
Here’s a word that is *emphasised*

Bold
Here’s a word that is **bold**

Writing lists in Markdown

If you want to write lists, simply entering list items on freehand won’t work as the browser will simply treat it as a line space. Luckily Markdown has simple options for formatting lists to a web forum.

The syntax for an unordered list is as follows.

Unordered list
+ JavaScript
+ PHP
+ Java
+ CSS

Ordered lists work the same way. The difference is you add the number of the list item, where the + sign would otherwise be, before the text of the item itself.

Ordered List
1. Red
2. Green
3. Blue

Adding images to posts in Markdown

Images are a great way to add screenshots or alternative way of displaying code. To add images you need to provide a link to the image on the internet. This could be either on your own web server or a path given to by an image hosting website.

The syntax is as follows.

![alt text](/path/to/img.jpg “Title”)

With the images markdown syntax you can provide the absolute URL in () as well as the regular image alternative text and title attributes. The image should then show up correctly in your post.

e.g. ![alternative text](https://s19.postimg.org/6hk1k387j/wordpress_custom.png “Title text”)

Adding Hyperlinks to your post

This is an [example link](http://example.com/)

Syntax: The Syntax for adding links to posts via markdown is very straightforward. First, you add the text that you want to display on your link in square brackets. []. Next you need to provide the absolute URL of the link you want to add inside the regular brackets (). The URL must exist somewhere on a web server.

e.g. This is an [example link](http://www.teamtreehouse/)

Adding Code to the forum.

One of the best things about markdown in forums is its ability to add formatted text that reflects the computer language you want to display.

In order to display code, you need to wrap your code with 3 backticks (`) on the line before and after the code you write.

If you specify the language after the first set of backticks markdown will use the syntax highlighting appropriate to the language.

The languages available are numerous.

  • HTML
  • CSS
  • Ruby
  • JavaScript
  • Java
  • PHP
  • SQL
  • cSharp.

If you know the language name to type into the code, it’s probably available in Markdown although the language name is always option and you can simply display formatted regular text.

md-code

And that’s it.  You know the basics of adding code to a forum that uses Markdown code.  I hope this has been useful in showing you how easy it is to add forum markdown to compatible online forums of the internet. 🙂

Getting started with PostCSS

I’ve done Sass and seen the benefits of using that to write modular CSS.

But I’ve also recently managed to get familiar with something called PostCSS which is a PostProcesser to Sass’s PreProcessor.

Explaining PostCSS

PostCSS is a processing tool for writing CSS. But more than that, with added plugin functionality you can write CSS in new, as yet unsupported syntax that gets passed to the processing tool and returned as a format that the browser can understand. This works in much the same way that Sass works but it doesn’t do this on it’s own. It requires the use of plugins to provide the additional functionality.

What PostCSS does is it takes in a source file, and outputs a final file for use in deployment on web projects.

It uses a number of technologies to serve this technology, but one of the most popular is using the JavaScript Gulp Taskrunner.

Setting up PostCSS

By using Gulp you can add a serving gulpfile.js task runner in your project to work with your CSS files. There’s no need to use a different type of file. It all works with standard CSS files.

npm install -g gulp
npm install -g gulp-postcss

I’ve seen examples where the following npm installation commands work

npm install –save-dev gulp

But saving the dependencies globally worked for me.

I’m able then to verify that PostCSS is installed by adding two folders to my project. One directory for the source CSS that I write CSS and another for the processed files that I use to link to the website I deploy.

To make sure that PostCSS works first I require post CSS in the gulpfile

var post = require(‘gulp-postcss’);

Then I’ll write an gulp task that contains an empty array which will later contain arguments for each and every PostCSS plugin there is.

gulp.task(‘css’, function() {
      var processors = [

      ];

};

In this task we need to return the source and destination folders so Gulp knows which files to watch and process PostCSS.

return gulp.src(‘./src/*.css’)
     .pipe(postcss(processors) )
     .pipe(gulp.dest(‘./dest))l

});

In order to watch files constantly without running the Gulp task over and over in the console, you run the Gulp watch method in the default task.

gulp.task(‘default’, function() {
      //watch the css folder for changes in css file extension
      gulp.watch(‘./src/*.css’, [‘css’]);
});

Now I can run all my postCSS with as many edits to the CSS code I need without having to worry about running tasks all the time.

Fun with PostCSS

One of the great things about PostCSS is that it gives you a great incentive to use new CSS syntax so you can be prepared should it become available and supported in browsers. You won’t have to worry about browser support because you can write it and Gulp will convert the new syntax to regular CSS.

So you can safely play with the new CSS color function such as this example that uses the colour function to style hyperlinks.

In order to use the following Syntax we have to add the plugin to the gulpfile. This is as simple as requring the files in the same way that we required PostCSS as the top of the file

var cssnext = require(‘postcss-cssnext’);

And then add the argument to the prcoessorts array.

var processors = [

     cssnext

];

Now we can start to use some of the new syntax.

a:hover {
     color: rgba(70, 130, 180, 0.9);

}

which converts to the much m to ore well known RGBA function

a:hover {
     color: rgba(70, 130, 180, 0.9);

}

There’s also a new syntax out there for working with CSS media queries.

@media (768px <= width <= 1024px) {
        .container {
               max-width: 1024px;

        }

}

converts to

@media (min-width: 768px) and (max-width: 1024px) {
      .container {
      max-width: 1024px;

    }

}

I’ve love learning new things and there’s still a long way to go in learning what PostCSS can do, I’m exciting that I now have a new front end tool in my arsenal and I know I can easily develop websites in the newest CSS syntax without worrying about browser support.