moves default renderer stylesheet to styles.css (#85) and add text-output styles (#86)

Author: RandomFractals

src/renderer/dataSummaryRenderer.ts

@@ -3,7 +3,7 @@ import type {
   RendererContext
 } from 'vscode-notebook-renderer';
 import {OutputLoader} from './outputLoader';
-import './style.css';
+import './styles.css';
 const htl = require('htl');
 const inputs = require('@observablehq/inputs');
 const dataSummary = require('./dataSummaryView.js');
@@ -44,10 +44,7 @@ export function render(output: IRenderInfo) {
   }
   else {
     // output text in pre/code tags
-    output.container.appendChild(htl.html`<pre
-      style="max-height: 300px; white-space: pre-wrap; tab-size: 2; overflow: auto;">
-        <code style="display: block; white-space: pre-wrap;">${data}</code>
-      </pre>`);
+    output.container.appendChild(htl.html`<pre class="text-output"><code>${data}</code></pre>`);
   }
 }
 

src/renderer/dataTableRenderer.ts

@@ -3,7 +3,7 @@ import type {
   RendererContext
 } from 'vscode-notebook-renderer';
 import { OutputLoader } from './outputLoader';
-import './style.css';
+import './styles.css';
 const htl = require('htl');
 const inputs = require('@observablehq/inputs');
 
@@ -48,10 +48,7 @@ export function render(output: IRenderInfo) {
   }
   else {
     // output text in pre/code tags
-    output.container.appendChild(htl.html`<pre
-      style="max-height: 300px; white-space: pre-wrap; tab-size: 2; overflow: auto;">
-        <code style="display: block; white-space: pre-wrap;">${data}</code>
-      </pre>`);
+    output.container.appendChild(htl.html`<pre class="text-output"><code>${data}</code></pre>`);
   }
 }
 

src/renderer/style.css src/renderer/styles.csssrc/renderer/style.css renamed to src/renderer/styles.css

@@ -1,3 +1,10 @@
+.text-output {
+  max-height: 360px;
+  overflow: auto;
+  tab-size: 2;
+  white-space: pre-wrap;
+}
+
 .data-table {
   max-width: 100%;
   background-color: var(--vscode-editor-background);