verdaccio / monorepo

🏰 Core dependencies and plugins for verdaccio 5.x branch ⚠️ DEPRECATED
https://verdaccio.org
MIT License
81 stars 62 forks source link

Syntax highlighting in readme #633

Closed cesco69 closed 1 year ago

cesco69 commented 1 year ago

Is your feature request related to a problem? Please describe. I want syntax highlighting in readme eg.:

function sayHello() {
   alert('Hello!');
}

instead of :

function sayHello() {
   alert('Hello!');
}

Describe the solution you'd like verdaccio use marked https://github.com/verdaccio/monorepo/blob/9.x/core/readme/src/index.ts#L15 for parsing the markdown code, and marked has syntax highlighting options https://marked.js.org/using_advanced#highlight

juanpicado commented 1 year ago

Would you like to PR? I'll be happy to review it.

cesco69 commented 1 year ago

Hi @juanpicado , sorry, I'cant, but it seem really simple to implement, eg.:

https://github.com/verdaccio/monorepo/blob/9.x/core/readme/src/index.ts

import createDOMPurify from 'dompurify';
import { JSDOM } from 'jsdom';

const DOMPurify = createDOMPurify(new JSDOM('').window);
const { marked } = require('marked');

// ----------------------------------------------------------------------------------------------
// set syntax highlighting option
marked.setOptions({
  highlight: function(code, lang, callback) {
    // retrive the language from first line, eg.:
    // ```ts
    // const demo = 'My typescript code';
    // ```
    // supported language see https://pygments.org/languages/ 
    const format = code ? code.split('\n')[0] : null;
    if( format ){
      require('pygmentize-bundled') ({ lang: lang, format: format  }, code, function (err, result) {
         callback(err, result.toString());
      });
    } else {
       callback(null, code);
    }
  }
});
// ----------------------------------------------------------------------------------------------

export default function parseReadme(
  readme: string,
  options: { pathname?: string | void } = {}
): string | void {
  let result;

  if (readme) {
    result = DOMPurify.sanitize(
      marked(readme, {
        sanitize: false,
      }).trim()
    );

    if ('string' === typeof options.pathname) {
      result = result.replace(/href="#/gi, `href="${options.pathname}#`);
    }
  }

  return result;
}
juanpicado commented 1 year ago

@cesco69 https://www.npmjs.com/package/pygmentize-bundled is 8 years old and deprecated, do you know another alternative ?

juanpicado commented 1 year ago

:) ok I think got it

Screenshot 2022-11-19 at 11 45 50
juanpicado commented 1 year ago

closed by https://github.com/verdaccio/verdaccio/pull/3505