showdownjs/showdown

Inlining css classes and global styles

Open

#860 opened on Aug 25, 2021

View on GitHub
 (2 comments) (0 reactions) (0 assignees)JavaScript (13,700 stars) (1,640 forks)batch import
help wanted

Description

I am wondering is there any built-in functionality that may help to inline css?

What I want to achieve is to get rid of all css classes and global styles to bring all the styles inline.

This process is taking place withing a browser right after showdown produces a raw html.

It is seems that I need to write a custom extension to achieve that.

Any hints?

Contributor guide

Tech stack
javascriptcss
Domain
frontend
Issue type
feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
unclear
Prerequisites
Showdown extension conceptJavaScript basics
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
30
Research direction
Investigate the Showdown extension API by reviewing the wiki at https://github.com/showdownjs/showdown/wiki/Extensions. Look at existing extensions for reference. Consider writing a new extension that traverses the generated HTML and converts CSS classes to inline styles. The extension would need to access the DOM within the browser after showdown conversion.