ComponentCode

13 of 13 upstream examples match. Razor component: <NhsukCode>

Default

Matches upstream

This is a plain text code block

Razor Pages and MVC

<nhsuk-code text="This is a plain text code block" />

Blazor

<NhsukCode Text="This is a plain text code block" />

Nunjucks (upstream)

{% from "nhsuk/components/code/macro.njk" import code %}

{{ code({
  "text": "This is a plain text code block"
}) }}

Button

Matches upstream

with primary

Open on its own page (opens in new tab)

This is a plain text code block

Razor Pages and MVC

<nhsuk-code
    text="This is a plain text code block"
    button-options="@(true)"
    copy-button-class-list="@([
        "nhsuk-button--small",
    ])"
/>

Blazor

<NhsukCode
    Text="This is a plain text code block"
    Button="@(true)"
    CopyButtonClassList="@([
        "nhsuk-button--small",
    ])"
/>

Nunjucks (upstream)

{% from "nhsuk/components/code/macro.njk" import code %}

{{ code({
  "text": "This is a plain text code block",
  "button": true,
  "copyButtonClassList": [
    "nhsuk-button--small"
  ]
}) }}

Button

Matches upstream

with secondary

Open on its own page (opens in new tab)

This is a plain text code block

Razor Pages and MVC

<nhsuk-code text="This is a plain text code block" button-options="@(true)" />

Blazor

<NhsukCode Text="This is a plain text code block" Button="@(true)" />

Nunjucks (upstream)

{% from "nhsuk/components/code/macro.njk" import code %}

{{ code({
  "text": "This is a plain text code block",
  "button": true
}) }}

Button

Matches upstream

with secondary, solid background

Open on its own page (opens in new tab)

This is a plain text code block

Razor Pages and MVC

<nhsuk-code
    text="This is a plain text code block"
    button-options="@(true)"
    background="body"
    copy-button-class-list="@([
        "nhsuk-button--secondary-solid",
        "nhsuk-button--small",
    ])"
/>

Blazor

<NhsukCode
    Text="This is a plain text code block"
    Button="@(true)"
    Background="body"
    CopyButtonClassList="@([
        "nhsuk-button--secondary-solid",
        "nhsuk-button--small",
    ])"
/>

Nunjucks (upstream)

{% from "nhsuk/components/code/macro.njk" import code %}

{{ code({
  "text": "This is a plain text code block",
  "button": true,
  "background": "body",
  "copyButtonClassList": [
    "nhsuk-button--secondary-solid",
    "nhsuk-button--small"
  ]
}) }}

With button double click not prevented

Matches upstream

Open on its own page (opens in new tab)

This is a plain text code block

Razor Pages and MVC

<nhsuk-code
    text="This is a plain text code block"
    button-options="@(new ButtonOptions
    {
        PreventDoubleClick = false,
    })"
/>

Blazor

<NhsukCode
    Text="This is a plain text code block"
    Button="@(new ButtonOptions
    {
        PreventDoubleClick = false,
    })"
/>

Nunjucks (upstream)

{% from "nhsuk/components/code/macro.njk" import code %}

{{ code({
  "text": "This is a plain text code block",
  "button": {
    "preventDoubleClick": false
  }
}) }}

With button double click prevented

Matches upstream

Open on its own page (opens in new tab)

This is a plain text code block

Razor Pages and MVC

<nhsuk-code
    text="This is a plain text code block"
    button-options="@(new ButtonOptions
    {
        PreventDoubleClick = true,
    })"
/>

Blazor

<NhsukCode
    Text="This is a plain text code block"
    Button="@(new ButtonOptions
    {
        PreventDoubleClick = true,
    })"
/>

Nunjucks (upstream)

{% from "nhsuk/components/code/macro.njk" import code %}

{{ code({
  "text": "This is a plain text code block",
  "button": {
    "preventDoubleClick": true
  }
}) }}

With custom HTML

Matches upstream

Open on its own page (opens in new tab)

<p>This is an HTML code block.</p>

Razor Pages and MVC

<nhsuk-code html="&lt;p&gt;This is an HTML code block.&lt;/p&gt;" />

Blazor

<NhsukCode Html="&lt;p&gt;This is an HTML code block.&lt;/p&gt;" />

Nunjucks (upstream)

{% from "nhsuk/components/code/macro.njk" import code %}

{{ code({
  "html": "&lt;p&gt;This is an HTML code block.&lt;/p&gt;"
}) }}

With custom HTML and button

Matches upstream

Open on its own page (opens in new tab)

<p>This is an HTML code block.</p>

Razor Pages and MVC

