Style code blocks

fboeller · Mar 7, 2021 · c7c5d2b · c7c5d2b
1 parent 1f64950
commit c7c5d2b
Show file tree

Hide file tree

Showing 7 changed files with 23 additions and 12 deletions.
diff --git a/...app/examples/custom-default-loading-example/custom-default-loading-example.component.html b/...app/examples/custom-default-loading-example/custom-default-loading-example.component.html
@@ -8,12 +8,12 @@ <h2>Custom default loading template</h2>
   <app-load-form (loadable)="loadable = $event"></app-load-form>
   <ld-loadable [loadable]="loadable">
     <h3>Loaded</h3>
-    <pre>{{ loadable | loadedValue | json }}</pre>
+    <pre><code>{{ loadable | loadedValue | json }}</code></pre>
   </ld-loadable>
 </div>
 <aside>
   <div>
     <h3>State of the loadable</h3>
-    <pre>{{ loadable | json }}</pre>
+    <pre><code>{{ loadable | json }}</code></pre>
   </div>
 </aside>
diff --git a/...p/examples/custom-loading-template-example/custom-loading-template-example.component.html b/...p/examples/custom-loading-template-example/custom-loading-template-example.component.html
@@ -9,20 +9,20 @@ <h2>Custom loading template</h2>
   <div class="loadables">
     <ld-loadable [loadable]="loadable" [templates]="{ loading: loading }">
       <h3>Loaded</h3>
-      <pre>{{ loadable | loadedValue | json }}</pre>
+      <pre><code>{{ loadable | loadedValue | json }}</code></pre>
     </ld-loadable>
     <ng-template #loading>
       <p>The answer is currently being computed.</p>
     </ng-template>
     <ld-loadable [loadable]="loadable">
       <h3>Loaded</h3>
-      <pre>{{ loadable | loadedValue | json }}</pre>
+      <pre><code>{{ loadable | loadedValue | json }}</code></pre>
     </ld-loadable>
   </div>
 </div>
 <aside>
   <div>
     <h3>State of the loadable</h3>
-    <pre>{{ loadable | json }}</pre>
+    <pre><code>{{ loadable | json }}</code></pre>
   </div>
 </aside>
diff --git a/projects/example-app/src/app/examples/default-example/default-example.component.html b/projects/example-app/src/app/examples/default-example/default-example.component.html
@@ -8,12 +8,12 @@ <h2>Default usage example</h2>
   <app-load-form (loadable)="loadable = $event"></app-load-form>
   <ld-loadable [loadable]="loadable">
     <h3>Loaded</h3>
-    <pre>{{ loadable | loadedValue | json }}</pre>
+    <pre><code>{{ loadable | loadedValue | json }}</code></pre>
   </ld-loadable>
 </div>
 <aside>
   <div>
     <h3>State of the loadable</h3>
-    <pre>{{ loadable | json }}</pre>
+    <pre><code>{{ loadable | json }}</code></pre>
   </div>
 </aside>
diff --git a/projects/example-app/src/app/examples/lightweight-example/lightweight-example.component.html b/projects/example-app/src/app/examples/lightweight-example/lightweight-example.component.html
@@ -10,7 +10,7 @@ <h2>Lightweight example</h2>
     <ld-loadable-loading *ngSwitchCase="'loading'"></ld-loadable-loading>
     <div *ngSwitchCase="'loaded'">
       <h3>Loaded</h3>
-      <pre>{{ loadable | loadedValue | json }}</pre>
+      <pre><code>{{ loadable | loadedValue | json }}</code></pre>
     </div>
     <ld-loadable-error
       *ngSwitchCase="'error'"
@@ -21,6 +21,6 @@ <h3>Loaded</h3>
 <aside>
   <div>
     <h3>State of the loadable</h3>
-    <pre>{{ loadable | json }}</pre>
+    <pre><code>{{ loadable | json }}</code></pre>
   </div>
 </aside>
diff --git a/projects/example-app/src/app/examples/ngrx-example/ngrx-example.component.html b/projects/example-app/src/app/examples/ngrx-example/ngrx-example.component.html
@@ -8,12 +8,12 @@ <h2>NgRx</h2>
   <button (click)="load(42, true)">Load with error</button>
   <ld-loadable *ngIf="loadable$ | async as loadable" [loadable]="loadable">
     <h3>Loaded</h3>
-    <pre>{{ loadable.value | json }}</pre>
+    <pre><code>{{ loadable.value | json }}</code></pre>
   </ld-loadable>
 </div>
 <aside>
   <div>
     <h3>State of the loadable</h3>
-    <pre>{{ loadable$ | async | json }}</pre>
+    <pre><code>{{ loadable$ | async | json }}</code></pre>
   </div>
 </aside>
diff --git a/projects/example-app/src/styles.css b/projects/example-app/src/styles.css
@@ -18,3 +18,14 @@ a {
 a:hover {
   color: blue;
 }
+
+pre code {
+  background-color: #eee;
+  border: 1px solid #999;
+  display: block;
+  padding: 20px;
+}
+
+aside {
+  padding: 10px;
+}
diff --git a/projects/ngx-loading-customizer/src/lib/angular/loadable-error/loadable-error.component.html b/projects/ngx-loading-customizer/src/lib/angular/loadable-error/loadable-error.component.html
@@ -1,2 +1,2 @@
 <h3>Error</h3>
-<pre>{{ error | json }}</pre>
+<pre><code>{{ error | json }}</code></pre>