Custom Markup Code - Part 1

Chiggins - 2007-12-01 18:28:38 in PHP
Category: PHP
Reviewed by: Chiggins   
Reviewed on: Nov 01 2008
1106

If you have ever been to a forum, you have noticed that members have the ability to format their text. They format their post with the use of markup codes. You might have seen some of these before, and they very closely resemble HTML code.

In Part 1 of the Custom Markup Code series, we will set up the function to convert markup to HTML, and then go over basic formatting, such as bolds, italics, underline, size, and color.

Before we dive into code, we need to learn a bit about markup. Its format is very similar to normal HTML. When a member types a message using markup codes, its stored in the datebase as markup. But when you go to view a post, when the markup is returned from the databse, its converted to HTML, and then displayed.

For an example, we will use a bold statement.

 
This is a [b]bold[/b] statement

Now, when this is fetched from the database, and using our special markup conversion function, it would be outputted as:

 
This is a <strong>bold</strong> statement

Now, were are going to take a look at our base function to convert markup.

 
function convert_markup( $sString ) {
    $string = $sString;
    
    // Markup conversion done here
 
    // Create line breaks
    $string = nl2br( $string );
 
    // Output formatted text
    return $string;
}

Now there is our basic template. The function "convert_markup" will do what it says, convert the text to markup. It takes one argument, $sString. That would be the text to be converted. No markup codes are in the function yet, because we will go over those on the next page. After all the markup is converted, it takes any new lines, turns them into line breaks, and returns the formatted string.

Now, here are some markup codes you would put inside the function. The markup codes are found using Regular Expressions. Because explaining Regular Expressions would completely throw this article off course, I recommend looking them up on Regular-Expressions.info.

 
// Bold
$string = preg_replace('/\[b\](.*?)\[\/b\]/is', '<strong>$1</strong>', $string);
// Italicize
$string = preg_replace('/\[i\](.*?)\[\/i\]/is', '<em>$1</em>', $string);
// Underline
$string = preg_replace('/\[u\](.*?)\[\/u\]/is', '<span style="text-decoration: underline;">$1</span>', $string);
// Header 1
$string = preg_replace('/\[h1\](.*?)\[\/h1\]/is' , '<h1>$1</h1>', $string);
// Header 2
$string = preg_replace('/\[h2\](.*?)\[\/h2\]/is' , '<h2>$1</h2>', $string);
// Header 3
$string = preg_replace('/\[h3\](.*?)\[\/h3\]/is' , '<h3>$1</h3>', $string);
// Size
$string = preg_replace('/\[size=(.*?)\](.*?)\[\/size\]/is' , '<span style="font-size: $1em;">$2</span>', $string);
// Color
$string = preg_replace('/\[color=(.*?)\](.*?)\[\/color\]/is' , '<span style="color: $1;">$2</span>', $string);

Now there are a couple examples of markup code conversions. The preg_replace function searches for the first argument, replaces the first with the second argument, and the third argument is what should be searched.

Well, here we learned what markup codes are, how they are stored, processed, then outputted. We created a function that converts the markup code, and we also looked at how the markup is converted using Regular Expressions.

In Part 2 we will cover some more advanced markup codes, such as images, movies, and lists.

 
function convert_markup( $sString ) {
    $string = $sString;
    
    // Markup conversion done here
    // Bold
    $string = preg_replace('/\[b\](.*?)\[\/b\]/is', '<strong>$1</strong>', $string);
    // Italicize
    $string = preg_replace('/\[i\](.*?)\[\/i\]/is', '<em>$1</em>', $string);
    // Underline
    $string = preg_replace('/\[u\](.*?)\[\/u\]/is', '<span style="text-decoration: underline;">$1</span>', $string);
    // Header 1
    $string = preg_replace('/\[h1\](.*?)\[\/h1\]/is' , '<h1>$1</h1>', $string);
    // Header 2
    $string = preg_replace('/\[h2\](.*?)\[\/h2\]/is' , '<h2>$1</h2>', $string);
    // Header 3
    $string = preg_replace('/\[h3\](.*?)\[\/h3\]/is' , '<h3>$1</h3>', $string);
    // Size
    $string = preg_replace('/\[size=(.*?)\](.*?)\[\/size\]/is' , '<span style="font-size: $1em;">$2</span>', $string);
    // Color
    $string = preg_replace('/\[color=(.*?)\](.*?)\[\/color\]/is' , '<span style="color: $1;">$2</span>', $string);
    // Create line breaks
    $string = nl2br( $string );
 
    // Output formatted text
    return $string;
}