Page width, especially for code blocks

README.md

@@ -1,5 +1,9 @@
 <h1 align="center"> ✨ Markdown Preview for (Neo)vim ✨ </h1>
 
+### THIS IS A FORKED PROJECT
+
+Please give all your love to the [original project](https://github.com/iamcco/markdown-preview.nvim), the only difference between the two is that I changed the default page width in `app/_static/page.css`.  If this could be a configurable setting, I'd be happy to retire this fork.
+
 > Powered by ❤️
 
 ### Introduction

app/_static/page.css

@@ -1,4 +1,7 @@
-html,body,#__next,main {
+html,
+body,
+#__next,
+main {
   min-height: 100vh;
   margin: 0;
 }
@@ -40,7 +43,7 @@ main {
 
 #page-ctn {
   margin: 0 auto;
-  max-width: 900px;
+  max-width: 500px;
   color: var(--foreground-color);
 }
 

app/pages/index.jsx

@@ -23,7 +23,7 @@ import codeUml from './plantuml'
 import scrollToLine from './scroll'
 import { meta } from './meta';
 import markdownImSize from './markdown-it-imsize'
-import { escape} from './utils';
+import { escape } from './utils';
 
 const anchorSymbol = '<svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'
 
@@ -52,13 +52,12 @@ const DEFAULT_OPTIONS = {
     // Highlighter function. Should return escaped HTML,
     // or '' if the source string is not changed and should be escaped externally.
     // If result starts with <pre... internal wrapper is skipped.
-    highlight: function (str, lang) {
+    highlight: function(str, lang) {
       if (lang && hljs.getLanguage(lang)) {
         try {
-          return `<pre class="hljs"><code>${
-            hljs.highlight(lang, str, true).value
-          }</code></pre>`;
-        } catch (__) {}
+          return `<pre class="hljs"><code>${hljs.highlight(lang, str, true).value
+            }</code></pre>`;
+        } catch (__) { }
       }
 
       return `<pre class="hljs"><code>${escape(str)}</code></pre>`;
@@ -90,7 +89,8 @@ export default class PreviewPage extends React.Component {
       theme: '',
       themeModeIsVisible: false,
       contentEditable: false,
-      disableFilename: 1
+      disableFilename: 1,
+      pageCtnMaxWidth: ''
     }
     this.showThemeButton = this.showThemeButton.bind(this)
     this.hideThemeButton = this.hideThemeButton.bind(this)
@@ -128,6 +128,10 @@ export default class PreviewPage extends React.Component {
       }
     })
 
+    socket.onAny((event, ...args) => {
+      console.log(`🛰 Received socket event: ${event}`, args);
+    });
+
     window.socket = socket
 
     socket.on('connect', this.onConnect.bind(this))
@@ -177,8 +181,10 @@ export default class PreviewPage extends React.Component {
     pageTitle = '',
     theme,
     name = '',
-    content
+    content,
+    pageCtnMaxWidth = ''
   }) {
+    console.log('🚀 onRefreshContent: pageCtnMaxWidth =', pageCtnMaxWidth);
     if (!this.md) {
       const {
         mkit = {},
@@ -275,13 +281,14 @@ export default class PreviewPage extends React.Component {
         })(name),
         ...(
           refreshContent
-          ? { content: this.md.render(newContent) }
-          : {}
+            ? { content: this.md.render(newContent) }
+            : {}
         ),
         pageTitle,
         theme,
         contentEditable: options.content_editable,
-        disableFilename: options.disable_filename
+        disableFilename: options.disable_filename,
+        pageCtnMaxWidth,
       }, () => {
         if (refreshContent) {
           try {
@@ -325,8 +332,11 @@ export default class PreviewPage extends React.Component {
       themeModeIsVisible,
       contentEditable,
       disableFilename,
+      pageCtnMaxWidth,
     } = this.state
 
+    console.log('Rendered pageCtnMaxWidth:', pageCtnMaxWidth);
+
     return (
       <React.Fragment>
         <Head>
@@ -351,8 +361,12 @@ export default class PreviewPage extends React.Component {
           <script type="text/javascript" src="/_static/full.render.js"></script>
         </Head>
         <main data-theme={this.state.theme}>
-          <div id="page-ctn" contentEditable={contentEditable ? 'true' : 'false'}>
-            { disableFilename == 0 &&
+          <div
+            id="page-ctn"
+            contentEditable={contentEditable ? 'true' : 'false'}
+            style={{ maxWidth: pageCtnMaxWidth || '1400px', margin: '0 auto' }}
+          >
+            {disableFilename == 0 &&
               <header
                 id="page-header"
                 onMouseEnter={this.showThemeButton}
@@ -384,7 +398,7 @@ export default class PreviewPage extends React.Component {
                     />
                     <span>Dark Mode</span>
                   </label>
-               )}
+                )}
               </header>
             }
             <section

app/server.js

@@ -1,4 +1,4 @@
-exports.run = function () {
+exports.run = function() {
   // attach nvim
   const { plugin } = require('./nvim')
   const http = require('http')
@@ -52,6 +52,7 @@ exports.run = function () {
   const io = websocket(server)
 
   io.on('connection', async (client) => {
+    console.log('💥 Client connected!', client.id);
     const { handshake = { query: {} } } = client
     const bufnr = handshake.query.bufnr
 
@@ -65,6 +66,7 @@ exports.run = function () {
     const buffers = await plugin.nvim.buffers
     buffers.forEach(async (buffer) => {
       if (buffer.id === Number(bufnr)) {
+        console.log('✅ Found matching buffer:', buffer.id);
         const winline = await plugin.nvim.call('winline')
         const currentWindow = await plugin.nvim.window
         const winheight = await plugin.nvim.call('winheight', currentWindow.id)
@@ -74,7 +76,10 @@ exports.run = function () {
         const theme = await plugin.nvim.getVar('mkdp_theme')
         const name = await buffer.name
         const content = await buffer.getLines()
+        const pageCtnMaxWidth = await plugin.nvim.getVar('mkdp_page_ctn_max_width')
+        console.log('📡 Sending pageCtnMaxWidth =', pageCtnMaxWidth); // <- add this!
         const currentBuffer = await plugin.nvim.buffer
+        console.log('🚀 Emitting refresh_content');
         client.emit('refresh_content', {
           options,
           isActive: currentBuffer.id === buffer.id,
@@ -84,38 +89,39 @@ exports.run = function () {
           pageTitle,
           theme,
           name,
-          content
+          content,
+          pageCtnMaxWidth
         })
       }
     })
 
-    client.on('disconnect', function () {
+    client.on('disconnect', function() {
       logger.info('disconnect: ', client.id)
       clients[bufnr] = (clients[bufnr] || []).map(c => c.id !== client.id)
       // update vim variable
       update_clients_active_var();
     })
   })
 
-  async function startServer () {
+  async function startServer() {
     const openToTheWord = await plugin.nvim.getVar('mkdp_open_to_the_world')
     const host = openToTheWord ? '0.0.0.0' : '127.0.0.1'
     let port = await plugin.nvim.getVar('mkdp_port')
     port = port || (8080 + Number(`${Date.now()}`.slice(-3)))
     server.listen({
       host,
       port
-    }, function () {
+    }, function() {
       logger.info('server run: ', port)
-      function refreshPage ({ bufnr, data }) {
+      function refreshPage({ bufnr, data }) {
         logger.info('refresh page: ', bufnr)
-        ;(clients[bufnr] || []).forEach(c => {
-          if (c.connected) {
-            c.emit('refresh_content', data)
-          }
-        })
+          ; (clients[bufnr] || []).forEach(c => {
+            if (c.connected) {
+              c.emit('refresh_content', data)
+            }
+          })
       }
-      function closePage ({ bufnr }) {
+      function closePage({ bufnr }) {
         logger.info('close page: ', bufnr)
         clients[bufnr] = (clients[bufnr] || []).filter(c => {
           if (c.connected) {
@@ -125,18 +131,18 @@ exports.run = function () {
           return true
         })
       }
-      function closeAllPages () {
+      function closeAllPages() {
         logger.info('close all pages')
         Object.keys(clients).forEach(bufnr => {
-          ;(clients[bufnr] || []).forEach(c => {
+          ; (clients[bufnr] || []).forEach(c => {
             if (c.connected) {
               c.emit('close_page')
             }
           })
         })
         clients = {}
       }
-      async function openBrowser ({ bufnr }) {
+      async function openBrowser({ bufnr }) {
         const combinePreview = await plugin.nvim.getVar('mkdp_combine_preview')
         if (combinePreview && Object.values(clients).some(cs => cs.some(c => c.connected))) {
           logger.info(`combine preview page: `, bufnr)

plugin/mkdp.vim

@@ -116,6 +116,10 @@ if !exists('g:mkdp_combine_preview_auto_refresh')
   let g:mkdp_combine_preview_auto_refresh = 1
 endif
 
+if !exists('g:mkdp_page_ctn_max_width')
+    let g:mkdp_page_ctn_max_width = ''
+endif
+
 " if there are any active preview client
 let g:mkdp_clients_active = 0
 

src/attach/index.ts

@@ -35,7 +35,9 @@ export default function(options: Attach): IPlugin {
   nvim.on('notification', async (method: string, args: any[]) => {
     const opts = args[0] || args
     const bufnr = opts.bufnr
+    console.log('💡 bufnr from client =', bufnr);
     const buffers = await nvim.buffers
+    console.log('📚 Buffers from nvim =', buffers.map(b => b.id));
     const buffer = buffers.find(b => b.id === bufnr)
     if (method === 'refresh_content') {
       const winline = await nvim.call('winline')