Is it possible to preview and print a markdown file as a PDF in VS Code using a custom CSS stylesheet?

Let me explain my scenario:

I am looking to create a formatted markdown document (such as my CV) and apply a customized style using a CSS file. Afterwards, I aim to generate a PDF version of this document.

In order to achieve this, I have integrated the Markdown PDF extension in Visual Studio Code which functions effectively.

To allow both the extension and preview to correctly display the designed styling, I adjusted the settings in vscode by modifying the `setting.json` for each extension to reference my CSS file, resulting in successful application.

For live preview rendering:

{
  "markdown.styles": ["my-styles.css"]
}

For exporting to PDF:

{
  "markdown-pdf.styles": ["~/Documents/Styles/my-styles.css"]
}

Despite this working solution, the challenge arises when the said stylesheet is universally applied to all my markdown files. Ideally, I seek to embed the CSS file exclusively for specific documents - like having a distinct style for CVs, reports, etc.

Is there a way to make this possible?

Answer №1

After implementing workspace-specific configurations, my problem was successfully resolved.

While I couldn't use a separate CSS file for each markdown document, I found a suitable solution: I grouped all my resumes together with the corresponding CSS in one workspace setting, and kept my other documents in a separate workspace with a different stylesheet.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for keeping a div visible while hovering over a link using only CSS

Apologies for any language errors in advance. I will do my best to explain my issue accurately: In my CSS, I have created a hidden div that is displayed none by default. When I hover over a link in the navigation bar, I change the display to block, creati ...

Problem with CSS multi-level dropdown navigation in a vertical layout

I am in the process of creating a navigation menu with dropdown menus, which are working correctly. Now, I would like to add another sub-menu drop down inside dropdown 1, but I am having trouble getting it to function properly. How can I make Sub Menu 1 ac ...

The issue of JQuery mobile customizing horizontal radio buttons failing to function on physical devices has been identified

Not long ago, I posed a query on Stackoverflow regarding the customization of horizontal jQuery-mobile radio buttons. You can find the original post by following this link How to customize horizontal jQuery-mobile radio buttons. A developer promptly respon ...

Put Angular4 (Angular) that has been developed with angular-cli onto Google App Engine

After creating an Angular4 application using Angular-CLI, I was able to run it locally with "ng serve" and everything worked perfectly. Now my goal is to deploy it to Google App Engine, where ng build --prod compiles all files into a dist folder. My quest ...

Using the CSS :not selector to style certain input elements

Is there a way to style ALL input elements except for specific types without using the :not selector? Here's an example of what I tried: input, input:not(type='email') { background: red; } Unfortunately, this approach didn't work ...

Adding an Icon to a Tab in Ant Design - A Step-by-Step Guide

Is there a way to include an icon before the title of each open tab? I am currently using the antd library for tab creation, which doesn't provide a direct option for adding icons. Here is my code snippet along with a link to the jsfiddle https://jsfi ...

"Utilizing flex-box to create a hover effect for child elements

I am attempting to create a grid caret with a top and bottom caret that displays a grey area when the user hovers over each side. <div class="control-wrap"> <div class="caret-wrap"> <span class="caret">▲</span> </div&g ...

Attempting to attach a particular image, but it consistently ends up linking to different images instead

I am having an issue with linking an image in my footer. Every time I link one image, the link seems to affect all the other widgets in the footer. Is there a way to prevent this from happening? Visit my website Below is the code I used to create a clic ...

How can I distinguish the search results from the while loop section at the bottom of the page?

One issue here is the footer's margin position being influenced by the results of the while loop. To see the problem more clearly, visit this link: Below is the code snippet: <div id="print_output1"> <?php $co ...

Issue with IE11 when using Bootstrap 4 and Flexbox

In my design, I have two columns that need to have equal heights when displayed next to each other on a large screen. However, on mobile devices, they should stack on top of each other. I am currently using the old BS grid for this layout. The content wit ...

Is there a way for me to update the button text and class to make it toggle-like

Is there a way to switch the button text and class when toggling? Currently, the default settings show a blue button with "Show" text, but upon click it should change to "Hide" with a white button background. <button class="btn exam-int-btn">Show< ...

Switching the background image dynamically in Vue.js upon page access

My goal is to update the 'background-image' when the page is accessed. export default { created () { document.getElementsByTagName('html')[0].style.background = "url('../assets/background-blur.png') center" } } //Logi ...

The data type "100%" cannot be assigned to a number type in the kendo-grid-column

I need the columns in the grid to have a width of 100%. <kendo-grid-column field="id" title="id" [width]="'100%'"> </kendo-grid-column> However, when I hover over the code, I get this message: The value "100%" cannot be ...

Unable to adjust image opacity using jQuery

I am attempting to change the opacity of an image based on a boolean flag. The image should have reduced opacity when the var pauseDisabled = true, and return to full opacity when pauseDisabled = false. To demonstrate this, I have created a fiddle below. ...

Horizontal expanding and collapsing navigation menu

Is there a way to modify the expand menu bar so it expands from left to right or right to left, instead of top down? Any assistance would be greatly appreciated. Existing Expand Menu Bar <HTML> <HEAD> <META http-equiv="Content-Type" c ...

Embedding a picture within a uniquely shaped container

I have multiple sets of skewed divs and I would like to include a separate image in each of them. However, when I attempt to insert an image, it also becomes skewed and distorted. Is there a way to prevent this from happening? Ideally, I want the images to ...

iOS Webkit is causing an override of the CSS property text-align for the submit button

Here is the CSS code I used for styling a form's submit button: .submit { -webkit-appearance: none !important; text-align: center !important; border-radius: 0rem; color: rgb(63, 42, 86); display: inline-block; float: right; ...

What are the steps to creating code that meets the high-quality standards of Themeforest

My plan is to sell bootstrap templates on the themeforest market but my first template got rejected. I believe the issue lies in the code structure and organization. Could you recommend any books or video courses that can help me write code that meets The ...

Can someone explain the functionality of the CSS Selector > * when used inside a Vue.js component?

While exploring the Vuestic admin dashboard tool, I noticed a glitch in the UI where the donut chart appeared larger than its container. I tried to troubleshoot and fix it for submission as a PR, but I encountered an unfamiliar CSS selector > * while de ...

Managing Margins and Padding in Multiple Lines of Divs in CSS

Trying to understand the spacing issues that arise when tiling a series of divs within a parent div. Here is a link to the fiddle for reference: http://jsfiddle.net/SNSvU/4/. Below is the code snippet: <div id="prioritiesWrapper"> <div class="p ...