Simulate Command-Line Interface With HTML

Hi team,

I’m making flashcards for the Anki app on my phone, and I’m using them to help me study for Cisco certifications. I wanted to use basic HTML to simulate what a command-line interface looks like. If you look at the following link, you’ll see an example. Just scroll to the bottom of the page and you’ll see “show vtp password”:

http://www.freeccnaworkbook.com/workbooks/ccna/configuring-vlan-trunking-protocol-vtp/

I was trying to declare the background color using only HTML and no CSS, but after reading more of Anki’s documentation it appears they do support CSS, and you can specify that only certain cards (in my case it would be the command syntax cards) have specific features.

Here is an example of a card I have now:

<p class="cmd-p">R1(config)#</p><p class="cmd-g">interface gi 0/0/0</p>
<p class="cmd-p">R1(config-if)#</p><p class="cmd-g">ip igmp join-group </b>239.0.0.11</b></p>

All that is missing is the background declaration. But since I can do this in CSS, I was hoping someone can point me in the right direction of using CSS.

I was thinking of using this:

#cmd {
background-color:black;
width:auto;
}

p.cmd-p {
color:purple;
}

p.cmd-g{
color:green;
}

This isn’t my strong suit, so I appreciate any help. I want to make sure that when I change from purple to green text, it doesn’t begin on a new line. I think I can use a span HTML tag to do this instead of p tags, but how can I do this in CSS? I want to minimize the amount of code on each flashcard.

Thanks

Impossible to do. HTML is structure and content, not style.

I guess what you mean is “by using only the out-dated practice of using inline style attributes”

Among the validation errors you will see “Use CSS instead”

https://validator.w3.org/nu/?doc=http%3A%2F%2Fwww.freeccnaworkbook.com%2Fworkbooks%2Fccna%2Fconfiguring-vlan-trunking-protocol-vtp%2F

Any reason why you can’t?

It’s all good - I was reading the documentation for the program and there is no reason why I can’t use CSS. I’m just trying to figure out the best way to enclose the text in a black box. I wonder if it is more efficient to make the graphic in Photoshop and save it as a low-res gif instead? Probably still more efficient to use HTML/CSS…

Alex,

Where on your computer is the data for the cards stored and in what format? I downloaded the program to my PC and installed it, but have not had time to figure out the internals such as were one would include CSS files. The cards seem to be in a database of some type.

A link to any online dev files (that explains how to customize the cards) would be a time saver.

Thanks

It will, since <p> is a block element.

That’s exactly what <span> is for.

<span class="cmd-p">R1(config)#</span><span class="cmd-g">interface gi 0/0/0</span>
<span class="cmd-p">R1(config-if)#</span><span class="cmd-g">ip igmp join-group <b>239.0.0.11</b></span>

Though you generally would not put everything in a span to style it. You should have a default color set and style only what differs from that.
As for your css selectors, you don’t want to state the element as well as the class like you did.
So it’s cmd-p { color:purple;} not span.cmd-p { color:purple; }

No. Just give the parent element background:#000;

Thanks for checking this out ronpat…I’ll check out the documentation now to see where to put the CSS. If it helps, when I create cards, I simply create an excel sheet with two columns (Q and A). I export the Excel to a tab-delimited notepad that is in UTF-8 format, and import this text document into Anki Desktop. That is how I create my cards.

Of course, in the spreadsheet that I use to create my cards I have many more columns, such as the number of the card, the tags, etc., but when it comes time to generating the actual cards, I only use the columns “Question” and “Back Finished”.

Edit: I found the section about CSS styling so I’m going to see if there is an easy way to do this:
http://ankisrs.net/docs/manual.html#card-styling

It sounds like I should create a new column in my spreadsheet so that I can identify the card as a command-line question, so I can tag it as such, and style it with CSS.

Thanks SamA74, I’ll try that as soon as I figure out where to put the CSS in the program :slight_smile:

So I should be using a div here with background:#000; ? I don’t want the entire card to have a black background; I want to set a min height and width, and have the box grow to accomodate the text if I need to entet multiple lines.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.