I want to know if it's possible to change the font of the code block in marp.
If it is possible I'd like to know how to do this.
This is my code block:
char *strcpy(char *dest, const char *src)
{
char *p = dest;
while(*p++ = *src++);
return dest;
}
I tried adding this since I saw someone using this to alter the code block font size so I assumed that doing the same with font-family would work.
This is the code:
<style scoped>
pre {
font-family: Courier New;
}
</style>
but it didn't help.
What i found to work in my document is using the code class to format code:
<style scoped>
code {
font-family: "Times New Roman", Times, serif;
}
</style>
Addtionally, you might need to put the name in quotation marks.
Related
I am using TextEditor from the example provided with Qt (https://doc.qt.io/qt-5/qtquickcontrols1-texteditor-example.html). Here is the complete code https://code.qt.io/cgit/qt/qtquickcontrols.git/tree/examples/quickcontrols/controls/texteditor?h=5.15
I have created a custom method void DocumentHandler::setBackgroundColor(const QColor &color) to change the background color of the overall HTML document.
My problem is whenever I call a method to change the background color of QTextDocument using setDefaultStyleSheet, it is executed only once. ie, my document background changes only once. For the next calls, I can see the qDebug printing correctly, but the setDefaultStyleSheet doesn't work. However, everything works perfectly with normal text, only not with m_doc->toHtml().
How do I fix this?
If I change m_doc->setHtml("some random text"), it works as required
...
QColor DocumentHandler::backgroundColor() const
{
return m_backgroundColor;
}
void DocumentHandler::setBackgroundColor(const QColor &color)
{
m_backgroundColor = color.name(); // QColor variable
m_doc->setDefaultStyleSheet("body{background-color: '"+ color.name() +"'}"); // m_doc is QTextDocument *
m_doc->setHtml(m_doc->toHtml());
qDebug() << "BACKGROUND COLOR CHANGED" << color.name() ;
emit backgroundColorChanged();
}
In the QML, I have called it like this
...
DocumentHandlerModel {
id: document
target: textArea
cursorPosition: textArea.cursorPosition
selectionStart: textArea.selectionStart
selectionEnd: textArea.selectionEnd
backgroundColor: colorDialog2.color
onFontFamilyChanged: {
var index = Qt.fontFamilies().indexOf(document.fontFamily)
if (index === -1) {
fontFamilyComboBox.currentIndex = 0
fontFamilyComboBox.special = true
} else {
fontFamilyComboBox.currentIndex = index
fontFamilyComboBox.special = false
}
}
onError: {
errorDialog.text = message
errorDialog.visible = true
}
}
Cause
The documentation of QTextDocument::setDefaultStyleSheet says:
Note: Changing the default style sheet does not have any effect to the existing content of the document.
You try to overcome this by calling setHtml after setDefaultStyleSheet like that:
m_doc->setHtml(m_doc->toHtml());
However, this does not produce the desired result, because setDefaultStyleSheet actually embeds the background color in the HTML through the bgcolor CSS property.
To test this, add
m_doc->setHtml("<html><body><p>Test</p></body></html>");
qDebug() << m_doc->toHtml();
after
m_doc->setHtml(m_doc->toHtml());
The HTML content of m_doc from <html><body><p>Test</p></body></html>, when tested with #FF00FF, becames:
"<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.0//EN\" \"http://www.w3.org/TR/REC-html40/strict.dtd\">\n<html><head><meta name=\"qrichtext\" content=\"1\" /><style type=\"text/css\">\np, li { white-space: pre-wrap; }\n</style></head><body style=\" font-family:'MS Shell Dlg 2'; font-size:8.25pt; font-weight:400; font-style:normal;\" bgcolor=\"#ff00ff\">\n<p style=\" margin-top:12px; margin-bottom:12px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;\">Test</p></body></html>"
Note: Please, notice that assignment: bgcolor=\"#ff00ff\.
So, by writing m_doc->setHtml(m_doc->toHtml()); you effectively return the old color. That is why the color changes only the first time.
By the way, the widget now changes its color, but has lost its content.
Solution
It is hard to find an elegant solution, because in this case markup and styles are not kept separate, as in real HTML and CSS, but the style is embedded by Qt in the markup. The one thing which comes to my mind, is to parse the content of m_doc manually.
Note: Such a solution would be extremely fragile and I advise strongly against it. Maybe instead of using a stylesheet, change the background color by setting up the palette of the widget, which renders the content of the QTextDocument on the screen.
Note: In any case this does not seem like the intended behavior, at least it does not match the description in the documentation, so I would have reported it as a bug to Qt, if I were you.
Example
Here is an example I wrote for you in order to demonstrate the proposed solution:
void DocumentHandler::setBackgroundColor(const QColor &color)
{
const QString &bgcolor("bgcolor=\"");
QString html(m_doc->toHtml());
int n = html.indexOf(bgcolor, html.indexOf("<body"));
int k = n + bgcolor.length();
m_doc->setDefaultStyleSheet("body { background-color: '" + color.name() + "' }");
if (n >= 0)
html.replace(n + bgcolor.length(), html.mid(k, html.indexOf("\"", n + bgcolor.length()) - k).length(), color.name());
m_doc->setHtml(html);
m_backgroundColor = color.name(); // QColor variable
emit backgroundColorChanged();
}
I am trying to set an application wide css style in gtkmm-3.0 .This is how i initialize and load the style:
#include "MainWindow.h"
#include <string>
#include <iostream>
const std::string style = R"(
toolbutton {
border-color : #000000;
border-width : 1px;
border-radius: 0px;
}
)";
void loadStyle()
{
try
{
auto css = Gtk::CssProvider::create();
css->load_from_data(style);
Gtk::StyleContext::add_provider_for_screen(
Gdk::Screen::get_default(), css,
GTK_STYLE_PROVIDER_PRIORITY_APPLICATION
);
}
catch(const Gtk::CssProviderError error)
{
std::cerr << "Failed to load style:" <<error.code() << std::endl;
}
}
int main(int argc, char *argv[])
{
auto app = Gtk::Application::create(argc, argv,"com.test");
loadStyle();
MainWindow window(800, 600);
window.show_all();
return app->run(window);
}
MainWindow is just a Gtk::Window that has a Gtk::Toolbar with a few Gtk::ToolButton.
But for some reason the style isn't getting applied to my ToolButton's at all. If i change my stylesheet selector to "select all elements" it get's applied to my toolbuttons:
* {
border-color : #000000;
border-width : 1px;
border-radius: 0px;
}
So i am assuming my code is correct and the selector in my stylesheet is wrong.
However the documentation says GtkToolButton has a single CSS node with name toolbutton.
I am currently not setting any names or classes myself using set_name or add_class.
What am i doing wrong?
when we create Gtktoolbutton it's actually using Gtkbutton.
so in your css if you add
toolbutton button {
it will work.
gtkcss can be kinda confusing to learn as you wont find proper documentation(well I was not able to find a very detailed doc and all).. it's better to use GtkInspector to debug gtk css..
I am brand new to sass and am trying to get my head wrapped around mixins and using if/else statements inside of mixins. I'm trying to write something simple that basically says if the width setting of a selector is greater than 50% it will be a certain color, otherwise it will be a different color.
Here is the code I have so far:
#mixin color-class($width) {
#if "$width > 50%" {
background-color: purple;
} #else {
background-color: orange;
}
}
.selector-two {
#include color-class(40%);
}
.selector-three {
#include color-class(80%);
}
The css outputs the color as purple no matter what value I put here so I'm definitely missing something, any help would be greatly appreciated.
try removing the ":
#if $width > 50% {}
You can quickly experiment with it here: http://sassmeister.com/
I have a list of items which I want to shade the currently selected one. The problem is that the Foo widget has children and when the following rule always applies instead of just on hover:
Foo:hover {
background-color:#00FFFF;
}
Foo:hover * {
background-color:#00FFFF;
}
How do I fix this?
Your syntax is wrong. It should be like this:
Foo *::hover{ background-color: #00FFFF; }
Or if you only want to apply this to direct children:
Foo > *::hover{ background-color: #00FFFF; }
Windows 7 SP1
MSVS 2010
Qt 4.8.4
I am trying to determine what the rendered heights of each line (text block to be exact) of a Qt document are. The document has rich text, so each text block may have fragments. Assume no word wrapping so each text block is a line. To simplify things, here is what I want to do:
#include <QTGui>
int CalculateLineHeight(QTextBlock text_block);
int main(int argc, char *argv[])
{
QApplication app(argc, argv);
QMainWindow* window = new QMainWindow;
QTextEdit* editor = new QTextEdit(window);
QTextDocument* text_document = new QTextDocument(window);
editor->setDocument(text_document);
QFile file("test.html");
if (file.open(QFile::ReadOnly | QFile::Text))
editor->setHtml(file.readAll());
QTextBlock text_block = text_document->begin();
while (text_block.isValid() )
{
qDebug() << text_block.text() << CalculateLineHeight(text_block);
text_block = text_block.next();
}
window->setCentralWidget(editor);
window->show();
return app.exec();
}
int CalculateLineHeight(QTextBlock text_block)
{
QList<QTextLayout::FormatRange> text_block_format_ranges;
// Gather the format ranges for each fragment of the text block.
for (QTextBlock::Iterator fragment_it = text_block.begin(); !(fragment_it.atEnd()); ++fragment_it)
{
QTextFragment fragment = fragment_it.fragment();
QTextCharFormat fragment_format = fragment.charFormat();
QTextLayout::FormatRange text_block_format_range;
text_block_format_range.format = fragment_format;
text_block_format_range.start = fragment.position();
text_block_format_range.length = fragment.length();
text_block_format_ranges << text_block_format_range;
}
// Create text layout
QTextLayout text_layout(text_block.text());
text_layout.setAdditionalFormats( text_block_format_ranges );
text_layout.beginLayout();
QTextLine line = text_layout.createLine();
text_layout.endLayout();
return text_layout.boundingRect().height();
}
This is test.html:
<!DOCTYPE html>
<html>
<head>
<style>
.consolas{
font-family: "Consolas";
font-size:14pt;
background-color: cyan;
}
.arial{
font-family: "Arial";
font-size:14pt;
background-color: cyan;
}
</style>
</head>
<body>
<p><span class="consolas">E</span></p>
<p><span class="arial">E</span></p>
<p><span class="consolas">E</span><span class="arial">E</span></p>
</body>
</html>
The window displays (with my annotations indicating the LineHeights):
But I get the following console output:
"E" 22
"E" 13
"EE" 13
So, it apparently calculates it properly on the first line, but subsequent lines it does not calculate it properly (2nd line s/b 23, 3rd s/b 24). I suspect my problem lies in how I am handling the text layouts.
This did the trick:
int CalculateLineHeight(QTextBlock text_block)
{
QList<QTextLayout::FormatRange> text_block_format_ranges;
// Gather the format ranges for each fragment of the text block.
for (QTextBlock::Iterator fragment_it = text_block.begin(); !(fragment_it.atEnd()); ++fragment_it)
{
QTextFragment fragment = fragment_it.fragment();
QTextCharFormat fragment_format = fragment.charFormat();
QTextLayout::FormatRange text_block_format_range;
text_block_format_range.format = fragment_format;
// fragment.position = position within the document whereas
// .start = position within the text block. Therefore, need
// to subtract out the text block's starting position within the document.
text_block_format_range.start = fragment.position()
- text_block.position();
text_block_format_range.length = fragment.length();
text_block_format_ranges << text_block_format_range;
}
// Create text layout
QTextLayout text_layout(text_block.text());
text_layout.setAdditionalFormats( text_block_format_ranges );
text_layout.beginLayout();
QTextLine line = text_layout.createLine();
text_layout.endLayout();
line.setLeadingIncluded(true); // Need to include the leading
return line.height();