# Using the markItUp JavaScript plugin

> Add the markItUp plugin to a web page to give text areas HTML or wiki formatting buttons, with setup code.

Source: https://helpcenter.ruachost.com/developers/web-development/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](http://markitup.jaysalvat.com/examples)

### Using the markItUp plugin

Follow these steps to use the plugin on your website:

1. Go to [markItUp downloads](http://markitup.jaysalvat.com/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](http://markitup.jaysalvat.com/)
- Online documentation: [markItUp documentation](http://markitup.jaysalvat.com/documentation)