{"id":528,"date":"2015-01-21T12:45:26","date_gmt":"2015-01-21T12:45:26","guid":{"rendered":"http:\/\/magniwp.ecko.me\/?page_id=528"},"modified":"2015-01-21T12:45:26","modified_gmt":"2015-01-21T12:45:26","slug":"syntax-highlighter","status":"publish","type":"page","link":"https:\/\/crownandluxury.com\/?page_id=528","title":{"rendered":"Syntax Highlighter"},"content":{"rendered":"\n

Onyx includes our ‘Ecko Blocks’ plugin, which introduces additional features to the Code core Gutenberg block. These features include language specific syntax highlighting, multiple color schemes, line numbers, and support for popular languages (complete list can be found below).<\/p>\n\n\n\n

Color Schemes<\/h2>\n\n\n\n
\/\/ This is an example of the 'Light' color scheme\n\nfunction wp_get_time(){\n    if(get_theme_mod('layout_use_custom_date_format', false)){\n        the_date();\n    }else{\n        the_time('jS F Y ');\n    }\n}<\/code><\/pre>\n\n\n\n
\/\/ This is an example of the 'Dark' color scheme.\n\nfunction wp_get_time(){\n    if(get_theme_mod('layout_use_custom_date_format', false)){\n        the_date();\n    }else{\n        the_time('jS F Y ');\n    }\n}<\/code><\/pre>\n\n\n\n
\/\/ This is an example of the 'High Contrast' color scheme.\n\nfunction wp_get_time(){\n    if(get_theme_mod('layout_use_custom_date_format', false)){\n        the_date();\n    }else{\n        the_time('jS F Y ');\n    }\n}<\/code><\/pre>\n\n\n\n
Line Numbers<\/h2>\n\n\n\n
If you wish to display line numbers along with a Code block this an be enabled via the included options. Below is an example Code block using line numbers with the Dark color scheme.<\/p>\n\n\n\n
const http = require('http');\n\nconst hostname = '127.0.0.1';\nconst port = 3000;\n\nconst server = http.createServer((req, res) => {\n  res.statusCode = 200;\n  res.setHeader('Content-Type', 'text\/plain');\n  res.end('Hello World\\n');\n});\n\nserver.listen(port, hostname, () => {\n  console.log(`Server running at http:\/\/${hostname}:${port}\/`);\n});<\/code><\/pre>\n\n\n\n
Supported Languages<\/h2>\n\n\n\n
\n
\n
  • Apache<\/li>
  • Bash<\/li>
  • C#<\/li>
  • C++<\/li>
  • CSS<\/li>
  • CoffeeScript<\/li>
  • Diff<\/li>
  • HTML\/XML<\/li>
  • HTTP<\/li>
  • Ini<\/li>
  • JSON<\/li>
  • Java<\/li>
  • JavaScript<\/li>
  • Makefile<\/li>
  • Markdown<\/li>
  • Nginx<\/li>
  • Objective-C<\/li>
  • PHP<\/li>
  • Perl<\/li>
  • Python<\/li><\/ul>\n<\/div>\n\n\n\n
    \n
    • Ruby<\/li>
    • SQL<\/li>
    • DNS Zone File<\/li>
    • Dart<\/li>
    • Dockerfile<\/li>
    • Elm<\/li>
    • Erlang<\/li>
    • Go<\/li>
    • Haml<\/li>
    • Handlebars<\/li>
    • Haskell<\/li>
    • Haxe<\/li>
    • Less<\/li>
    • Rust<\/li>
    • SCSS<\/li>
    • Swift<\/li>
    • Haxe<\/li>
    • Typescript<\/li>
    • YAML<\/li><\/ul>\n<\/div>\n<\/div>\n\n\n\n
      Below is a preview of some of the above languages being highlighted.<\/p>\n\n\n\n
      HTML \/ CSS<\/h3>\n\n\n\n
      <!DOCTYPE html>\n<html>\n    <body>\n        <h1>My First Heading<\/h1>\n        <p>My first paragraph.<\/p>\n    <\/body>\n<\/html><\/code><\/pre>\n\n\n\n
      .wrapper{\n    max-width: 1400px;\n    width: 100%;\n    @media (max-width: 1470px) {\n        padding: 0 2.5%;\n    }\n}<\/code><\/pre>\n\n\n\n
      Python<\/h3>\n\n\n\n
      def openFile(path):\n    file = open(path, \"r\")\n    content = file.read()\n    file.close()\n    return content<\/code><\/pre>\n\n\n\n
      Ruby<\/h3>\n\n\n\n
      def self.consume_front(str, size)\n    str[0..size] = ''\n    str.lstrip!\nend<\/code><\/pre>\n\n\n\n
      Bash<\/h3>\n\n\n\n
      ls -la \/home<\/code><\/pre>\n\n\n\n
      PHP<\/h3>\n\n\n\n
      function ivy_get_time(){\n    if(get_theme_mod('layout_use_custom_date_format', false)){\n        the_date();\n    }else{\n        the_time('jS F Y ');\n    }\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
      Magni comes included with a Syntax Highlighter for code blocks, using RainbowJS. As well as generic pattern matching, it has support for the following languages.<\/p>\n","protected":false},"author":1,"featured_media":687,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"open","template":"","meta":{"footnotes":""},"class_list":["post-528","page","type-page","status-publish","has-post-thumbnail","hentry"],"yoast_head":"\nSyntax Highlighter - Crown an Luxury Timepieces<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/crownandluxury.com\/?page_id=528\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Syntax Highlighter - Crown an Luxury Timepieces\" \/>\n<meta property=\"og:description\" content=\"Magni comes included with a Syntax Highlighter for code blocks, using RainbowJS. As well as generic pattern matching, it has support for the following languages.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/crownandluxury.com\/?page_id=528\" \/>\n<meta property=\"og:site_name\" content=\"Crown an Luxury Timepieces\" \/>\n<meta property=\"og:image\" content=\"https:\/\/crownandluxury.com\/wp-content\/uploads\/2015\/01\/patterns_bg2-1680x714-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1680\" \/>\n\t<meta property=\"og:image:height\" content=\"714\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/crownandluxury.com\/?page_id=528\",\"url\":\"https:\/\/crownandluxury.com\/?page_id=528\",\"name\":\"Syntax Highlighter - Crown an Luxury Timepieces\",\"isPartOf\":{\"@id\":\"https:\/\/crownandluxury.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/crownandluxury.com\/?page_id=528#primaryimage\"},\"image\":{\"@id\":\"https:\/\/crownandluxury.com\/?page_id=528#primaryimage\"},\"thumbnailUrl\":\"https:\/\/crownandluxury.com\/wp-content\/uploads\/2015\/01\/patterns_bg2-1680x714-1.jpg\",\"datePublished\":\"2015-01-21T12:45:26+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/crownandluxury.com\/?page_id=528#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/crownandluxury.com\/?page_id=528\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/crownandluxury.com\/?page_id=528#primaryimage\",\"url\":\"https:\/\/crownandluxury.com\/wp-content\/uploads\/2015\/01\/patterns_bg2-1680x714-1.jpg\",\"contentUrl\":\"https:\/\/crownandluxury.com\/wp-content\/uploads\/2015\/01\/patterns_bg2-1680x714-1.jpg\",\"width\":1680,\"height\":714},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/crownandluxury.com\/?page_id=528#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/crownandluxury.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Syntax Highlighter\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/crownandluxury.com\/#website\",\"url\":\"https:\/\/crownandluxury.com\/\",\"name\":\"Crown an Luxury Timepieces\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/crownandluxury.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Syntax Highlighter - Crown an Luxury Timepieces","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/crownandluxury.com\/?page_id=528","og_locale":"en_US","og_type":"article","og_title":"Syntax Highlighter - Crown an Luxury Timepieces","og_description":"Magni comes included with a Syntax Highlighter for code blocks, using RainbowJS. As well as generic pattern matching, it has support for the following languages.","og_url":"https:\/\/crownandluxury.com\/?page_id=528","og_site_name":"Crown an Luxury Timepieces","og_image":[{"width":1680,"height":714,"url":"https:\/\/crownandluxury.com\/wp-content\/uploads\/2015\/01\/patterns_bg2-1680x714-1.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/crownandluxury.com\/?page_id=528","url":"https:\/\/crownandluxury.com\/?page_id=528","name":"Syntax Highlighter - Crown an Luxury Timepieces","isPartOf":{"@id":"https:\/\/crownandluxury.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/crownandluxury.com\/?page_id=528#primaryimage"},"image":{"@id":"https:\/\/crownandluxury.com\/?page_id=528#primaryimage"},"thumbnailUrl":"https:\/\/crownandluxury.com\/wp-content\/uploads\/2015\/01\/patterns_bg2-1680x714-1.jpg","datePublished":"2015-01-21T12:45:26+00:00","breadcrumb":{"@id":"https:\/\/crownandluxury.com\/?page_id=528#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/crownandluxury.com\/?page_id=528"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/crownandluxury.com\/?page_id=528#primaryimage","url":"https:\/\/crownandluxury.com\/wp-content\/uploads\/2015\/01\/patterns_bg2-1680x714-1.jpg","contentUrl":"https:\/\/crownandluxury.com\/wp-content\/uploads\/2015\/01\/patterns_bg2-1680x714-1.jpg","width":1680,"height":714},{"@type":"BreadcrumbList","@id":"https:\/\/crownandluxury.com\/?page_id=528#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/crownandluxury.com\/"},{"@type":"ListItem","position":2,"name":"Syntax Highlighter"}]},{"@type":"WebSite","@id":"https:\/\/crownandluxury.com\/#website","url":"https:\/\/crownandluxury.com\/","name":"Crown an Luxury Timepieces","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/crownandluxury.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/crownandluxury.com\/index.php?rest_route=\/wp\/v2\/pages\/528","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/crownandluxury.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/crownandluxury.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/crownandluxury.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/crownandluxury.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=528"}],"version-history":[{"count":0,"href":"https:\/\/crownandluxury.com\/index.php?rest_route=\/wp\/v2\/pages\/528\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/crownandluxury.com\/index.php?rest_route=\/wp\/v2\/media\/687"}],"wp:attachment":[{"href":"https:\/\/crownandluxury.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=528"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}