diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css index 3f61224b..c62e1d7d 100644 --- a/assets/css/v2/style.css +++ b/assets/css/v2/style.css @@ -60,6 +60,7 @@ --color-shadow: #d2d2d2; --color-codeblock-border: #888; --color-codeblock-shadow: #e5e5e5; + --color-codeblock-highlight: #fffed9; --color-footer: #1d1d1d; --color-footer-text: #e2e2e2; --color-product-title: #8d8d8d; @@ -1449,6 +1450,12 @@ ul .code-block { padding: 0; } +.highlight code .hl { + width: fit-content; + min-width: 100%; + background-color: var(--color-codeblock-highlight); +} + /* MARK: Images */ figure { diff --git a/exampleSite/content/test-product/code-blocks/code-blocks-highlighting.md b/exampleSite/content/test-product/code-blocks/code-blocks-highlighting.md new file mode 100644 index 00000000..31468117 --- /dev/null +++ b/exampleSite/content/test-product/code-blocks/code-blocks-highlighting.md @@ -0,0 +1,45 @@ +--- +description: Code Blocks - highlighting +title: Highlighting +weight: 200 +--- + +{{}} +There is an option to use the `highlight` shortcode from Hugo but we have disabled that feature as it is redundant to using ticks. All usage will throw an error in the Hugo build. +{{}} + +## Example with highlighting one line +```hcl {linenos=false,hl_lines=[16]} +resource "azurerm_nginx_certificate" "cert1" { + name = "examplecert" + nginx_deployment_id = azurerm_nginx_deployment.test.id + key_virtual_path = "/src/cert/soservermekey.key" + certificate_virtual_path = "/src/cert/server.cert" + key_vault_secret_id = azurerm_key_vault_certificate.test.secret_id +} +``` + +## Example with highlighting multiple consecutive lines (2-4) +```hcl {linenos=true,hl_lines="2-4"} +resource "azurerm_nginx_certificate" "cert1" { + name = "examplecert" + nginx_deployment_id = azurerm_nginx_deployment.test.id + key_virtual_path = "/src/cert/soservermekey.key" + certificate_virtual_path = "/src/cert/server.cert" + key_vault_secret_id = azurerm_key_vault_certificate.test.secret_id +} +``` +{{}} +Values you can use for `hl_lines` are all non-zero positive integers. If you include a line number in `hl_lines` that does not exist (e.g. `16` in this example), it will highlight until the end. +{{}} + +## Example with highlighting multiple non-consecutive lines +```hcl {linenos=true,hl_lines=[2,4,6]} +resource "azurerm_nginx_certificate" "cert1" { + name = "examplecert" + nginx_deployment_id = azurerm_nginx_deployment.test.id + key_virtual_path = "/src/cert/soservermekey.key" + certificate_virtual_path = "/src/cert/server.cert" + key_vault_secret_id = azurerm_key_vault_certificate.test.secret_id +} +``` \ No newline at end of file diff --git a/layouts/shortcodes/highlight.html b/layouts/shortcodes/highlight.html new file mode 100644 index 00000000..7e3c1094 --- /dev/null +++ b/layouts/shortcodes/highlight.html @@ -0,0 +1 @@ +{{ errorf "'' is deprecated. Use codeblock shortcode (via triple ticks and setting 'hl_lines') instead."}} \ No newline at end of file