Home → Questions →

Using Marked to Generate Chord Charts

• Edit

Adam Thomas

22 Feb, 2014 03:48 AM

I am the music director for my church, and I have spent countless hours over the years manufacturing chord charts of every variety. Most of this has been done in Pages and exported to PDF.

I have only recently begun diving into the world of styling plain text, but it occurred to me almost immediately that I might be able to use Marked to output my chord charts from now on. The idea would be to be able to type song lyrics and chords simultaneously, but with the chords appearing above the correct word in the final styled version. This would save the hassle of trying to line up chords and words by pecking out just the right number of spaces to get the letter where you want it.

What I am looking for is a place to begin. I think this would be an interesting application of Marked, and certainly highly useful for me.

Note: I have no experience in designing custom CSS.

1. Support Staff 1 Posted by Brett on 24 Feb, 2014 03:13 PM

   

   I think this would be quite a complicated custom processor and would
   require special syntax for denoting chord patterns and creating a
   relationship to the text for putting them in. I'm not sure it's
   something that you'd want to accomplish in Markdown...

   • Edit

2. 2 Posted by Adam Thomas on 25 Feb, 2014 02:22 PM

   

   What if I didn't need to denote how precisely to play each chord, but wanted only to display the letter note and symbol of each chord i.e., "A#m" or "Db7" above the corresponding lyric? That would be considerably more simple and serviceable.

   • Edit

3. Support Staff 3 Posted by Brett on 25 Feb, 2014 02:45 PM

   

   Well, you could use MultiMarkdown's superscript format in the latest version with a bit of styling. If you wrote out the lyric sheets like this:

    Lorem^Bm9 ipsum dolor^Dm7 sit amet, consectetur adipisicing^Am elit...
   

   And then applied this styling:

   #wrapper sup {
       font-size: 1.4ex;
       height: 0;
       line-height: 1;
       display: inline-block;
       position: relative;
       top: -40px;
       width: 0;
   }
   
   #wrapper p {
       position: relative;
       line-height: 3;
   }
   

   Or something similar, you'd get something like this:

   

   The styling above would need some work with certain themes, but with Github, Amblin and Grump it works out of the box. You can add it in the Extra CSS field in Style Preferences to test it out.

   • Edit

4. 4 Posted by Adam Thomas on 25 Feb, 2014 03:30 PM

   

   Thanks for the suggestion, Brett. I will give that some test runs and report back.

   • Edit