diff --git a/content/en/docs/contribute/style/hugo-shortcodes/index.md b/content/en/docs/contribute/style/hugo-shortcodes/index.md
index a82fa99e4b..85310d9f37 100644
--- a/content/en/docs/contribute/style/hugo-shortcodes/index.md
+++ b/content/en/docs/contribute/style/hugo-shortcodes/index.md
@@ -273,29 +273,31 @@ Renders to:
 
 ### Source code files
 
-You can use the `{{%/* codenew */%}}` shortcode to embed the contents of file in a code block to allow users to download or copy its content to their clipboard. This shortcode is used when the contents of the sample file is generic and reusable, and you want the users to try it out themselves.
+`{{%/* codenew */%}}` shortcode is replaced by `{{%/* code */%}}`.
+
+You can use the `{{%/* code */%}}` shortcode to embed the contents of file in a code block to allow users to download or copy its content to their clipboard. This shortcode is used when the contents of the sample file is generic and reusable, and you want the users to try it out themselves.
 
 This shortcode takes in two named parameters: `language` and `file`. The mandatory parameter `file` is used to specify the path to the file being displayed. The optional parameter `language` is used to specify the programming language of the file. If the `language` parameter is not provided, the shortcode will attempt to guess the language based on the file extension.
 
 For example:
 
 ```none
-{{%/* codenew language="yaml" file="application/deployment-scale.yaml" */%}}
+{{%/* code language="yaml" file="application/deployment-scale.yaml" */%}}
 ```
 
 The output is:
 
-{{% codenew language="yaml" file="application/deployment-scale.yaml" %}}
+{{% code language="yaml" file="application/deployment-scale.yaml" %}}
 
-When adding a new sample file, such as a YAML file, create the file in one of the `<LANG>/examples/` subdirectories where `<LANG>` is the language for the page. In the markdown of your page, use the `codenew` shortcode:
+When adding a new sample file, such as a YAML file, create the file in one of the `<LANG>/examples/` subdirectories where `<LANG>` is the language for the page. In the markdown of your page, use the `code` shortcode:
 
 ```none
-{{%/* codenew file="<RELATIVE-PATH>/example-yaml>" */%}}
+{{%/* code file="<RELATIVE-PATH>/example-yaml>" */%}}
 ```
 where `<RELATIVE-PATH>` is the path to the sample file to include, relative to the `examples` directory. The following shortcode references a YAML file located at `/content/en/examples/configmap/configmaps.yaml`.
 
 ```none
-{{%/* codenew file="configmap/configmaps.yaml" */%}}
+{{%/* code file="configmap/configmaps.yaml" */%}}
 ```
 
 ## Third party content marker
diff --git a/layouts/partials/hooks/body-end.html b/layouts/partials/hooks/body-end.html
index 782417e0c0..bf4f15f0f5 100644
--- a/layouts/partials/hooks/body-end.html
+++ b/layouts/partials/hooks/body-end.html
@@ -5,7 +5,7 @@
 <!-- scripts for algolia docsearch -->
 {{ end }}
 {{/* copy-and-paste helper for codenew shortcode */}}
-{{- if .HasShortcode "codenew" -}}
+{{- if or (.HasShortcode "code") (.HasShortcode "codenew") -}}
 <script async src="{{ "js/sweetalert-2.1.2.min.js" | relURL }}"></script>
 <script type="text/javascript">
 function copyCode(elem){
diff --git a/layouts/shortcodes/code.html b/layouts/shortcodes/code.html
new file mode 100644
index 0000000000..08064fa3f3
--- /dev/null
+++ b/layouts/shortcodes/code.html
@@ -0,0 +1,32 @@
+{{ $p := .Page }}
+{{ $file := .Get "file" }}
+{{ $codelang := .Get "language" | default (path.Ext $file | strings.TrimPrefix ".") }} 
+{{ $fileDir := path.Split $file }}
+{{ $bundlePath := path.Join .Page.File.Dir $fileDir.Dir }}
+{{ $filename := printf "/content/%s/examples/%s" .Page.Lang $file | safeURL }}
+{{ $ghlink := printf "https://%s/%s%s" site.Params.githubwebsiteraw (default "main" site.Params.docsbranch) $filename | safeURL }}
+{{/* First assume this is a bundle and the file is inside it. */}}
+{{ $resource := $p.Resources.GetMatch (printf "%s*" $file ) }}
+{{ with $resource }}
+{{ $.Scratch.Set "content" .Content }}
+{{ else }}
+{{/* Read the file relative to the content root. */}}
+{{ $resource := readFile $filename}}
+{{ with $resource }}{{ $.Scratch.Set "content" . }}{{ end }}
+{{ end }}
+{{ if not ($.Scratch.Get "content") }}
+{{ errorf "[%s] %q not found in %q" site.Language.Lang $fileDir.File $bundlePath }}
+{{ end }}
+{{ with $.Scratch.Get "content" }}
+<div class="highlight">
+    <div class="copy-code-icon" style="text-align:right">
+    {{ with $ghlink }}<a href="{{ . }}" download="{{ $file }}">{{ end }}<code>{{ $file }}</code>
+    {{ if $ghlink }}</a>{{ end }}
+    <img src="{{ "images/copycode.svg" | relURL }}" style="max-height:24px; cursor: pointer" onclick="copyCode('{{ $file | anchorize }}')" title="Copy {{ $file }} to clipboard">
+    </img>
+    </div>
+    <div class="includecode" id="{{ $file | anchorize }}">
+    {{- highlight . $codelang "" -}}
+    </div>
+</div>
+{{ end }}