Colorfy Characters In Text Fields Using Regex And Markdown - jQuery Colorfy

Colorfy is a tiny jQuery plugin that has the ability to customize the coloring of characters within text fields based on specific Regex patterns or Markdown syntax.

Can be used to highlight user input to improve the readability of input fields or textarea elements.

See Also:

• Colorfy #Tags And @Mentions In An Editable Content - jQuery autotag

How to use it:

1. Include jQuery library and the Colorfy plugin on the page.

<!-- jQuery is required -->
<script src="/path/to/cdn/jquery.slim.min.js"></script>

<!-- Colorfy Text Fields Using Regex -->
<script src="/path/to/jquery.colorfy.js"></script>

<!-- Colorfy Text Fields Using Markdown -->
<script src="/path/to/jquery.colorfy.markdown.js"></script>

2. Colorfy your input field using Regex.

<input id="input" class="input" value="price $9.99"></input>

$.fn.colorfy.money = {
  "currency": /\$/m,
  "number": /[0-9.]+/m
};
$('#input').colorfy("money");

/* apply custom CSS styles */
.money .currency {
  color: red;
}

.money .number {
  color: green;
}

3. Colorfy your textarea using Markdown.

<textarea id="area" class="area">
  Please try for your self
  # This is title
  > This is inline block
  Some text should be **strong**, some text should be _italic_
  Some text should be ~~stroke through~~
  - list
  - list, too
  1. ordered list
  2. ordered list, too
  You can customize the style through a very simple `css` like this
  ``` css
       .markdown .orderedlist {
         color: maroon;
       }
       .markdown .unorderedlist {
         color: silver;
       }
  ```
</textarea>

$('#area').colorfy("markdown");

.markdown .title {
  color: red;
}

.markdown .block {
  color: green;
}

.markdown .strong {
  color: blue;
}

/* more styles here */

---

This awesome jQuery plugin is developed by victorteokw. For more Advanced Usages, please check the demo page or visit the official website.