use single line and underline clickable part

src/vs/base/browser/ui/resourceviewer/resourceViewer.ts

@@ -160,15 +160,18 @@ export class ResourceViewer {
 			} else {
 				$(container)
 					.empty()
-					.append($('p', {
-						text: nls.localize('largeImageError', "The image is too large to display in the editor.")
-					}))
+					.p({
+						text: nls.localize('largeImageError', "The image is too large to display in the editor. ")
+					})
 					.append($('a', {
 						role: 'button',
 						class: 'open-external',
-						text: nls.localize('resourceOpenExternal', "Try opening the image using an external program?")
+						text: nls.localize('resourceOpenExternalButton', "Open image")
 					}).on(DOM.EventType.CLICK, (e) => {
 						openExternal(descriptor.resource);
+					}))
+					.append($('span', {
+						text: nls.localize('resourceOpenExternalText', ' using external program?')
 					}));
 			}
 		}

src/vs/base/browser/ui/resourceviewer/resourceviewer.css

@@ -52,4 +52,5 @@
 .monaco-resource-viewer .open-external,
 .monaco-resource-viewer .open-external:hover {
 	cursor: pointer;
+	text-decoration: underline;
 }