<nhsuk-code
    html="&lt;p&gt;This is an HTML code block.&lt;/p&gt;"
    button-options="@(true)"
/>

Blazor

<NhsukCode Html="&lt;p&gt;This is an HTML code block.&lt;/p&gt;" Button="@(true)" />

Nunjucks (upstream)

{% from "nhsuk/components/code/macro.njk" import code %}

{{ code({
  "html": "&lt;p&gt;This is an HTML code block.&lt;/p&gt;",
  "button": true
}) }}

With custom HTML (escaped) and button

Matches upstream

Open on its own page (opens in new tab)

<p>This is an HTML code block.</p>

Razor Pages and MVC

<nhsuk-code button-options="@(true)">
    &lt;p&gt;This is an HTML code block.&lt;/p&gt;
</nhsuk-code>

Blazor

<NhsukCode Button="@(true)">
    &lt;p&gt;This is an HTML code block.&lt;/p&gt;
</NhsukCode>

Nunjucks (upstream)

{% from "nhsuk/components/code/macro.njk" import code %}

{% call code({
  "button": true
}) %}
  &lt;p&gt;This is an HTML code block.&lt;/p&gt;
{% endcall %}

Without border

Matches upstream

Open on its own page (opens in new tab)

This is a plain text code block

Razor Pages and MVC

<nhsuk-code text="This is a plain text code block" border="false" />

Blazor

<NhsukCode Text="This is a plain text code block" Border="false" />

Nunjucks (upstream)

{% from "nhsuk/components/code/macro.njk" import code %}

{{ code({
  "text": "This is a plain text code block",
  "border": false
}) }}

With scroll overflow

Matches upstream

Open on its own page (opens in new tab)

Supercalifragilisticexpialidocious! Even though the sound of it is something quite atrocious, if you say it loud enough, you'll always sound precocious!

Razor Pages and MVC

<nhsuk-code
    text="Supercalifragilisticexpialidocious! Even though the sound of it is something quite atrocious, if you say it loud enough, you'll always sound precocious!"
/>

Blazor

<NhsukCode
    Text="Supercalifragilisticexpialidocious! Even though the sound of it is something quite atrocious, if you say it loud enough, you'll always sound precocious!"
/>

Nunjucks (upstream)

{% from "nhsuk/components/code/macro.njk" import code %}

{{ code({
  "text": "Supercalifragilisticexpialidocious! Even though the sound of it is something quite atrocious, if you say it loud enough, you'll always sound precocious!"
}) }}

With scroll overflow and button

Matches upstream

Open on its own page (opens in new tab)

Supercalifragilisticexpialidocious! Even though the sound of it is something quite atrocious, if you say it loud enough, you'll always sound precocious!

Razor Pages and MVC

<nhsuk-code
    text="Supercalifragilisticexpialidocious! Even though the sound of it is something quite atrocious, if you say it loud enough, you'll always sound precocious!"
    button-options="@(true)"
/>

Blazor

<NhsukCode
    Text="Supercalifragilisticexpialidocious! Even though the sound of it is something quite atrocious, if you say it loud enough, you'll always sound precocious!"
    Button="@(true)"
/>

Nunjucks (upstream)

{% from "nhsuk/components/code/macro.njk" import code %}

{{ code({
  "text": "Supercalifragilisticexpialidocious! Even though the sound of it is something quite atrocious, if you say it loud enough, you'll always sound precocious!",
  "button": true
}) }}

With translations

Matches upstream

Open on its own page (opens in new tab)

<p>Bloc cod HTML yw hwn.</p>

Razor Pages and MVC

<nhsuk-code
    html="&lt;p&gt;Bloc cod HTML yw hwn.&lt;/p&gt;"
    button-options="@(true)"
    copy-button-text="Copïo cod"
    copied-button-text="Cod wedi'i gopïo"
    copied-announcement-text="Cod wedi'i gopïo i'r clipfwrdd"
/>

Blazor

<NhsukCode
    Html="&lt;p&gt;Bloc cod HTML yw hwn.&lt;/p&gt;"
    Button="@(true)"
    CopyButtonText="Copïo cod"
    CopiedButtonText="Cod wedi'i gopïo"
    CopiedAnnouncementText="Cod wedi'i gopïo i'r clipfwrdd"
/>

Nunjucks (upstream)

{% from "nhsuk/components/code/macro.njk" import code %}

{{ code({
  "html": "&lt;p&gt;Bloc cod HTML yw hwn.&lt;/p&gt;",
  "button": true,
  "copyButtonText": "Copïo cod",
  "copiedButtonText": "Cod wedi'i gopïo",
  "copiedAnnouncementText": "Cod wedi'i gopïo i'r clipfwrdd"
}) }}