Add custom JSON lexer and highlighting color scheme (opensearch-proje…

…ct#7892)

* Add custom JSON lexer and highlighting color scheme

Signed-off-by: Fanit Kolchina <[email protected]>

* Update _getting-started/quickstart.md

Co-authored-by: Nathan Bower <[email protected]>
Signed-off-by: kolchfa-aws <[email protected]>

---------

Signed-off-by: Fanit Kolchina <[email protected]>
Signed-off-by: kolchfa-aws <[email protected]>
Co-authored-by: Nathan Bower <[email protected]>

_getting-started/communicate.md

@@ -21,7 +21,7 @@ When sending cURL requests in a terminal, the request format varies depending on
 If you're not using the Security plugin, send the following request:
 
 ```bash
-curl -XGET "http://localhost:9200/_cluster/health"
+curl -X GET "http://localhost:9200/_cluster/health"
 ```
 {% include copy.html %}
 
@@ -37,7 +37,7 @@ The default username is `admin`, and the password is set in your `docker-compose
 OpenSearch generally returns responses in a flat JSON format by default. For a human-readable response body, provide the `pretty` query parameter:
 
 ```bash
-curl -XGET "http://localhost:9200/_cluster/health?pretty"
+curl -X GET "http://localhost:9200/_cluster/health?pretty"
 ```
 {% include copy.html %}
 
@@ -46,7 +46,7 @@ For more information about `pretty` and other useful query parameters, see [Comm
 For requests that contain a body, specify the `Content-Type` header and provide the request payload in the `-d` (data) option:
 
 ```json
-curl -XGET "http://localhost:9200/students/_search?pretty" -H 'Content-Type: application/json' -d'
+curl -X GET "http://localhost:9200/students/_search?pretty" -H 'Content-Type: application/json' -d'
 {
   "query": {
     "match_all": {}
@@ -135,7 +135,7 @@ OpenSearch responds with the field `type` for each field:
 
 OpenSearch mapped the numeric fields to the `float` and `long` types. Notice that OpenSearch mapped the `name` text field to `text` and added a `name.keyword` subfield mapped to `keyword`. Fields mapped to `text` are analyzed (lowercased and split into terms) and can be used for full-text search. Fields mapped to `keyword` are used for exact term search.
 
-OpenSearch mapped the `grad_year` field to `long`. If you want to map it to the `date` type instead, you need to [delete the index](#deleting-an-index) and then recreate it, explicitly specifying the mappings. For instructions on how to explicitly specify mappings, see [Index settings and mappings](#index-mappings-and-settings).
+OpenSearch mapped the `grad_year` field to `long`. If you want to map it to the `date` type instead, you need to [delete the index](#deleting-an-index) and then recreate it, explicitly specifying the mappings. For instructions on how to explicitly specify mappings, see [Index mappings and settings](#index-mappings-and-settings).
 
 ## Searching for documents
 

_getting-started/quickstart.md

@@ -10,7 +10,9 @@ redirect_from:
 
 # Installation quickstart
 
-Get started using OpenSearch and OpenSearch Dashboards by deploying your containers with [Docker](https://www.docker.com/). Before proceeding, you need to [get Docker](https://docs.docker.com/get-docker/) and [Docker Compose](https://github.com/docker/compose) installed on your local machine. 
+To quickly get started using OpenSearch and OpenSearch Dashboards, deploy your containers using [Docker](https://www.docker.com/). For all installation guides, see [Install and upgrade OpenSearch]({{site.url}}{{site.baseurl}}/install-and-configure/).
+
+Before proceeding, you need to install [Docker](https://docs.docker.com/get-docker/) and [Docker Compose](https://github.com/docker/compose) on your local machine. 
 
 The Docker Compose commands used in this guide are written with a hyphen (for example, `docker-compose`). If you installed Docker Desktop on your machine, which automatically installs a bundled version of Docker Compose, then you should remove the hyphen. For example, change `docker-compose` to `docker compose`.
 {: .note}

_plugins/custom-lexer.rb

@@ -0,0 +1,18 @@
+require 'jekyll'
+require 'rouge'
+
+module Rouge
+  module Lexers
+    class CustomJSON < JSON
+      tag 'json'
+
+      prepend :root do
+        rule %r/\b(GET|PUT|POST|DELETE|PATCH|HEAD)\b/, Keyword::Reserved
+      end
+    end
+  end
+end
+
+Jekyll::Hooks.register :site, :pre_render do |site|
+  # Ensure the custom lexer is loaded
+end

_sass/color_schemes/opensearch.scss

@@ -119,7 +119,7 @@ $media-queries: (
   color: $purple-100;
 } // operator //
 .highlight .x {
-  color: #cb4b16;
+  color: #a31521;
 } // other //
 .highlight .p {
   color: $grey-dk-300;
@@ -137,7 +137,7 @@ $media-queries: (
   color: $purple-000;
 } // comment.special //
 .highlight .gd {
-  color: #2aa198;
+  color: #279a8f;
 } // generic.deleted //
 .highlight .ge {
   font-style: italic;
@@ -147,7 +147,7 @@ $media-queries: (
   color: #dc322f;
 } // generic.error //
 .highlight .gh {
-  color: #cb4b16;
+  color: #a31521;
 } // generic.heading //
 .highlight .gi {
   color: $purple-000;
@@ -163,13 +163,13 @@ $media-queries: (
   color: $grey-dk-300;
 } // generic.strong //
 .highlight .gu {
-  color: #cb4b16;
+  color: #a31521;
 } // generic.subheading //
 .highlight .gt {
   color: $grey-dk-300;
 } // generic.traceback //
 .highlight .kc {
-  color: #cb4b16;
+  color: #a31521;
 } // keyword.constant //
 .highlight .kd {
   color: #268bd2;
@@ -190,13 +190,13 @@ $media-queries: (
   color: $grey-dk-300;
 } // literal.date //
 .highlight .m {
-  color: #2aa198;
+  color: #2aa18e;
 } // literal.number //
 .highlight .s {
-  color: #2aa198;
+  color: #2aa18e;
 } // literal.string //
 .highlight .na {
-  color: #555;
+  color: #0451a3;
 } // name.attribute //
 .highlight .nb {
   color: #b58900;
@@ -205,28 +205,28 @@ $media-queries: (
   color: #268bd2;
 } // name.class //
 .highlight .no {
-  color: #cb4b16;
+  color: #a31521;
 } // name.constant //
 .highlight .nd {
   color: #268bd2;
 } // name.decorator //
 .highlight .ni {
-  color: #cb4b16;
+  color: #a31521;
 } // name.entity //
 .highlight .ne {
-  color: #cb4b16;
+  color: #a31521;
 } // name.exception //
 .highlight .nf {
   color: #268bd2;
 } // name.function //
 .highlight .nl {
-  color: #555;
+  color: #0451a3;
 } // name.label //
 .highlight .nn {
   color: $grey-dk-300;
 } // name.namespace //
 .highlight .nx {
-  color: #555;
+  color: #0451a3;
 } // name.other //
 .highlight .py {
   color: $grey-dk-300;
@@ -244,49 +244,49 @@ $media-queries: (
   color: $grey-dk-300;
 } // text.whitespace //
 .highlight .mf {
-  color: #2aa198;
+  color: #2aa18e;
 } // literal.number.float //
 .highlight .mh {
-  color: #2aa198;
+  color: #2aa18e;
 } // literal.number.hex //
 .highlight .mi {
-  color: #2aa198;
+  color: #2aa18e;
 } // literal.number.integer //
 .highlight .mo {
-  color: #2aa198;
+  color: #2aa18e;
 } // literal.number.oct //
 .highlight .sb {
   color: $blue-dk-200;
 } // literal.string.backtick //
 .highlight .sc {
-  color: #2aa198;
+  color: #2aa18e;
 } // literal.string.char //
 .highlight .sd {
   color: $grey-dk-300;
 } // literal.string.doc //
 .highlight .s2 {
-  color: #2aa198;
+  color: #2aa18e;
 } // literal.string.double //
 .highlight .se {
-  color: #cb4b16;
+  color: #a31521;
 } // literal.string.escape //
 .highlight .sh {
   color: $grey-dk-300;
 } // literal.string.heredoc //
 .highlight .si {
-  color: #2aa198;
+  color: #2aa18e;
 } // literal.string.interpol //
 .highlight .sx {
-  color: #2aa198;
+  color: #2aa18e;
 } // literal.string.other //
 .highlight .sr {
   color: #dc322f;
 } // literal.string.regex //
 .highlight .s1 {
-  color: #2aa198;
+  color: #2aa18e;
 } // literal.string.single //
 .highlight .ss {
-  color: #2aa198;
+  color: #2aa18e;
 } // literal.string.symbol //
 .highlight .bp {
   color: #268bd2;
@@ -301,5 +301,5 @@ $media-queries: (
   color: #268bd2;
 } // name.variable.instance //
 .highlight .il {
-  color: #2aa198;
+  color: #2aa18e;
 } // literal.number.integer.long //

_sass/custom/custom.scss

@@ -335,6 +335,11 @@ img {
   }
 }
 
+// Needed so the panel and copy-button-wrap panel blend together
+div.highlighter-rouge {
+  border-radius: 0;
+}
+
 .copy-button-wrap {
   background-color: $sidebar-color;
   padding: 0.25rem 2rem 0.5rem 2rem;