Using the markItUp JavaScript plugin

Learn how to integrate the markItUp JavaScript plugin into your website, including setup instructions and code examples.

About the markItUp plugin

The markItUp plugin is a JavaScript-based tool that adds markup editing capabilities to any <textarea> element on a web page. You can use it to format text as HTML, add Wiki syntax, and more.

See examples in action: markItUp examples

Using the markItUp plugin

Follow these steps to use the plugin on your website:

1. Go to markItUp downloads in your browser.
2. Download the latest .zip release and extract the files. You should have a folder named latest.
3. Upload the latest folder to the public_html directory of your ruachost.com account using FTP or SCP.
4. Create an HTML page that loads the plugin. Here’s an example setup:

<html>
  <head>
    <!-- Load jQuery and markItUp JavaScript files -->
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
    <script type="text/javascript" src="markitup/jquery.markitup.js"></script>
    <!-- Load default plugin settings -->
    <script type="text/javascript" src="markitup/sets/default/set.js"></script>
    <!-- Load CSS files -->
    <link rel="stylesheet" type="text/css" href="markitup/skins/markitup/style.css" />
    <link rel="stylesheet" type="text/css" href="markitup/sets/default/style.css" />
    <!-- Link the textarea to markItUp -->
    <script type="text/javascript">
      $(document).ready(function() {
        $("#myEditBox").markItUp(mySettings);
      });
    </script>
  </head>
  <body>
    <textarea id="myEditBox"></textarea>
  </body>
</html>

• Replace #myEditBox with the ID of your <textarea> element.
• You can customize the plugin settings by editing the set.js configuration file.

More information

• General plugin info: markItUp
• Online documentation: markItUp documentation