Forum How do I...?

Prev 1 2

Trouble creating a PDF from localhost

ZurichKevin
Here is the HTML of an entry in the TOC:


<a class="hash-link" href="#viewing-market-data-in-a-chart" title="Direct link to heading">#</a>



There is a # present and I suspect it was inserted by the tool that I have used - the Atom Editor - to create and modify the Markdown files that are transformed into HTML before they are served. The # is used to designate strings that are linkable.

Would you have any idea as to how the hash mark could be excluded?
csant
Add to your custom CSS file the following rule:

.hash-link {
    display: none !important;
}


ZurichKevin
Nope. It didn't work, even after rebuilding and re-serving the Docusaurus site.

Here are the contents of the custom.css file:

/**
 * Any CSS included here will be global. The classic template
 * bundles Infima by default. Infima is a CSS framework designed to
 * work well for content-centric websites.
 */

/* You can override the default Infima variables here. */


@media print {
    .row { display: block !important; }
}

:root {
  --ifm-color-primary: #25c2a0;
  --ifm-color-primary-dark: rgb(33, 175, 144);
  --ifm-color-primary-darker: rgb(31, 165, 136);
  --ifm-color-primary-darkest: rgb(26, 136, 112);
  --ifm-color-primary-light: rgb(70, 203, 174);
  --ifm-color-primary-lighter: rgb(102, 212, 189);
  --ifm-color-primary-lightest: rgb(146, 224, 208);
  --ifm-code-font-size: 95%;
}

.hash-link {
    display: none !important;
}

.docusaurus-highlight-code-line {
  background-color: rgba(0, 0, 0, 0.1);
  display: block;
  margin: 0 calc(-1 * var(--ifm-pre-padding));
  padding: 0 var(--ifm-pre-padding);
}

.markdown img {
  margin-left: auto;
  margin-right: auto;
  display: img;
}


html[data-theme='dark'] .docusaurus-highlight-code-line {
  background-color: rgba(0, 0, 0, 0.3);
}


table {
  margin-left: auto;
  margin-right: auto;
  display: table;
}
ZurichKevin
Maybe the order matters? I mean the order in which the rules are defined in custom.css.

Edited by ZurichKevin

csant
The order is important for CSS - but nothing in that custom CSS file is overriding the instruction to hide the hashes.

For some reason that style is not applied - either it is not specific enough, or the final HTML of the rendered page is different, or some other reason. It's not possible to debug this without seeing the page.
ZurichKevin
How about this snippet:

<h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_WiXH" id="viewing-market-data-in-a-chart"></a>Viewing market data in a chart<a class="hash-link" href="#viewing-market-data-in-a-chart" title="Direct link to heading">#</a></h2>


The <a> tag is embedded in the <h2> tag. Does this matter?
csant
It shouldn't - but you can try being more specific:
h2 a.hash-link {
    display: none !important;
}
ZurichKevin
No luck.
ZurichKevin
The hash link does not display in Doicusaurus but only in the PDF file generated by

 npx docusaurus-prince-pdf -u http://localhost:3000/docs/book  --include-index -o APPLE.pdf
csant
I think I am now understanding - I missed a hint of yours earlier on!

Since it shows only in the PDF bookmarks, this cannot be controlled by CSS - your best option would be to include a script file that walks through the documents and removes the hashes when printing the file. (Or you can disable that feature in your editor inserting the hashes!)

My apologies for missing this earlier on.
ZurichKevin
No problem. There are solutions - Adobe Acrobat for example - but they are cumbersome and time consuming. Would you know of a search and replace feature to be used on PDFs? That would solve this problem.
ZurichKevin
I have a bit more to add. The hashes only appear after those TOC elements that were apparently incorporated from the internal list of topics that appear on the web site.

The attached file show the internal list of topics, and the corresponding HTML that defines this is shown below:

<a href="#key-terms-and-concepts" class="table-of-contents__link toc-highlight table-of-contents__link--active">Key terms and concepts</a>


Any idea on what might work?
  1. Hash-Mark-Illustration.png55.4 kB
ZurichKevin
Apparently Bookmarks is the appropriate term to use and not TOC. Attached please find a screenshot to the Bookmarks with the hash mark.
  1. Hash-Mark-in-Bookmark.png6.8 kB
    Hashmark in Bookmark
csant
Would you know of a search and replace feature to be used on PDFs?


I am sorry, I don't know how to remove them in the PDF.

As mentioned earlier, I would avoid adding them when creating your PDF - either by disabling the feature in your editor, or by running a script over the HTML and remove them.
ZurichKevin
PDF-XChange Editor is a tool that lets you export the bookmarks, edit them - and by so doing remove the hash marks - and then import the revised bookmarks into the PDF.

There may be other ways of cleaning up the putput but this seems to work best.
Prev 1 2
Showing 51 - 65 of 65