Wrapping in Markdown Preview (#17361)

* Improve markdown Wrapping

Includes a few improvements to the markdown preview

* Use breakword by default to break up very long words
* When `editor.worWrap` is enabled, wrap code blocks inside of the html preview.
* Reverts https://github.com/Microsoft/vscode/commit/41467b74b7e486f3a5857d3cc0ab15d85a2b7a84 . This change is adding an 20px margin to the left of any html content. I believe the html content itself should be responsible for adding this padding and should normally fill the entire screen.
* Better centers markdown preview content

* Move padding to default webview style

* Remove padding change for now
This commit is contained in:
Matt Bierner
2017-01-12 16:29:27 -08:00
committed by GitHub
parent d9d41f7cd0
commit c932846c67
2 changed files with 9 additions and 2 deletions
+6 -1
View File
@@ -6,8 +6,9 @@
body {
font-family: "Segoe WPC", "Segoe UI", "SFUIText-Light", "HelveticaNeue-Light", sans-serif, "Droid Sans Fallback";
font-size: 14px;
padding-left: 12px;
padding: 0 12px;
line-height: 22px;
word-wrap: break-word;
}
body.scrollBeyondLastLine {
@@ -96,6 +97,10 @@ code {
line-height: 19px;
}
body.wordWrap pre {
white-space: pre-wrap;
}
.mac code {
font-size: 12px;
line-height: 18px;
+3 -1
View File
@@ -256,6 +256,8 @@ class MDDocumentContentProvider implements vscode.TextDocumentContentProvider {
public provideTextDocumentContent(uri: vscode.Uri): Thenable<string> {
return vscode.workspace.openTextDocument(vscode.Uri.parse(uri.query)).then(document => {
const scrollBeyondLastLine = vscode.workspace.getConfiguration('editor')['scrollBeyondLastLine'];
const wordWrap = vscode.workspace.getConfiguration('editor')['wordWrap'];
const head = ([] as Array<string>).concat(
'<!DOCTYPE html>',
'<html>',
@@ -267,7 +269,7 @@ class MDDocumentContentProvider implements vscode.TextDocumentContentProvider {
this.computeCustomStyleSheetIncludes(uri),
`<base href="${document.uri.toString(true)}">`,
'</head>',
`<body class="${scrollBeyondLastLine ? 'scrollBeyondLastLine' : ''}">`
`<body class="${scrollBeyondLastLine ? 'scrollBeyondLastLine' : ''} ${wordWrap ? 'wordWrap' : ''}">`
).join('\n');
const body = this._renderer.render(this.getDocumentContentForPreview(document));