DOCTYPE html html lang en head meta charset UTF 8 meta name viewport content width device width initial scale 1 0 title Ace Editor Custom Highlight title style Add custom CSS for the hash word color ace_hash highlight color red Set any color you like font weight bold editor height 300px width 100 style head body Ace Editor Script script src https cdnjs cloudflare com ajax libs ace 1 36 2 ace min js script JavaScript mode for Ace script src https ajaxorg github io ace builds src noconflict mode javascript js script script src https cdnjs cloudflare com ajax libs ace 1 36 2 mode markdown min js script div id editor var foo 1 for let i 0 i 10 i var boo 2 test ddd div script Initialize Ace editor var editor ace edit editor editor setTheme ace theme monokai Define custom highlight rules var CustomHighlightRules function var JavaScriptHighlightRules ace require ace mode javascript_highlight_rules JavaScriptHighlightRules Inherit all existing JavaScript highlight rules var javascriptRules new JavaScriptHighlightRules Define custom rules for words starting with this rules javascriptRules getRules Get the existing rules Insert a rule to highlight words starting with this rules start unshift token hash highlight Assign a custom token regex Regex to match words starting with Use the custom rules for highlighting this getRules function return this rules Define a custom mode var CustomMode function ace require ace mode javascript Mode call this this HighlightRules CustomHighlightRules Inherit the Mode class from JavaScript mode ace require ace lib oop inherits CustomMode ace require ace mode javascript Mode Add custom CSS for the hash highlight token var customCss document createElement style customCss innerHTML ace_hash highlight color red font weight bold document head appendChild customCss Apply the custom mode to the editor var customMode new CustomMode editor session setMode customMode Set the custom mode to the editor script body html DOCTYPE html html lang en head meta charset UTF 8 meta name viewport content width device width initial scale 1 0 title Ace Editor Custom Highlight Markdown title style body min height 500px Add custom CSS for the markdown title colors ace_heading 1 color red font weight bold ace_heading 2 color green font weight bold ace_heading other color blue font weight bold editor height 300px width 100 style head body Ace Editor Script script src https ajaxorg github io ace builds src noconflict ace js script Markdown mode for Ace script src https ajaxorg github io ace builds src noconflict mode markdown js script div id editor style min height 500px Level 1 title Level 2 title Level 3 title Level 4 title Regular text here chapter title hashtag should be highlighted not treated as a title These are bold words is this __important__ this is inline code var 2 cats like milk This is a block of code title https www example com bob like point1 point2 div script Initialize Ace editor var editor ace edit editor editor setTheme ace theme monokai Define custom highlight rules for Markdown var CustomMarkdownHighlightRules function var MarkdownHighlightRules ace require ace mode markdown_highlight_rules MarkdownHighlightRules Inherit all existing Markdown highlight rules var markdownRules new MarkdownHighlightRules Define custom rules for Markdown headers based on the number of this rules markdownRules getRules Get the existing rules Insert rules to highlight titles based on the number of this rules start unshift token function val let numhashes val match g length if numhashes 1 return heading 1 Level 1 heading else if numhashes 2 return heading 2 Level 2 heading else return heading other All other levels and beyond regex 1 6 s Match 1 6 characters followed by a space Markdown headers Keep the custom rules for hash highlight this rules start unshift token hash highlight Custom token for hashtags regex Regex to match words starting with Return the updated rules this getRules function return this rules Define a custom mode extending Markdown mode var CustomMarkdownMode function ace require ace mode markdown Mode call this Call the parent mode Markdown this HighlightRules CustomMarkdownHighlightRules Use the custom highlight rules Inherit the Mode class from Markdown mode ace require ace lib oop inherits CustomMarkdownMode ace require ace mode markdown Mode Add custom CSS for the title highlighting tokens var customCss document createElement style customCss innerHTML ace_heading 1 color red font weight bold ace_heading 2 color green font weight bold ace_heading other color blue font weight bold ace_hash highlight color purple font weight bold background color yellow document head appendChild customCss Apply the custom Markdown mode to the editor var customMarkdownMode new CustomMarkdownMode editor session setMode customMarkdownMode Set the custom mode to the editor script body html
axorg github io ace builds src noconflict ace js script Markdown mode for Ace script src https ajaxorg github io ace builds src noconflict mode markdown js script div id editor style min height 500px Level 1 title Level 2 title Level 3 title Level 4 title Regular text here chapter title hashtag should be highlighted not treated as a title These are bold words is this __important__ this is inline code var 2 cats like milk This is a block of code title https www example com bob like point1 point2 div script Initialize Ace editor var editor ace edit editor editor setTheme ace theme monokai Define custom highlight rules for Markdown var CustomMarkdownHighlightRules function var MarkdownHighlightRules ace require ace mode markdown_highlight_rules MarkdownHighlightRules Inherit all existing Markdown highlight rules var markdownRules new MarkdownHighlightRules Define custom rules for Markdown headers based on the number of this rules markdownRules getRules Get the existing rules Insert rules to highlight titles based on the number of this rules start unshift token function val let numhashes val match g length if numhashes 1 return heading 1 Level 1 heading else if numhashes 2 return heading 2 Level 2 heading else return heading other All other levels and beyond regex 1 6 s Match 1 6 characters followed by a space Markdown headers Keep the custom rules for hash highlight this rules start unshift token hash highlight Custom token for hashtags regex Regex to match words starting with Return the updated rules this getRules function return this rules Define a custom mode extending Markdown mode var CustomMarkdownMode function ace require ace mode markdown Mode call this Call the parent mode Markdown this HighlightRules CustomMarkdownHighlightRules Use the custom highlight rules Inherit the Mode class from Markdown mode ace require ace lib oop inherits CustomMarkdownMode ace require ace mode markdown Mode Add custom CSS for the title highlighting tokens var customCss document createElement style customCss innerHTML ace_heading 1 color red font weight bold ace_heading 2 color green font weight bold ace_heading other color blue font weight bold ace_hash highlight color purple font weight bold background color yellow document head appendChild customCss Apply the custom Markdown mode to the editor var customMarkdownMode new CustomMarkdownMode editor session setMode customMarkdownMode Set the custom mode to the editor script body html