How do I change the looks of how the source code is presented in doxygen? I mean, when you click the link to view the source code of the file(s) that generated the documentation. I'm interested in changing the font size.
You can use custom CSS to style doxygen output.
As mentioned, you'll need to use custom CSS, which you can do through HTML_EXTRA_STYLESHEET.
To get a CSS template, run:
doxygen -w html header.html footer.html customdoxygen.css
You can then choose out elements from customdoxygen.css that you wish to modify, and add them to your own css file.
The CSS which ultimately informs the font-size of code snippets (fragments), is actually the div.line within:
div.line {
font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
font-size: 15px;
...
}
Related
I'd like to install custom styles in order to have different fonts for classes and attributes in visual studio code.
I installed the Custom CSS and JS Loader extension, and followed the guide but it doesn't seem to work.
Here's what I've tried. I created a file styles.css where I put this code:
.mtk1,
.mtk2,
.mtk8,
.mtk9,
.mtk10,
.mtk12,
.mtk11,
.mtk7,
.mtk3,
.mtk13,
.mtk16 {
margin-left: 1px;
font-family: "Indie Flower";
font-size: 1em;
}
.mtk7,
.mtk4 {
font-family: "Arial";
font-size: 0.7em;
}
/*
For the tab titles.
*/
.monaco-icon-label-description-container .label-name {
font-family: "Indie Flower";
font-size: 1.3em;
}
.tabs-container .monaco-icon-label-description-container .label-name,
.sidebar .monaco-icon-label-description-container .label-name,
.quick-open-row .monaco-icon-label-description-container .label-name {
font-family: -apple-system,BlinkMacSystemFont,Segoe WPC,Segoe UI,HelveticaNeue-Light,Ubuntu,Droid Sans,sans-serif;
font-size: 1em;
}
Then in settings.json I added the following settings:
{
"vscode_custom_css.imports": ["file:///home/mat/vscode_extensions/styles.css"],
"vscode_custom_css.policy": true
}
I took the path by typing inside this directory pwd, so it should be correct path. However, it still doesn't want to apply styles, neither fontFamily nor fontSize.
Does anyone knows where the problem is?
Extension didn't work for me but For what it's worth....while i was messing with this...if you go to the help menu, toggle the Developer Tools....
It will
Check the network tab > you will see there is one css file that vscode loads up.
file:///Applications/Visual%20Studio%20Code.app/Contents/Resources/app/out/vs/workbench/workbench.desktop.main.css
I went into this file and directly edited the css directly...
since i already had a css file that i intended to use with this extension...
#import url("file:///Users/adrian/.vscode/vs-code-styles.css");
Reload & Problem solved.
For example, i love my font but all i wanted was the tag to by with a different font-family then the attributes. After some trial and error, this did it. Mileage may very depending on whether or not vscode is changing these classes all the time.
span:not(.mtk1) + .mtki, span:not(.mtk1) + .mtk6{
font-family: 'Courier New' !important;
}
You have to run VSCode as Administrator and then Enable CSS in JS.
Example path to VSCode located in Applications:
sudo /Applications/Visual\ Studio\ Code.app/Contents/MacOS/Electron
And don't forget to install all those custom fonts to your Mac device.
I have a custom theme for CM, important part is just this:
.CodeMirror, .CodeMirror * {
font-family: "Roboto Mono" !important;
font-size: 14px;
}
Using this theme causes the text to be measured incorrectly at first render, but it looks good after the editor updates:
Is there any way I could force the Editor/Doc to re-measure the text? Couldn't find any API methods.
I've added the CSS that you provided and it works very fine.
Just you don't need to use the .CodeMirror *
I think that your problem may be due to something else.
Try to call editor.refresh(); after the page loaded.
I am using below syntax
```yaml
stages:
- build
- test
- deploy
```
This helps me to get proper text color and getting box but how to change the background color of the box.
TL;DR: GitHub overrides any styling you apply to your document when it renders it using its own flavor.
However, for other places you can do this with HTML and CSS if you wrap it in a <div> ... </div> pair:
# Code
## Vanilla
``python
print("hello world!")
``
## Flavored V1
<div style="background-color: rgb(50, 50, 50);">
``python
print("Yo!")
``
</div>
I had to remove a backtick ` from each code section in my example in order to render it properly here.
The file above renders as below on VSCode:
You can further change the appearance with CSS, however, I wouldn't recommend it.
P.S: GitHub has global dark themes available under settings.
There is no black them for code blocks in README, But you can workaround and add some custom styles to the <pre> tag or <code> like so:
code[class*="language-"], pre[class*="language-"]
border-radius: 6px
text-shadow: 0 1px #14161800 !important
background: #242424 !important
span.token.operator
background: none
span.token.keyword
color: #866cba
Note: It's a sass way style.
I want a text use specific font style, I assign its CSS class as ".title" and the related code all are declared in a CSS file within a Confluence plugin as following:
#font-face {
font-family: 'Myriad Pro';
font-style: normal;
src: url(MyriadPro-Regular.otf) format("opentype"), local("Consolas");
}
.title {
font-family: Myriad Pro;
}
But the plugin cannot find the font file. The font file is in the same folder with the CSS file.
What should be the url for the font file?
For Confluence Server, a basic plugin could be defined like so:
With some files in the following structure:
/your-plugin-name/
/your-plugin-name/main
/your-plugin-name/main/java
/your-plugin-name/main/resources
/your-plugin-name/main/resources/atlassian-plugin.xml
/your-plugin-name/main/resources/css/custom.css
/your-plugin-name/main/resources/fonts/MyriadPro-Regular.otf
And an atlassian-plugin.xml like this:
<atlassian-plugin key="${project.groupId}.${project.artifactId}" name="${project.name}" plugins-version="2">
<plugin-info>
<description>${project.description}</description>
<version>${project.version}</version>
<vendor name="${project.organization.name}" url="${project.organization.url}" />
</plugin-info>
<web-resource key="your-web-resources" name="Web Resources">
<resource name="style.css" type="download" location="css/custom.css" />
<resource name="myriad.otf" type="download" location="fonts/MyriadPro-Regular.otf" />
<!-- Adding main & global contexts means that these web resources will always be loaded. -->
<context>main</context>
<context>global</context>
</web-resource>
</atlassian-plugin>
Your CSS and font files will be available globally throughout Confluence.
Your CSS file will automatically be loaded and be named something like /downloads/gfdsgfdsgf/fdsgfd/me.davidsimpson.confluence.plugins.example:your-web-resources/style.css where gfdsgfdsgf/fdsgfd is some random characters.
You should be able to reference your font files as though they are in the same directory as the css file like so:
#font-face {
font-family: 'Myriad Pro';
font-style: normal;
src: url(myriad.otf) format("opentype"), local("Consolas");
}
.title {
font-family: Myriad Pro;
}
..but note that they have new names - style.css & myriad.otf.
For Confluence Server
If you want something like Consolas to work in Confluence, you'd either need to ensure that the font is installed on all browsers, or use a similar web font such as Inconsolata.
If you're happy that everyone has the correct font installed, add the following to
Confluence Admin | Custom HTML | At the END of the HEAD:
<style> body { font-family: Consolas, monaco, monospace; } </style>
If you decide to use the web font, add the following to
Confluence Admin | Custom HTML | At the END of the HEAD:
<link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet">
<style> body { font-family: Inconsolata, Consolas, monaco, monospace; } </style>
These assume that you want to use the Consolas font stack - where a similar font will be used if the Consolas/Inconsolata font fails to load.
For Confluence Cloud
You cannot edit CSS or add markup to the page, so this is not possible.
So I have a SVG file, that contains text elements. Example:
<text transform="matrix(1 0 0 1 195.248 207.165)" fill="#999999" font-family="'LeagueGothic'" font-size="24">Europe</text>
When I specify the font-family to something included in iOS (like Helvetica or Futura), everything works fine. However, once I specify a font included through #font-face, it simply doesn't work on iOS, while it does on desktop Safari, Chrome, Firefox as well as Opera.
Otherwise #font-face fonts work ok throughout the page, except the SVG parts.
Tried including the SVG file as <embed>, <object> and <img>, didn't help. Interestingly, when I try inline SVG (i.e. SVG code directly within HTML), then the fonts are ok, but it doesn't draw anything else form the SVG file.
I am on iOS 4.2. Tried SVG 1.1, 1.1 Tiny, 1.2, etc. all the same.
Is this a bug or am I missing something, please? Thanks.
Sample SVG file here: http://pastie.org/1637291
Your svg sample has no #font-face rule, nor references to any external stylesheets. Maybe a solution could be to include a stylesheet with that definition in the svg file itself.
For example:
<style>
#font-face { font-family: foo; src: url(somefont.svg#theFontElementId) format("svg"); }
</style>
If you are referencing the svg parts with e.g <object>, <embed>, <iframe> or <img> and see the webfont elsewhere on the page then that missing stylesheet thing could be the cause.