From a4e3ea03112e60dee23cbf809c69e1b3e9d21259 Mon Sep 17 00:00:00 2001
From: Kapunahele Wong <kapunahelewong@gmail.com>
Date: Thu, 6 May 2021 16:11:49 +0300
Subject: [PATCH] feat(docs-infra): add support for unformatted code-snippets
 (#41335)

This commit adds support for skipping formatting in `<aio-code>`
elements (which are used by `<code-example>` and `<code-pane>` elements
under the hood) by specifying the `language` option as `'root'`.

This is useful for code-snippets that include plain text.

PR Close #41335
---
 .../code/code.component.spec.ts                |  9 +++++++++
 .../app/custom-elements/code/code.component.ts | 18 +++++++++++++-----
 2 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/aio/src/app/custom-elements/code/code.component.spec.ts b/aio/src/app/custom-elements/code/code.component.spec.ts
index 8f46167055..ef8f384841 100644
--- a/aio/src/app/custom-elements/code/code.component.spec.ts
+++ b/aio/src/app/custom-elements/code/code.component.spec.ts
@@ -117,6 +117,15 @@ describe('CodeComponent', () => {
       expect(getFormattedCode()).toBe(
           `Formatted code (language: auto, linenums: true): ${bigMultiLineCode}`);
     });
+
+    it('should skip prettify if language is `\'none\'`', () => {
+      hostComponent.setCode(bigMultiLineCode);
+      hostComponent.language = 'none';
+
+      fixture.detectChanges();
+
+      expect(getFormattedCode()).toBe(bigMultiLineCode);
+    });
   });
 
   describe('whitespace handling', () => {
diff --git a/aio/src/app/custom-elements/code/code.component.ts b/aio/src/app/custom-elements/code/code.component.ts
index ed16f9946b..a3b40df5ae 100644
--- a/aio/src/app/custom-elements/code/code.component.ts
+++ b/aio/src/app/custom-elements/code/code.component.ts
@@ -3,6 +3,7 @@ import { Clipboard } from '@angular/cdk/clipboard';
 import { Logger } from 'app/shared/logger.service';
 import { PrettyPrinter } from './pretty-printer.service';
 import { MatSnackBar } from '@angular/material/snack-bar';
+import { Observable, of } from 'rxjs';
 import { tap } from 'rxjs/operators';
 
 /**
@@ -108,15 +109,22 @@ export class CodeComponent implements OnChanges {
   }
 
   private formatDisplayedCode() {
+    const linenums = this.getLinenums();
     const leftAlignedCode = leftAlign(this.code);
     this.setCodeHtml(leftAlignedCode); // start with unformatted code
     this.codeText = this.getCodeText(); // store the unformatted code as text (for copying)
 
-    this.pretty
-        .formatCode(leftAlignedCode, this.language, this.getLinenums())
-        .pipe(tap(() => this.codeFormatted.emit()))
-        .subscribe(c => this.setCodeHtml(c), () => { /* ignore failure to format */ }
-    );
+    const skipPrettify = of(undefined);
+    const prettifyCode = this.pretty
+        .formatCode(leftAlignedCode, this.language, linenums)
+        .pipe(tap(formattedCode => this.setCodeHtml(formattedCode)));
+
+    if (linenums !== false && this.language === 'none') {
+      this.logger.warn(`Using 'linenums' with 'language: none' is currently not supported.`);
+    }
+
+    ((this.language === 'none' ? skipPrettify : prettifyCode) as Observable<unknown>)
+        .subscribe(() => this.codeFormatted.emit(), () => { /* ignore failure to format */ });
   }
 
   /** Sets the message showing that the code could not be found. */