Hide buttons on pagedown

Question

I'm using pagedown on my website right now, and it's awesome so far, the only detail is it's not a programming-oriented website, so I'd like to remove the 'code' button.

Is there a way I can do it? I tried using CSS to hide the buttons but the html has inline styles "left: xxx" which I can't change using CSS.

Thanks in advance!

Answer 1

If you open up Markdown.Editor.js, and scroll to approximately line 1360 (it varies depending upon which version you're using), you'll see an area with:

group1 = makeGroup(1);
buttons.bold = makeButton("wmd-bold-button", "Bold - Ctrl+B", "icon-bold", bindCommand("doBold"), group1);
buttons.italic = makeButton("wmd-italic-button", "Italic - Ctrl+I", "icon-italic", bindCommand("doItalic"), group1);

group2 = makeGroup(2);
buttons.link = makeButton("wmd-link-button", "Link - Ctrl+L", "icon-link", bindCommand(function (chunk, postProcessing) {
  return this.doLinkOrImage(chunk, postProcessing, false);
}), group2);
buttons.quote = makeButton("wmd-quote-button", "Blockquote - Ctrl+Q", "icon-blockquote", bindCommand("doBlockquote"), group2);
buttons.code = makeButton("wmd-code-button", "Code Sample - Ctrl+K", "icon-code", bindCommand("doCode"), group2);
buttons.image = makeButton("wmd-image-button", "Image - Ctrl+G", "icon-picture", bindCommand(function (chunk, postProcessing) {
  return this.doLinkOrImage(chunk, postProcessing, true);
}), group2);

So on and so forth. Simply quote out the buttons you don't want.

Alternatively, you can simply leave out the entire wmd-buttons div and only use the editor and preview components.

Answer 2

• Search for doClick(buttons.code)in the code and comment it out

• If you look at the makeButton function:

  var makeButton = function (id, title, XShift, textOp) {
  var button = document.createElement("li");
  button.className = "wmd-button";
  button.style.left = xPosition + "px";
  xPosition += 25;
  var buttonImage = document.createElement("span");
  button.id = id + postfix;
  button.appendChild(buttonImage);
  button.title = title;
  button.XShift = XShift;
  if (textOp)
      button.textOp = textOp;
  setupButton(button, true); // <--- LOOK HERE
  buttonRow.appendChild(button);
  return button;
  

  };

The true that is being passed in the call of the setupButton function is the isEnabled flag. What I did was just created another makeButton function and put it right under the first one. The only thing that I changed was that isEnabled flag to false. Then I changed to button.code = makeButton(...) to button.code = makeButton2(...).

buttons.code = makeButton2("wmd-code-button", getString("code"), "-80px", bindCommand("doCode"));