Add codeblocks (#509)

* Add codeblocks

* Add copy button and fine-tune typography

* fine-tuning

* Fix code

Author: reakaleek

docs/contribute/move.md

@@ -6,7 +6,7 @@ When you move a source file or folder, you must also update all inbound and outb
 
 Move a file or folder from one location to another and update all links in the documentation. For example:
 
-```
+```bash
 docs-builder mv ./old-location/ia.md ./new-location/ia.md
 ```
 
@@ -16,7 +16,7 @@ The `docset.yml` and `toc.yml` files are not automatically updated when using th
 
 ## `docs-builder mv --help`
 
-```
+```bash
 Usage: mv [arguments...] [options...] [-h|--help] [--version]
 
 Move a file or folder from one location to another and update all links in the documentation
@@ -28,4 +28,4 @@ Arguments:
 Options:
   --dry-run <bool?>      Dry run the move operation (Default: null)
   -p|--path <string?>    Defaults to the`{pwd}` folder (Default: null)
-```
+```

docs/migration/guide/how-to-set-up-docs-previews.md

@@ -16,8 +16,9 @@ If the `path-pattern` input does not match any changes in the PR, the workflow w
 This way you only build and deploy the docs when there are changes to the docs and you can still set it as a required status check.
 
 
-::::{dropdown} .github/workflows/docs-build.yml
-:open:
+::::{tab-set}
+
+:::{tab-item} .github/workflows/docs-build.yml
 
 ```yaml
 ---
@@ -45,6 +46,8 @@ jobs:
 2. Reusable workflow: [elastic/docs-builder/.github/workflows/preview-build.yml](https://github.com/elastic/docs-builder/blob/main/.github/workflows/preview-build.yml)
 3. his should be the path to your docs folder.
 
+:::
+
 ::::
 
 
@@ -57,8 +60,10 @@ We are aware of the security implications of using `pull_request_target` as desc
 The workflow never checks out the code and doesn't use any user modifiable inputs (e.g. PR title). 
 :::
 
-::::{dropdown} .github/workflows/docs-cleanup.yml
-:open:
+::::{tab-set}
+
+:::{tab-item} .github/workflows/docs-cleanup.yml
+
 ```yaml
 ---
 name: docs-cleanup
@@ -80,6 +85,8 @@ jobs:
 1. Reusable workflow: [elastic/docs-builder/.github/workflows/preview-cleanup.yml](https://github.com/elastic/docs-builder/blob/main/.github/workflows/preview-cleanup.yml)
 2. No permissions to read content
 
+:::
+
 ::::
 
 ## Required Status Checks

docs/syntax/code.md

@@ -1,24 +1,37 @@
-# Code blocks
+# Code
 
 Code blocks can be used to display multiple lines of code. They preserve formatting and provide syntax highlighting when possible.
 
-## Syntax
+## Code block
 
-Start and end a code block with a code fence. A code fence is a sequence of at least three consecutive backtick characters (~```~). You can optionally add a language identifier to enable syntax highlighting.
+Start and end a code block with a code fence. A code fence is a sequence of at least three consecutive backtick characters `` ``` ``. You can optionally add a language identifier to enable syntax highlighting.
+
+
+::::{tab-set}
+
+:::{tab-item} Output
 
-````markdown
 ```yaml
 project:
   title: MyST Markdown
   github: https://github.com/jupyter-book/mystmd
 ```
-````
 
+:::
+
+:::{tab-item} Markdown
+
+````markdown
 ```yaml
 project:
   title: MyST Markdown
   github: https://github.com/jupyter-book/mystmd
 ```
+````
+
+:::
+
+::::
 
 ### Code callouts
 
@@ -30,59 +43,97 @@ Add `<\d+>` to the end of a line to explicitly create a code callout.
 
 An ordered list with the same number of items as callouts must follow the code block. If the number of list items doesn’t match the callouts, docs-builder will throw an error.
 
-````markdown
+
+::::{tab-set}
+
+:::{tab-item} Output
+
 ```yaml
 project:
   license:
     content: CC-BY-4.0 <1>
 ```
 
 1. The license
-````
 
+:::
+
+
+:::{tab-item} Markdown
+
+````markdown
 ```yaml
 project:
   license:
     content: CC-BY-4.0 <1>
 ```
 
 1. The license
+````
+
+:::
+
+::::
 
 
 #### Magic Callouts
 
 If a code block contains code comments in the form of `//` or `#`, callouts will be magically created 🪄.
 
-````markdown
+
+::::{tab-set}
+
+:::{tab-item} Output
+
 ```csharp
 var apiKey = new ApiKey("<API_KEY>"); // Set up the api key
 var client = new ElasticsearchClient("<CLOUD_ID>", apiKey);
 ```
-````
 
+:::
+
+:::{tab-item} Markdown
+
+````markdown
 ```csharp
 var apiKey = new ApiKey("<API_KEY>"); // Set up the api key
 var client = new ElasticsearchClient("<CLOUD_ID>", apiKey);
 ```
+````
+:::
+
+
+::::
 
 Code comments must follow code to be hoisted as a callout. For example:
 
-````markdown
+::::{tab-set}
+
+:::{tab-item} Output
+
 ```csharp
 // THIS IS NOT A CALLOUT
 var apiKey = new ApiKey("<API_KEY>"); // This is a callout
 var client = new ElasticsearchClient("<CLOUD_ID>", apiKey);
 ```
-````
 
+:::
+
+:::{tab-item} Markdown
+
+````markdown
 ```csharp
 // THIS IS NOT A CALLOUT
 var apiKey = new ApiKey("<API_KEY>"); // This is a callout
 var client = new ElasticsearchClient("<CLOUD_ID>", apiKey);
 ```
+````
+
+:::
 
+::::
 
-## Console code blocks
+### Console code blocks
 
 :::{note}
 This feature is still being developed.
@@ -92,7 +143,10 @@ We document a lot of API endpoints at Elastic. For these endpoints, we support `
 
 In a console code block, the first line is highlighted as a dev console string and the remainder as json:
 
-````markdown
+::::{tab-set}
+
+:::{tab-item} Output
+
 ```console
 GET /mydocuments/_search
 {
@@ -102,8 +156,12 @@ GET /mydocuments/_search
     }
 }
 ```
-````
 
+:::
+
+:::{tab-item} Markdown
+
+````markdown
 ```console
 GET /mydocuments/_search
 {
@@ -113,3 +171,52 @@ GET /mydocuments/_search
     }
 }
 ```
+````
+
+:::
+
+::::
+
+## Inline code
+
+Use backticks to create an inline code span.
+Inline code spans are useful for short code snippets or variable names.
+
+
+### Inline code in a paragraph
+
+::::{tab-set}
+
+:::{tab-item} Output
+
+This `code` is inline.
+
+:::
+
+:::{tab-item} Markdown
+
+````markdown
+This `code` is inline.
+````
+:::
+
+::::
+
+### Inline code in a heading
+
+::::{tab-set}
+
+:::{tab-item} Output
+
+## This `code` is in a heading.
+
+:::
+
+:::{tab-item} Markdown
+
+````markdown
+## This `code` is in a heading.
+````
+:::
+
+::::

src/Elastic.Markdown/Assets/copybutton.css

@@ -0,0 +1,98 @@
+/* Copy buttons */
+button.copybtn {
+    position: absolute;
+    display: flex;
+    top: .3em;
+    right: .3em;
+    width: 1.7em;
+    height: 1.7em;
+	opacity: 0;
+    transition: opacity 0.3s, border .3s, background-color .3s;
+    user-select: none;
+	cursor: pointer;
+    padding: 0;
+    border: none;
+    outline: none;
+    border-radius: 0.4em;
+    /* The colors that GitHub uses */
+    border: #1b1f2426 1px solid;
+    /*background-color: #f6f8fa;*/
+    color: var(--color-gray-400);
+}
+
+button.copybtn.success {
+    /*border-color: #22863a;*/
+    color: #22863a;
+}
+
+button.copybtn svg {
+    stroke: currentColor;
+    width: 1.5em;
+    height: 1.5em;
+    padding: 0.1em;
+}
+
+div.highlight  {
+    position: relative;
+}
+
+/* Show the copybutton */
+.highlight:hover button.copybtn, button.copybtn.success {
+	opacity: 1;
+}
+
+.highlight button.copybtn:hover {
+    /*background-color: rgb(235, 235, 235);*/
+}
+
+.highlight button.copybtn:active {
+    /*background-color: rgb(187, 187, 187);*/
+}
+
+/**
+ * A minimal CSS-only tooltip copied from:
+ *   https://codepen.io/mildrenben/pen/rVBrpK
+ *
+ * To use, write HTML like the following:
+ *
+ * <p class="o-tooltip--left" data-tooltip="Hey">Short</p>
+ */
+ .o-tooltip--left {
+  position: relative;
+ }
+ 
+ .o-tooltip--left.success:after {
+ }
+
+ .o-tooltip--left:after {
+    opacity: 0;
+    visibility: hidden;
+    position: absolute;
+    content: attr(data-tooltip);
+    padding: .2em;
+    font-size: .8em;
+    left: -.2em;
+    /*background: grey;*/
+    color: var(--color-gray-400);
+    white-space: nowrap;
+    z-index: 2;
+    border-radius: 2px;
+    transform: translateX(-102%) translateY(0);
+    transition: opacity 0.2s cubic-bezier(0.64, 0.09, 0.08, 1), transform 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
+}
+
+.o-tooltip--left:hover:after {
+    display: block;
+    opacity: 1;
+    visibility: visible;
+    transform: translateX(-100%) translateY(0);
+    transition: opacity 0.2s cubic-bezier(0.64, 0.09, 0.08, 1), transform 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
+    transition-delay: .5s;
+}
+
+/* By default the copy button shouldn't show up when printing a page */
+@media print {
+    button.copybtn {
+        display: none;
+    }
+}